工业互联网可视化系统风格的选择：3D数据中心机房线框模式管理的实现。在构建可视化系统的选择上，呈现出的风格和效果多种多样，各自强调的适用场合也各不相同。对于科技风格的体现，线框模式可能是最具代表性的实现方式之一。针对机房数据可视化管控维护的实施，在工业互联网的驱动下，所体现的维护数据和系统建设越来越多样化，而海拓的HTforWeb产品（以下简称HT）)拥有丰富的配置本文将介绍如何使用HT丰富的2/3D配置搭建线框建筑可视化机房解决方案。界面介绍及效果预览主页面的呈现是基于线框技术风格的建筑设计。大楼四周环绕着数位飞扬的光束。各设备的显示处理和设备的预警处理，主办公楼一侧并排呈现楼层分布——办公楼层场景和机房楼层场景；内场景切换到机房场景，显示机房设备组的排列，单击选中的机柜会将视角变换到该设备上，并将周围的设备模糊显示点击的机柜信息，同时一键切换查看机柜利用率信息；另一个内部场景办公室作为日常办公应用场景的展示，可以添加维护信息数据进行管理。系统分析概述在工业互联网的驱动下，机房可视化系统的发展是极其重要的一环。3D可视化作为一个具有多种视觉模拟体验的交互式机房管理平台，具有机房资产、能源、环境等管理功能，可以对机房的各个方面进行集中监控和管理。这是机房内部数据监控的重要组成部分。在整体风格建设上，外部建筑和设备采用了科技风格的线框模式，在效果展示上可以更炫酷，在交互体验上也能增值。加分。1.线框模式的技术风格是建立在同场景建筑建模上，大部分是建立在真实场景上。感觉有别于科技风格数字显示的震撼和酷感。线框模式非常好。说明了这种风格。2、3D可视化数据中心机房监控管理系统建设与应用3D可视化数据中心机房集中监控管理系统实现机房远程集中监控管理，实时动态呈现设备告警信息和设备参数，快速定位故障设备，使维护管理由人工被动守卫转变为计算机集中控制管理。代码实现1.线框风格科技场景在3D场景风格中，有多种实现方式可供选择，而线框风格是最能体现科技感的实现方式。场景建筑和设备主体以线框形式展示，数据中心上的设备也会相应展示，处理预警事件。线框模式是对模型建模obj的特殊处理。该机制封装在HT中。当我们开启线框模式时，我们可以选择一些建模风格的限制，比如模型obj的四面或者三面，都会影响到线框中线的绘制方式。这里合并三边面，开启四边形，实现线框样式的简洁表达：//控制是否加载obj的四边形面然后通过算法ht.Style['wf.loadQuadWireframe']=false;//控制是否显示四边形ht.Style['wf.combineTriangle']=true;风格基调确定后，在建筑主体场景中还需要做一些简单的事件机制处理，比如模型选择状态的表现、设备警告信息弹窗的显示等。模型状态的体现是开启模型选中框的高亮：//选中模型高亮线框的宽度为1g3d.getHighlightHelper().mode=1;选中模型并高亮显示后，我们可以清楚的看到反映了被点击的模型，结合点击事件的处理和设备信息弹窗的展示，在交互体验上会有非常友好的效果展示。对于设备信息的弹窗显示，首先将设备绑定一个标签，然后使用这个唯一标签在数据模型dataModel中找到设备，然后弹出相应的弹窗信息或警告事件。//根据唯一标识标签从数据模型中获取节点信息this.equipmentPanel=g3dDm.getDataByTag('equipmentPanel');this.alarmEquipmentPanel=g3dDm.getDataByTag('alarmEquipmentPanel');this.buildingPanel=g3dDm.getDataByTag('buildingPanel');handleInteractive(e){//获取事件类型kind和事件处理节点数据const{kind,data}=e;if(kind==='clickData'){lettag=data.getTag();如果（！标签）返回；if(tag==='equipment'){//获取被点击设备的位置信息varp3d=data.getPosition3d();//设置设备位置信息的空间坐标对应的Y轴增加20高度p3d[1]=p3d[1]+20;//获取设备面板varpanel=this.equipmentPanel;//显示设备面板panel.s('3d.visible',true);//设置设备面板坐标panel.setPosition3d(p3d);//隐藏建筑面板和报警面板this.buildingPanel.s('3d.visible',false);this.alarmPlane.s('3d.visible',false);}if(tag==='alarmEquipment'){//获取被点击设备va的位置信息rp3d=data.getPosition3d();//设置设备位置信息上空间坐标Y轴对应的高度增加20p3d[1]=p3d[1]+20;//获取报警面板varpanel=this.alarmEquipmentPanel;//警告面板的显示panel.s('3d.visible',true);//设置警告面板的坐标panel.setPosition3d(p3d);//隐藏建筑面板和设备面板this.buildingPanel.s('3d.visible',false);this.equipmentPanel.s('3d.visible',false);}if(tag==='building'){//显示建筑面板this.equipmentPanel.s('3d.visible',true);//隐藏设备面板this.alarmEquipmentPanel.s('3d.visible',false);//隐藏报警面板this.buildingPanel.s('3d.visible',false);}}//点击背景隐藏所有面板信息if(kind==='clickBackground'){this.equipmentPanel.s('3d.visible',false);this.alarmEquipmentPanel.s('3d.visible',false);this.buildingPanel.s('3d.visible',false);}}二、3D动画效果的实现3D场景中有很多动画集合，可以通过通过简单清晰地反映场景中一些需要的元素，如交通班车、数字飞翔、停车场等效果，可以为静态场景增添活力。通过标识获取对应的编号、流量和光束节点，然后使用简单封装的动画函数驱动实现以上效果状态：//遍历数据模型获取你要找的标识节点，并做对应动画g3dDm.each((data)=>{//获取节点标识lettag=data.getTag();if(tag==='num'){//数字提升动画animNum(data);}elseif(tag==='car'){//设置车辆节点的初始uv偏移data.s('top.uv.offset',[1,0]);//车辆穿梭动画animCar(data);}elseif(tag==='light'){//灯柱飞升动画animLight(data);}});所有动画效果的实现都是基于ht.Default.startAnim()封装的动画函数HT，它支持基于帧和基于时间的动画。本可视化系统采用后一种实现方式，通过动画时间的duration控制和easing，让用户自定义，通过数学公式控制动画，如匀速变化、先慢后快等。动画功能的实现，封装了三个函数，分别对各个显示节点的性能进行相应的处理。数字升天动画效果封装函数为：functionanimNum(data){//设置节点大小随机数处理范围vartemp3=16-8*(Math.random());//设置动画运行时间范围为随机数处理vartemp4=1200+Math.random()*2000;//设置节点在空间坐标Y轴上的范围随机高度vartemp5=400+Math.random()*200;//开启动画功能ht.Default.startAnim({duration:temp4,easing:function(t){returnt*t},action:function(v,t){//获取节点的位置坐标信息varp3d=data.getPosition3d();//设置节点新的位置坐标信息data.setPosition3d(p3d[0],temp5-temp5*v,p3d[2]);//设置节点数据的大小信息.setSize3d(temp3,temp3,temp3);},//动画函数结束后，继续回调动画函数finishFunc:function(){animNum(data);}});}车辆穿梭车封装函数动画效果为：functionanimCar(data){//启动动画functionht.Default.startAnim({duration:5000,easing:function(t){returnt},action:function(v,t){//判断节点的顶部纹理是否为所需的对应信息纹理if(data.s('top.image')==='symbols/htdesign/fill/flyinglightgradient2.png'){//获取uv节点Offset信息varoffsetX=data.s('top.uv.offset')[0];//给节点设置新的偏移值offsetX=(offsetX-0.01)%1;data.s('top.uv.offset',[offsetX,0]);}},//继续回调这个动画函数finishFunc:function(){animCar(data);}});提升的效果是一样的。它是通过在一个随机的位置坐标范围内设置不同的时间差来随机生成的，形成与数字上升相反的光束下降效果。融合了线框架构的科技风格，很好的诠释了整体风格的展示，光柱动画在此不再赘述。相应的，停车场乱停的效果展示也不同于上面的动画视觉展示，它还是有自己的效果意义的。可与真实数据对接，对整个停车场的车辆投放情况进行可视化数据维护和管理。我们这里的实现很好的模拟了这个事件的处理，也用了一个简单的封装函数来体现停车场的动画效果：functionanimPark(data){//设置一个随机值来体现车辆停车信息的随机性vartemp=Math.random();//根据随机值判断车辆状态if(temp<0.15){data.s('all.color','rgb(255,184,77)');}elseif(temp>0.6){data.s('all.color','rgba(0,153,255,0.10)');}ht.Default.startAnim({duration:2000,easing:function(t){returnt},action:function(v,t){},//动画函数结束后，继续回调这个动画函数finishFunc:function(){animPark(data);}});}三、机房实现点击机柜移动并锁定视角显示机柜内部信息，模糊显示周边设备状态.双击背景返回初始视角，恢复默认状态；其次，通过按钮触发展示柜使用色块的显示，可以轻松显示。全面观察各机柜内部消耗信息，方便整体机房维护管理。在机柜点击事件的处理中，首先将机房柜体整体透明化，降低透明度，达到整体虚化的效果，然后通过点击事件的处理，获取节点信息，应用打包开门此时的动画功能，开门模糊柜体外壳后，会显示展示柜内部设备信息；双击背景会恢复之前的效果处理操作，视角会切换到默认的机房视角。监听点击事件后，将HT封装的视角传递函数flyTo()锁定到对应的柜子：direction：默认undefined，眼睛朝向目标方向（相对于目标，受目标自身影响rotation），例如目标前方斜向的[0,1,5]；animation：默认false，是否使用动画，可设置为true或false或animation动画对象；ratio：默认0.8，浮点型，表示动态计算眼睛到中心的距离（例如0.8表示眼睛动态计算上述方向的距离，使目标边界框的8个角全部拟合在80以内屏幕的百分比）；g3d.flyTo(数据,{方向:[0,10,10],动画:true,比率:0.9,});对于门的开启动画，首先将对应的柜子设置为门的父节点，监听并处理点击事件后，根据多次点击节点，调用对应的门节点和旋转角度信息调用门封装动画函数：//传入节点和旋转角度信息exportfunctionanimDoor(data,x){//启动动画函数ht.Default.startAnim({duration:1200,easing:function(t){returnt},//动画执行函数，根据传入的角度信息做旋转角度的动画动作：function(v,t){data.setRotation3d(0,-v*x,0);},finishFunc:function(){//设置门的父节点柜的不透明度为0.1data.getParent().s('shape3d.opacity',0.1);//遍历门的父节点柜并设置透明度为0.1data.getParent().eachChild(function(data){data.s('shape3d.opacity',0.1);})}});}对于双击背景视角返回处理，是HT封装的相机移动函数moveCamera()，根据视角中心开启动画函数即可实现（中心）和要到达的眼睛（眼睛）。视角切换的过渡效果：eye：相机位置坐标；center：中心点位置坐标；anim：默认false，是否使用动画，可设置为true或false或animation动画对象；g3d.moveCamera([1294,898,1671],[0,0,0],真);机柜占用的能耗和处理能力可以通过机柜的使用率反映出来，不仅可以直观地反映每个机柜的使用情况，还可以通过使用反馈实时地对一些负载进行智能调整机柜或利用率低的机柜，使机柜组达到最大效率的工作状态。大小节点随机选取，约定能耗颜色显示，反映机柜当前利用率信息。loadCapacityNode(g3dDm,cabinetList){cabinetList.forEach((data)=>{//创建一个新的利用容量节点varnode=newht.Node();//生成一个随机数varrandomNumber=Math.random()*100;//使用随机值来反映对应柜子利用率的颜色变化varcolor;if(randomNumber<=30){color='rgb(51,153,255)';}elseif(randomNumber>30&&randomNumber<60){color='rgb(240,225,19)';}else{color='rgb(242,83,75)';}//设置利用能力节点的位置信息node.p3(data.p3()));//设置利用能力节点的锚点信息node.setAnchor3d(data.getAnchor3d());//设置利用能力节点的高度信息node.s3(data.getWidth(),data.getTall()*(randomNumber/100),data.getHeight());//设置利用能力节点的一些基本属性node.s({'3d.visible':false,'3d.movable':false,'all.color':颜色,'wf.visible':true,'wf.color':'rgb(247,247,247)'});//将容量节点设置为柜子，方便遍历柜子节点，返回房间视角时隐藏。g3dDm.add（节点）；这个.capacityList.push（节点）；})}总结线框样式只是技术样式效果展示Form中的一种，HT通过多年的行业积累，总结出很多样式和基调设置以及相应的行业应用场合，加上自身丰富的配置和快速搭建，如下工业互联网的浪潮，可以推动很多行业解决方案在互联网上的实现，比如数字孪生的衍生、新基建的可视化系统等，涉及的行业非常广泛。在多种行业领域，相信HT一定会带你发现不一样的工业互联网！2019年我们还更新了数百个工业互联网2D/3D可视化案例集，在这里你可以找到很多新奇的例子，探索很多有趣的效果实现和工业互联网演示：https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA同时还可以查看更多案例及效果：https://www.hightopo.com/demos/index.html
