HT for Web 3D. HT for modern web and mobile app development. www.hightopo.com
分类: JavaScript
2020-02-29 00:19:46
数据蕴藏价值,但数据的价值需要用IT 技术去发现、探索,可视化可以帮助人更好的去分析数据,信息的质量很大程度上依赖于其呈现方式。在数据分析上,热力图无疑是一种很好的方式。在很多行业中都有着广泛的应用。
最近刚好项目中需要用到3D 热力图的效果展示。网上搜了相关资料,发现大多数是2D 效果或者伪3D 的,而3D 粒子效果对于性能上的体验不是很好,于是取巧写了个3D 热力图的效果 。
:
部分效果图:
大楼内的人员分布热力图。我们可以通过观察到一个区域的颜色深浅来判断该区域内实时的人员流动情况,知道哪个区域人多,哪个区域人少。该场景可适用于大楼内的警务监控,在发生突发事件时科学高效地制定分流疏导策略提供有力的帮助和支持,减少损失。亦可用于火险预警,监控区域实时温度。
室内设备温度热力图。传统的数据中心汇报方式枯燥单调、真实感不强,互动性差等,借助于3D热力图的可视化呈现方式,机房运维管理人员可大大提高工作效率及降低工作失误的可能性。
在场景反序列化之后,设置热力图的初始参数,初始化后得到的热力图模型添加进场景中,模拟3D热力图效果,最后再添加扫描、换肤、温度提示等功能。
在场景中画出热力图的区域,如图
首先确定要生成热力图的区域 areaNode,然后随机生成20 个点的信息,包含坐标position(坐标是相对红色长方体的某个顶点) 及热力值temperature 。
以下是该部分的主要代码:
使用ht-thermodynamic.js 插件来生成热力图。
发热点的数据准备好后,接着配置热力图的参数,参数说明如下。
- // 默认配置
- let config = {
- hot: 45,
- min: 20,
- max: 55,
- size: 50,
- pointNum: 20,
- radius: 150,
- opacity: 0.05,
- colorConfig: {
- 0: 'rgba(0,162,255,0.14)',
- 0.2: 'rgba(48,255,183,0.60)',
- 0.4: 'rgba(255,245,48,0.70)',
- 0.6: 'rgba(255,73,18,0.90)',
- 0.8: 'rgba(217,22,0,0.95)',
- 1: 'rgb(179,0,0)'
- },
- colorStopFn: function (v, step) { return v * step * step },
- };
- // 获取区域数据
- let rackTall = areaNode.getTall();
- let heatRect = areaNode.getRect();
- let { width, height } = heatRect;
- if (width === 0 || height === 0) return;
- // 热力图初始化
- let thd = this.thd = new ht.thermodynamic.Thermodynamic3d(g3d, {
- // 热力图所占用的空间
- box: new ht.Math.Vector3(width, height, rackTall),
- // 配置温度的最小值和最大值
- min: config.min,
- max: config.max,
- // 每一片的渲染间隔
- interval: 40,
- // 为false时,温度区域交集时值不累加,取最高温度
- remainMax: false,
- // 每一片的透明度
- opacity: config.opacity,
- // 颜色步进
- colorStopFn: config.colorStopFn,
- // 颜色范围
- gradient: config.colorConfig
- });
将第一步生成的发热点,设置thd的数据对象,调用thd.createThermodynamicNode()来生成热力图的3D 图元。设置其相关信息,将该图元添加进3D场景中。这样一个简单的3D 热力图就算完成了。
-
// 加载热力图
-
function loadThermodynamic(thd, areaNode, templateList, config) {
-
thd.setData(templateList);
-
// x,y,z面数
-
let node = this.heatNode = thd.createThermodynamicNode(config.size, config.size, config.size);
-
let p3 = areaNode.p3();
-
node.setAnchorElevation(0);
-
node.p3(p3);
-
node.s({
-
'interactive': true,
-
'preventDefaultWhenInteractive': false,
-
'3d.movable': false,
-
"wf.visible": false
-
});
-
g3d.dm().add(node);
-
}
主体介绍完了,现在开始讲讲该demo的几个功能。
- // 交互效果
- g3d.mi(e => {
- if (e.kind === 'onMove') {
- let { clientX, clientY } = e.event;
- if (this.templateTip) {
- let value1 = this.thd1.getHeatMapValue(e.event, 'middle');
- let value2 = this.thd2.getHeatMapValue(e.event, 'middle');
- if (value1 || value1 === 0 || value2 || value2 === 0) {
- let position = g2d.getLogicalPoint({ x: clientX, y: clientY })
- this.templateTip.a('value', value1 || value2 || 0)
- let { width, height } = this.templateTip.getRect()
- this.templateTip.setPosition({ x: position.x + width / 2, y: position.y - height / 2 })
- }
- }
- } else if (kind === 'onLeave') {
- let tag = data.getTag()
- if (tag && tag.hasOwnProperty('hoverBlock') > -1) {
- this.g2d.getView().style.cursor = 'default';
- }
- this.templateTip && this.setVisible(this.templateTip, false)
- }
- })
将第三步中的 thd.createThermodynamicNode() 替换。在生成热力图对象时,不直接返回一个模型,而是选择某一个方向进行“切割”,将这一方向的长度均分为 n 份,通过 thd.getHeatMap() 方法来获取每一片的热成像。n 的值理论上可以取任意值,但为了渲染效果更好一点,这里我取的是 50,不至于太多而导致首次渲染时间过长。每切出一个面,我们就在热力区域的相对位置上动态创建一个 ht.Node ,接着使用 ht.Default.setImage() 将切出来的面注册成图片,去设置成该 node 的贴图(只需设置切割方向上的两个面就行)。最后将所有的 node 添加进 dataModel( ht 中承载 Data 数据的模型)。
扫描功能,有两种方案。第一种是在步骤3切割贴片时,不去创建n个 node,而是只创建一个,然后动态去设置该node的贴图及坐标,模拟扫描效果;第二种依旧创建n个node,然后全部隐藏,通过不同时刻来控制让其中某一个节点显示,模拟扫描功能。这里我采用了第二种,因为第一种要去频繁的修改多种属性才能达到效果,第二种的话只要控制其 '3d.visible'。
主要代码如下:
换肤的实现原理:根据不同的场景值去动态修改ht.graph3d.Graph3dView的背景色及墙的颜色等。
代码: