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

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

背景技术：

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

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

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

技术实现思路

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

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

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

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

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

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

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

8、x=parseint(areawidth/2)+math.floor(math.random()*(6*areawidth/10)-(3*areawidth/10))；

9、y=parseint(areaheight/2)+math.floor(math.random()*(areaheigth/2)-(areaheight/4))；

10、其中parseint为数值取整，math.floor为数值向下取整，math.random为0到1的随机值；

11、步骤12：当areawidth＞areaheigh的时候：

12、x=parseint(areawidth/2)+math.floor(math.random()*(6*areawidth/7)-(6*areawidth/14))；

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

14、radius=areawidth/14>areaheigth/4?areaheight/4:areawidth/14；

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

16、步骤13：当areawidth＜areaheigh的时候：

17、y=parseint(areaheith/2)+math.floor(math.random()*(6*areaheight/7)-(6*areaheight/14))；

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

19、radius=areaheight/14>areawidth/4?areaheight/4:areaheight/14。

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

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

22、const heatmapinstance = h337.create(config)；

23、heatmapinstance.setdata(object)；

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

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

26、consttexture=newthree.canavatexture(heatmapinstance._renderer.canvas)；生成map贴图，然后根据areawidth、areaheight生成大小的片；

27、const geometry=new three.planegeometry(areawidth,areaheight)；

28、const material=new three.meshbasicmaterial({map: texture})；

29、const mesh=new three.mesh(geometry, material)，最终将mesh加入到3d模型指点区域上。

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

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

技术特征：

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

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

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

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

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

技术研发人员：李爱华,赵威,肖景洋,李末,王泽灏,翟月,李刚,吴敏思,董克,张鹏
受保护的技术使用者：沈阳二一三电子科技有限公司
技术研发日：
技术公布日：2024/3/17