HTML5技术

无插件纯Web HTML5 3D机房 终结篇(新增资产管理、动环监控等内容) - twaver(2)

字号+ 作者:H5之家 来源:博客园 2015-10-27 11:47 我要评论( )

上图在机柜旁边纵向虚拟切片,并对这一切面上进行温度采集、渲染。可以观察出温度随着气流、空间的变化而产生的变化,从而知道整个空间的热点分布。可以根据需要增加更多切片,不过过多切片也会相互遮盖,影响视觉

上图在机柜旁边纵向虚拟切片,并对这一切面上进行温度采集、渲染。可以观察出温度随着气流、空间的变化而产生的变化,从而知道整个空间的热点分布。可以根据需要增加更多切片,不过过多切片也会相互遮盖,影响视觉效果。

生成温度场的代码如下。需要传入机架和机架上的温度采集点信息:

createSideTemperatureImage: function(rack, count){ var width=2; var height=rack.getHeight(); var step=height/count; var board = new TemperatureBoard(width,height,'v', height/count); for(var i=0;i<count;i++){ var value=0.3+Math.random()*0.2; if(value<4){ value=Math.random()*0.9; } board.addPoint(width/2,step*i,value); }; return board.getImage(); }

以上温度值是随机产生,项目中可接入实际数值。

空调风向

机房中的空调冷风流向也是一个需要监控的业务。一般冷风从地板下方吹出、穿过机柜从上方流走。如果有通道的情况,冷风的冷却效效率会更好。下图展示了冷风是如何流动的。其中箭头会用流动的动画效果展示。

这里写图片描述

通过颜色的变化可以看到空气随着流动的变化而产生的温度变化。(下面是一张动图,好像要戳开才会动)

这里写图片描述

要做这一效果,先创建一个曲面的对象,然后在上面添加箭头的贴图。然后启用一个动画,来控制贴图的位移,就可以实现动画流动的效果了:

toggleAirView: function(network){ network.airView=!network.airView; if(!network.getDataBox().airPlanes){ network.getDataBox().airPlanes=demo.createAirPlanes(); } for(var i=0;i<network.getDataBox().airPlanes.length;i++){ var plane=network.getDataBox().airPlanes[i]; if(network.airView){ network.getDataBox().add(plane); plane.airAnimation.play(); }else{ network.getDataBox().remove(plane); plane.airAnimation.stop(); } } } 烟雾监控

现在的建筑中一般都有烟雾监控传感器,当有烟雾发生时会发生报警。下图模拟了当发生烟雾的情况,我们在着火点用一团烟雾来渲染,增加场景的逼真度。同时通过动画,来模拟烟雾的冒出情况。

这里写图片描述

同时把场景中的灭火器的位置高亮并用箭头动画示意,提示灭火器材位置,及时施救。

这里写图片描述

然而,这个功能可能并没什么卵用。一旦机房失火,产生的后果将是灾难性的,不是几个灭火器能够解决的。最好还是做好防灾预案和日常维护。

漏水监控

机房除了怕火,再就是怕水。机房漏水产生的后果恐怕不必火灾更小。水会直接导致设备和损坏,应该大力防范。水的产生一般来自管道或设备的漏水,可以通过地板铺设漏水绳进行监控。下图展示了当机房中铺设多条漏水绳并发生漏水的情况:

这里写图片描述

漏水点可以通过漏水绳精确检测,我们在3d场景中进行精确定位和显示,并通过一个标签指示其位置。为了观察的更清晰,这里动态虚化了机柜和房间等物体,能一目了然看清漏水绳的走向和分布。

这里写图片描述

防盗监测

机房会严格限制人员的进入。对于敏感区域,可以放置防盗红外或激光探头,当有人员通过,会立刻发起警报,起到防止进入和防盗的效果。这种激光防盗在各种电影大片中已经屡见不鲜了:

这里写图片描述

似乎密室逃脱、拓展训练等游戏里面都有了,急速前进里筷子兄弟过激光阵可把我看得愁死了,下次公司组织活动的时候可以搞一把:

这里写图片描述

回到机房,不是拍电影的话一般不用布成天罗地网,比较规整的线就可以了:

这里写图片描述

里面的射线可以通过line对象创建,设置颜色、透明度、反光度等即可。貌似这个机房要想进去偷点东西还挺有难度的吧。

这里写图片描述

电源走线

沿着这个思路,利用line对象,可以创建更多连线管理。例如电源的布线走线显示。每一个机柜的供电线布局走线,可以通过不同的颜色和走向进行显示。这样会比传统的表格或2d图形显示更加直观。

这里写图片描述

安防监控

安防监控,最传统的做法是视频监控,在机房的各个位置放上摄像头,然后集中对画面进行监控。

这里写图片描述

视频监控

在我们的3D机房中,则可以通过json进行配置显示摄像头的位置,摄像头可以根据不同类型进行提前建模,根据json配置进行动态加载。:

这里写图片描述

双击摄像头,可以连接摄像头调出实时监控视频画面。这里放了一个假视频代替了。

这里写图片描述

门禁监控

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    2017-05-02 11:02

  • HTML5 进阶系列:indexedDB 数据库 - _林鑫

    HTML5 进阶系列:indexedDB 数据库 - _林鑫

    2017-04-27 14:02

  • HTML5 高级系列:web Storage - _林鑫

    HTML5 高级系列:web Storage - _林鑫

    2017-04-27 14:01

  • HTML5和CSS3 - 奔跑在起跑线佼佼者

    HTML5和CSS3 - 奔跑在起跑线佼佼者

    2017-04-20 13:00

网友点评