前言在互联网高速发展的今天，人们的交流不再局限于面对面，视频通话可以拉近彼此的距离在工业控制方面，不仅限于实时视频流的监控。HTML本身就有强大的web组件供我们实现一些有趣的例子，甚至可以添加一些简单有趣的动画和实时数据对接。效果高了不止一个层次。再加上由工业4.0衍生出的新一代工业互联网已经推出多时，5G新时代才刚刚问世，数据可视化与网络带宽发展的碰撞激发了开发一代3D数据可视化监管。Hightopo（以下简称HT）HTforWeb产品上的Web配置提供了丰富的2D配置和3D配置效果，可以根据需求快速实现一个完整的数据可视化系统。本文将通过一个HT3D组态实现的可视化分布式能源站系统，带你走进丰富组态的大门。界面介绍及效果预览在场景搭建方面，我们以热电冷联产为主的多联产系统分布式能源站系统进行展示。按照管道流量输送的工艺步骤，有效实现能源梯级利用示范效应：规范实施在能源站建设中，分布式能源站是指利用热能的小型、清洁、环保的发电设施、电、冷为主要形式，分布在负荷附近。它是一种相对可靠和高效的发电形式。3D场景的实现是通过创建ht.graph3d.Graph3dView来呈现3D内容，3D视图组件执行deserialize()反序列化对应的json来呈现3D场景内容，然后将3D组件添加到body中实现场景加载渲染效果。还可以自定义修改一些交互或者视角的限制，比如修改左右键的交互方式或者设置场景的最大仰角等，可以让用户的交互体验更加流畅。//创建3D拓扑视图this.g3d=newht.graph3d.Graph3dView();this.g3dDm=this.g3d.dm();//给body添加3D组件this.g3d.addToDOM();//修改左右键交互letmapInteractor=newht.graph3d.MapInteractor(this.g3d);this.g3d.setInteractors([mapInteractor]);//修改最大仰角为PI/2mapInteractor.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)=>{//通过数据模型获取唯一标识标签，获取管道节点设置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设置一些属性值来控制billboard的属性信息：letbillboard=newht.Node();billboard.s({//设置shpe3d的类型为bulletinboardbillboard"shape3d":"billboard",//设置广告牌图片"shape3d.image":"symbols/htdesign/box/panel.json",//设置广告牌始终自动旋转面向屏幕"shape3d.autorotate":true,//将公告板设置为透明"shape3d.transparent":true,//将公告板设置为不可移动"3d.movable":false,//将公告板设置为始终beontop"shape3d.alwaysOnTop":true,//设置公告板不可选"3d.selectable":false,//公告板启用缓存"shape3d.image.cache":true});如果纹理是矢量，启用缓存的公告板性能将得到很大提高。对比这个例子，你会发现缓存机制在性能上的差异。由此可见，缓存机制对于整体场景的流畅度至关重要。对于一些不需要实时刷新的面板信息，我们可以采取缓存的方式，在下次更新时调用Graph3dView.invalidateShape3dCachedImage(node)手动刷新这个节点，这样可以大大提高场景的性能：g3d.invalidateShape3dCachedImage（广告牌）；继2018年工业互联网元年和2019年5G元年之后，不仅是分布式能源站可视化系统的呈现，工业互联网在治理上也将迎来新纪元。为了给精彩的HTML网页配置增添绚丽的色彩，HT在2D配置和3D配置上不断完善，可以通过2/3D融合场景和绘图构建有趣的可视化系统。作为一个可以在3D组态中展现各种效果的可视化系统场景，传统的一些数据可视化过程也可以通过2D组态来实现：2019年，我们还更新了数百个工业互联网2D/3D可视化案例合集，您可以在这里发现很多新奇的例子，发现不一样的工业互联网：https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA同时，您还可以查看更多案例和效果：https://www.hightopo.com/demos/index.html
