CN117710589A - 一种在3d模型上模拟展示人流量密度的热力图 - Google Patents

Abstract

本发明公开了一种在3D模型上模拟展示人流量密度的热力图，首先通过预先放置的摄像头采集、记录人流数量，通过websocket实时推送人流数据，当数据推送到前端后通过函数function getPoints(areaWidth,areaHeight,len){}来模拟计算出每个人在区域中的位置；websocket接收到新的人流数据时，分析对比人流数量变化情况，当人流量增加的时候，通过步骤1公式计算出增加个数的新的模拟热力点数据，添加到原始数据中。本发明实现热力图在3D模型上的展示，使热力图更真实。

Description

一种在3D模型上模拟展示人流量密度的热力图

技术领域

本发明涉及人流量密度热力图技术领域，具体为一种在3D模型上模拟展示人流量密度的热力图。

背景技术

随着互联网市场越来越多样化，3D模型技术愈发广泛的应用到人们的生活中，应用3D模型技术更能直观的体现某一使用场景的情况。随着需求，3D模型上可能需要展示人流量的情况，因此需要一种热力展示。但现有的技术并不能很好的体现人流量的动态分布及居中分布情况，目前采用的方法是使用热力堆加的方式展示，将热力展示在一点。

现有热力图展示方案，仅仅只是将区域的密度在一点展示出来，呈现的效果类似“红晕”，热力数据堆积在一起，又或者热力数据超出区域，表现出热力图被截断的效果，整体效果不太美观。当人流量数据有变动的情况下，热力图整体进行重绘，表现出闪跳的情况，没能体现出人流自然流动的效果。

因此，针对上述问题提出一种在3D模型上模拟展示人流量密度的热力图。

发明内容

本发明的目的在于提供一种在3D模型上模拟展示人流量密度的热力图：

步骤1：首先通过预先放置的摄像头采集、记录人流数量，通过websocket实时推送人流数据，当数据推送到前端后，将函数function getPoints (areaWidth, areaHeight,len){} 输入Javascript语言运行，来模拟计算出每个人在区域中的位置，其中其中areaWidth是3D模型上某个区域的宽度，areaHeight是3D模型上某个区域的高度，len是摄像头采集到的人流个数，通过这三个参数可生成一个len个数长度的点位数组，以达到热力图在模型上的展示效果；

步骤2：websocket接收到新的人流数据时，分析对比人流数量变化情况，当人流量增加的时候，通过步骤1公式计算出增加个数的新的模拟热力点数据，添加到原始数据中，当人流量减少的时候，随机在原始数据中删除减少个数的热力点数据，以此使数据过渡平滑，渐变；

步骤3：引入第三方插件heatmap.js，获得canvas热力图；

步骤4：将热力图贴片到3D模型区域，实现热力图在3D模型上的展示。

优选的，步骤1的具体步骤包括：

步骤11：首先根据区域的宽高计算出热力点在区域初始分布位置(x, y)，

x=parseInt(areaWidth/2)+Math.floor(Math.random()*(6*areaWidth/10)-(3*areaWidth/10))；

y=parseInt(areaHeight/2)+Math.floor(Math.random()*(areaHeigth/2)-(areaHeight/4))；

其中parseInt为数值取整，Math.floor为数值向下取整，Math.random为0到1的随机值；

步骤12：当areaWidth＞areaHeigh的时候：

x=parseInt(areaWidth/2)+Math.floor(Math.random()*(6*areaWidth/7)-(6*areaWidth/14))；

同时计算热力数据点的半径radius：

radius=areaWidth/14>areaHeigth/4?areaHeight/4:areaWidth/14；

即radius的值为判断区域宽度一半的七分之一（areaWidth/2）*（1/7）是否大于区域高度一半的二分之一（areaWidth/2）*（1/2），如果前者大于后者，则radius为区域高度一半的二分之一，否则为区域宽度一半的七分之一；

步骤13：当areaWidth＜areaHeigh的时候：

y=parseInt(areaHeith/2)+Math.floor(Math.random()*(6*areaHeight/7)-(6*areaHeight/14))；

同时计算热力数据点的半径radius：

radius=areaHeight/14>areaWidth/4?areaHeight/4:areaHeight/14。

优选的，步骤3的具体步骤包括：

将生成的数据渲染到canvas中，引入第三方插件heatmap.js，通过import h337from ‘heatmap.js’；

const heatmapInstance = h337.create(config)；

heatmapInstance.setData(object)；

其中config为基础配置数据，object为步骤一生成的热力数据点，通过此方法获得canvas热力图。

优选的，步骤4的具体步骤为：引入three.js，输入import*as THREE from‘three’；

consttexture=newTHREE.CanavaTexture(heatmapInstance._renderer.canvas)；生成map贴图，然后根据areaWidth、areaHeight生成大小的片；

const geometry=new THREE.PlaneGeometry(areaWidth,areaHeight)；

const material=new THREE.MeshBasicMaterial({map: texture})；

const mesh=new THREE.Mesh(geometry, material)，最终将mesh加入到3D模型指点区域上。

与现有技术相比，本发明的有益效果如下：

本发明通过接受人流数据，计算每个人在区域中的位置，实时计算出增加和减少的新的模拟热力点数据，添加到原始数据中，以此使数据过渡平滑，渐变，采用第三方插件heatmap.js，获得canvas热力图，将热力图贴片到3D模型区域，实现热力图在3D模型上的展示，使热力图更真实。

附图说明

图 1 是本发明的步骤流程图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

如附图1所示，本发明提供的一种在3D模型上模拟展示人流量密度的热力图，

步骤1：首先通过预先放置的摄像头采集、记录人流数量，通过websocket实时推送人流数据，当数据推送到前端后，将函数function getPoints (areaWidth, areaHeight,len){} 输入Javascript语言运行，来模拟计算出每个人在区域中的位置，其中areaWidth是3D模型上某个区域的宽度，areaHeight是3D模型上某个区域的高度，len是摄像头采集到的人流个数，通过这三个参数可生成一个len个数长度的点位数组；，以达到热力图在模型上的展示效果；

步骤11：首先根据区域的宽高计算出热力点在区域初始分布位置(x, y)，

x=parseInt(areaWidth/2)+Math.floor(Math.random()*(6*areaWidth/10)-(3*areaWidth/10))；即x的默认值为区域宽度一半（areaWidth/2）加减区域宽度一半的五分之三（areaWidth/2）*（3/5）；

y=parseInt(areaHeight/2)+Math.floor(Math.random()*(areaHeigth/2)-(areaHeight/4))；即y的默认值为区域高度的一半（areaHeight/2）加减区域高度一半的二分之一（areaHeight/2）*（1/2）；

其中parseInt为数值取整，Math.floor为数值向下取整，Math.random为0到1的随机值；

步骤12：当areaWidth＞areaHeigh的时候：

x=parseInt(areaWidth/2)+Math.floor(Math.random()*(6*areaWidth/7)-(6*areaWidth/14))；即此时x的值为区域宽度的一半（areaWidth/2）加减区域宽度一半的七分之六（areaWidth/2）*（6/7）；

同时计算热力数据点的半径radius：

radius=areaWidth/14>areaHeigth/4?areaHeight/4:areaWidth/14；

即radius的值为判断区域宽度一半的七分之一（areaWidth/2）*（1/7）是否大于区域高度一半的二分之一（areaWidth/2）*（1/2），如果前者大于后者，则radius为区域高度一半的二分之一，否则为区域宽度一半的七分之一；

步骤13：当areaWidth＜areaHeigh的时候：

y=parseInt(areaHeith/2)+Math.floor(Math.random()*(6*areaHeight/7)-(6*areaHeight/14))；

同时计算热力数据点的半径radius：

radius=areaHeight/14>areaWidth/4?areaHeight/4:areaHeight/14。

步骤2：websocket接收到新的人流数据时，分析对比人流数量变化情况，当人流量增加的时候，通过步骤1公式计算出增加个数的新的模拟热力点数据，添加到原始数据中，当人流量减少的时候，随机在原始数据中删除减少个数的热力点数据，以此使数据过渡平滑，渐变；

步骤3：将生成的数据渲染到canvas中，引入第三方插件heatmap.js，通过importh337 from ‘heatmap.js’；

const heatmapInstance = h337.create(config)；

heatmapInstance.setData(object)；

其中config为基础配置数据，object为步骤一生成的热力数据点，通过此方法获得canvas热力图。

步骤4：引入three.js，输入import*as THREE from ‘three’；

consttexture=newTHREE.CanavaTexture(heatmapInstance._renderer.canvas)；生成map贴图，然后根据areaWidth、areaHeight生成大小的片；

const geometry=new THREE.PlaneGeometry(areaWidth,areaHeight)；

const material=new THREE.MeshBasicMaterial({map: texture})；

const mesh=new THREE.Mesh(geometry, material)，最终将mesh加入到3D模型指点区域上。

实施例1

输入第一组（400，300，5）结果为 ：

[{x：352，y：131，value：1，radius：28.571428571428573}，{x：124， y：221，value：1， radius：28.571428571428573}，{x：290，y： 85，value：1，radius：28.571428571428573}， {x：75，y：110，value：1，radius：28.571428571428573}，{x：142，y：198，value：1，radius：28.571428 571428573}]

实施例2

输入第二组（200，300，4）结果为：

[{x：96，y：111，value：1，radius：21.428571428571427}，{x：95，y：64，value：1，radius：21.428571428571427}，{x：90，y：77，value：1，radius：21.428571428571427}，{x：85，y：109，value：1，radius：21.428571428571427}]

在本发明的描述中，需要说明的是，术语“上”、“下”、“内”、“外”“前端”、“后端”、“两端”、“一端”、“另一端”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性。

在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“设置有”、“连接”等，应做广义理解，例如“连接”，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

Claims (4)

1.一种在3D模型上模拟展示人流量密度的热力图，其特征在于：

步骤1：首先通过预先放置的摄像头采集、记录人流数量，通过websocket实时推送人流数据，当数据推送到前端后，将函数function getPoints (areaWidth, areaHeight, len){} 输入Javascript语言运行，来模拟计算出每个人在区域中的位置，其中areaWidth是3D模型上某个区域的宽度，areaHeight是3D模型上某个区域的高度，len是摄像头采集到的人流个数，通过这三个参数可生成一个len个数长度的点位数组；

步骤2：websocket接收到新的人流数据时，分析对比人流数量变化情况，当人流量增加的时候，通过步骤1公式计算出增加个数的新的模拟热力点数据，添加到原始数据中，当人流量减少的时候，随机在原始数据中删除减少个数的热力点数据，以此使数据过渡平滑，渐变；

步骤3：引入第三方插件heatmap.js，获得canvas热力图；

步骤4：将热力图贴片到3D模型区域，实现热力图在3D模型上的展示。

2.根据权利要求1所述的一种在3D模型上模拟展示人流量密度的热力图，其特征在于：步骤1的具体步骤包括：

步骤11：首先根据区域的宽高计算出热力点在区域初始分布位置(x, y)，

x=parseInt(areaWidth/2)+Math.floor(Math.random()*(6*areaWidth/10)-(3*areaWidth/10))；

y=parseInt(areaHeight/2)+Math.floor(Math.random()*(areaHeigth/2)-(areaHeight/4))；

其中parseInt为数值取整，Math.floor为数值向下取整，Math.random为0到1的随机值；

步骤12：当areaWidth＞areaHeigh的时候：

x=parseInt(areaWidth/2)+Math.floor(Math.random()*(6*areaWidth/7)-(6*areaWidth/14))；

同时计算热力数据点的半径radius：

radius=areaWidth/14>areaHeigth/4?areaHeight/4:areaWidth/14；

即radius的值为判断区域宽度一半的七分之一（areaWidth/2）*（1/7）是否大于区域高度一半的二分之一（areaWidth/2）*（1/2），如果前者大于后者，则radius为区域高度一半的二分之一，否则为区域宽度一半的七分之一；

步骤13：当areaWidth＜areaHeigh的时候：

y=parseInt(areaHeith/2)+Math.floor(Math.random()*(6*areaHeight/7)-(6*areaHeight/14))；

同时计算热力数据点的半径radius：

radius=areaHeight/14>areaWidth/4?areaHeight/4:areaHeight/14。

3.根据权利要求1所述的一种在3D模型上模拟展示人流量密度的热力图，其特征在于：步骤3的具体步骤包括：

将生成的数据渲染到canvas中，引入第三方插件heatmap.js，通过import h337 from‘heatmap.js’；

const heatmapInstance = h337.create(config)；

heatmapInstance.setData(object)；

其中config为基础配置数据，object为步骤一生成的热力数据点，通过此方法获得canvas热力图。

4.根据权利要求1所述的一种在3D模型上模拟展示人流量密度的热力图，其特征在于：步骤4的具体步骤为：引入three.js，输入import*as THREE from ‘three’；

consttexture=newTHREE.CanavaTexture(heatmapInstance._renderer.canvas)；生成map贴图，然后根据areaWidth、areaHeight生成大小的片；

const geometry=new THREE.PlaneGeometry(areaWidth,areaHeight)；

const material=new THREE.MeshBasicMaterial({map: texture})；

const mesh=new THREE.Mesh(geometry, material)，最终将mesh加入到3D模型指点区域上。