全国
手机版|
关注公众号|
下载手机APP 而Hightopo（以下简称HT）的HTforWeb产品上的web组态提供了丰富的2D组态和3D组态效果，可以根据需求快速实现一套完整的数据可视化系统。本文将通过HT的3D组态实现一个可视化分布式能源站系统，带你走进丰富的组态的大门。
界面简介及效果预览
场景搭建上我们呈现了以热、电、冷联供为主要形式的多联产系统的分布式能源站系统，根据管道流动传递的流程步骤下，有效地实现了能源的梯级利用的展示效果：
告别传统工业互联网，提高数字管控思维：三维组态分布式能源站
代码实现
在能源站的建设中，分布式能源站是指小规模化、利用热、电、冷联供为主要形式分布于负荷附近的清洁环保发电设施，是一种相对可靠又高效的发电形式。
3D场景实现上通过创建ht.graph3d.Graph3dView来呈现3D的内容，3D视图组件进行deserialize()反序列化对应的json呈现出3D场景内容，然后将3D组件再加入到body下的方式实现场景的加载渲染的效果。还可以自定义修改一些交互或者视角上的限制，如修改左右键的交互方式或者设置场景的最大仰角，都能使用户在交互体验上更为流畅。
//创建三维拓扑视图
this.g3d=newht.graph3d.Graph3dView();
this.g3dDm=this.g3d.dm();
//将3D组件加入到body下
this.g3d.addToDOM();
//修改左右键交互方式
letmapInteractor=newht.graph3d.MapInteractor(this.g3d);
this.g3d.setInteractors([mapInteractor]);
//修改最大仰角为PI/2
mapInteractor.maxPhi=Math.PI/2;
为了能在悬浮建筑模型的时候，视觉上有交互体验，这里设置了模型的高亮模式。
告别传统工业互联网，提高数字管控思维：三维组态分布式能源站
//设置鼠标悬浮高亮模式
this.g3d.setHighlightMode('mouseover');
//设置高亮颜色
ht.Style['highlight.color']='#FEB64D';
场景渲染加载出来后，我们就能对于分布式能源站的工业流程可以通过管道的动画来展示。HT提供的ht.Shape是极其强大的图元类型，其在GraphView和Graph3dView组件上都能展示出各种二维和三维的形状效果，其扩展子类ht.PolyLine可实现三维空间管道的功能，我们可以通过ht.PolyLine绘制出流程所经的路径，通过ht.Default.startAnim()动画函数去执行调用变化管道上的uv贴图的偏移值，就可以达到流动的效果。
告别传统工业互联网，提高数字管控思维：三维组态分布式能源站
实现的代码如下：
animflow(){
//动画执行函数
ht.Default.startAnim({duration:2000,
easing:(t)=>{returnt},
action:(v,t)=>{
//通过数据模型获取唯一标识tag得到管道节点设置uv偏移流动动画
this.g3dDm.getDataByTag('flow1').setStyle('top.uv.offset',[v,0]);
this.g3dDm.getDataByTag('flow2').setStyle('top.uv.offset',[v,0.5]);
this,g3dDm.getDataByTag('flow3').setStyle('top.uv.offset',[-v,0.5]);
...},finishFunc:()=>{
animflow();}});}
而场景中呈现出来的数据，我们可以通过对接一些主流的接口，例如ajax、axios或者是WebSocket，根据自己对接交互的需求，可以判断采用轮询调用接口或者是对接双向进行数据传输，起到实时刷新数据的需求，而数据的载体可以对接到HT的3D公告板billboard上进行展示：
告别传统工业互联网，提高数字管控思维：三维组态分布式能源站
billboard同样是基于ht.Shape的子类，对于Shape不管是在2D组态或者是3D组态上呈现，都可以通过一些定义的属性styleMap来设定一些本身自带的属性值，当然用户也可以自己通过在attrObject里设定一些自定义属性。而分布式能源站中，我们通过对billboard设定了一些属性值来控制公告板的属性信息：
letbillboard=newht.Node();
billboard.s({//设定shpe3d的类型为公告板billboard
"shape3d":"billboard",
//设置公告板的图片image
"shape3d.image":"symbols/htdesign/box/panel.json",
//设置公告板始终自动旋转面对屏幕
"shape3d.autorotate":true,
//设置公告板开启透明
"shape3d.transparent":true,
//设置公告板不可移动
"3d.movable":false,
//设置公告板始终置顶
"shape3d.alwaysOnTop":true,
//设置公告板不可选中
"3d.selectable":false,
//公告板开启缓存
"shape3d.image.cache":true
})
如果贴图是矢量，对于开启了缓存的公告板，性能上会大大提高。对比一下这个例子，你会发现缓存机制上性能的差异性。由此看出，缓存机制对于整体场景的流畅度是至关重要的，对于一些不必要实时刷新的面板信息，我们可以采取缓存的方式，并且在下一次更新的时候调用Graph3dView.invalidateShape3dCachedImage(node)来手动刷新这个节点，从而大大提高了场景的性能：
g3d.invalidateShape3dCachedImage(billboard);
