本以为这次机房理财项目告一段落，可以休息一下，但哥哥还是很天真。 我们伟大的甲方还将获得二期项目，发誓最大限度地发挥哥哥的才能。 国庆长假也没好好休息几天，硬发demo，容量管理、电源走线、告警巡航这些实用功能，以及温湿度、风向、门禁、视频监控效果哥让大家看看成果，收膝盖，找存在感。
对了，我第一次来看哥哥的童鞋。 这里有前两个链接：
如何从零开始构建基于季节HTML5和WebGL的3D房间场景
第二季：丰富的场景和功能，包括机柜、设备、布线和路线规划等功能
甲虐思路还很清晰，第一期侧重三维表达和静态资产管理，第二期侧重环境监测，从而基本形成了比较完整的数据中心监测系统。 闲话不多说，这样就介绍给大家了。
界面美化这次首先做了界面的美化工作，最近和设计师mm合作得很好，还是界面的等级也提高了。
右击菜单的调整随着demo中堆积功能的增加，右击按钮也变得不够了。 另外，也有朋友说右击菜单有点隐藏，很难找到。 我把所有的功能效果改为从工具栏按钮输入，就这样把纵向显示放在左侧，效果很好：
动态客户信息上次在机柜顶部显示资产代码的方式得到了客户的肯定，这次又尝试在机柜组的地板上动态生成客户信息。 这就是3D的好处啊。 哪里有空就贴？
其他装饰性的细节，上次在手边找的CCTV播音员的电视画面被尽情吐槽了。 大家似乎还在认真研究问题。 所以这次也把电视画面换成了统计图表。 另外，特别添加了适合dsddh的海报。 要称赞哥哥吗？
理财功能以上是一些界面上的小改动，以下列举一些硬菜。
当服务器一个接一个地陈列时，机架可用空间会占用和分离机柜空间。 及时掌握整个机房各机架的占用情况和可用空间大小是一项非常重要的日常工作。 非常适合用3d表现。 用白色块填充服务器占用的空间，根据大小用不同的色块填充可用空间，具有以下效果。
图的颜色不仅仅是为了美观，上面1-2U的空间是红色的，5U以下是紫色的，根据颜色的不同表示连续剩下的空间数量，白色表示已经占用的空间。 由此，对于机械室管理者来说，能够迅速掌握机械室整体的占有状况。 在机房陈列5U设备时，我们一眼就能看到哪里有紫色色块，就能快速决定在哪里陈列。
实现这个很容易，但我会简单地说明想法。 切换空间视图后，首先隐藏原始机柜，然后根据空间和设备情况在同一位置创建并排列多个不同的立方体。 立方体的颜色根据立方体的高度进行调整。 为了提高视觉效果，请注意不要让立方体粘在一起，可以留出一点间隙来提高立体感； 在空的方块上设置一定的透明度，与乳白色的占用空间形成一定的差异； 设定一定的反射率，提高补丁的质感。 下图：
机柜利用率项目必须显示机柜空间的总体利用率。 使用率不需要具体表示哪里占用哪里空着，只要表示整体的使用比例就可以了，比较简单。 首先用线框显示橱柜的位置，然后显示高度符合使用比例的立方体即可。 就像柱状图一样。 设置颜色、光线等属性，使其看起来更真实。
从纯粹的3d“视频”中出来的柱状图，也能结合实际的数据，是很棒的应用。 GIF很少录制。 想看HD大视频的人，直接看源程序吧。
在警告巡航的前一篇中，介绍了设备警告的使用方法，这里还增加了警告巡航的功能。 也就是说，警告巡航的作用是在发出警告后，自动将镜头推到故障点，显示故障信息。 下图显示了报警后，摄像头会自动漫游，查找机房门，进入其中，推到故障机柜中，打开柜门，拉出故障设备、板卡，并显示故障的详细信息
动力环境监测动力环境监测的对象主要是机房动力和环境设备等设备，如配电、UPS、空调、温湿度、漏水、门禁、喜悦老师、消防、防雷等，它们通常有独立的采集和监测系统。 我需要做的是用3D表现出活动环的效果，并与系统的实际数据进行对接。
温度监测温度监测是机房动力环境监测的重要内容。 机房内大量设备的运行会产生大量热量，需要及时监测温度热点，避免温度过高导致设备故障。 在我们的项目中，每个机柜都有一个温度收集器，每个机柜纵向也有多个温度传感器，可以通过后台界面进行收集。 有了这些数据，就可以表达温度。 一般的传统方法是显示温度的数字，这不太直观。 新潮时的玩耍是显示温度云图。 也就是说，根据温度采样点动态生成渐变的温度场云图，并将其粘贴到地板上，可以更直观地观察空间中温度的变化。
温度云图模拟了热衰减的过程，在地板上留下了痕迹。 同样，垂直设备也在机架上贴有不同温度值的色差温度图，让您一眼就能看到整个机柜的热点在哪里，从而快速发现故障并调整空调气流。
在没有机柜的地方，可以通过添加垂直空间片来查看温度云图。
上图为机柜旁边的垂直虚拟切片，对所有这些面进行了温度采集和渲染。 可以观察温度随气流、空间变化的变化，了解整个空间的热点分布。 如果需要，还可以增加切片，但过多的切片会相互遮罩，从而影响视觉效果。
生成温度场的代码如下。需要传入机架和机架上的温度采集点信息：
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配置进行动态加载。：
双击摄像头，可以连接摄像头调出实时监控视频画面。这里放了一个假视频代替了。
喜悦的老师的另一个重要部分就是门禁系统，通常门禁设备的厂家会自带管理系统，我们只需要把系统数据接进平台即可。在3D呈现上，我们可以把门禁的位置展示出来：
双击门禁控制器后，显示人员的进出信息：
很多拿到程序的朋友留言问如何能够直接在界面上拖拽移动机柜何设备。通过api移动物体并不复杂，object.setPosition(x,y,z)就行了。不过在界面上如果在3d中直接通过鼠标拖拽就要考虑如何操作方便。点击这个按钮，可以切换到编辑模式，此时可以直接在界面上移动机柜位置。
编辑模式下，鼠标点击可以选中一个机柜。同时机柜会出现3个扇形和3个箭头。点中任意扇形拖拽，可以在所在的平面上平移；点击任意箭头拖拽，可以在这个轴向上平移。同时为了能看清坐标数值，在鼠标的tip中显示了当前x、y、z的数值，以及旋转、缩放比例的数值。如下图：
当然在这里，机柜只能允许在水平面平移，纵向平移没有什么实际意义，这都可以通过代码进行控制。下面的代码可以控制是否允许拖拽、是否允许缩放、旋转等操作：
var editInteraction = new mono.EditInteraction(network); editInteraction.setShowHelpers(true); editInteraction.setScaleable(false); editInteraction.setRotateable(false); editInteraction.setTranslateable(true);这样，我们就可以很任性的对机房进行自定义布局了，很多家装设计的工具也是这样的原理。
其他以上是这次大更新的主要内容，根据项目的需求，程序还做了其他很多小改进，具体大家可以自己看看。包括连线显示实时流量信息（如下图：）
动画显示机柜设备的加载过程：
更多细节改进就不再赘述，感兴趣的同学可以留言或发邮件到tw-service@servasoft.com，欢迎一起探讨！如果大家想看到什么更多的效果也可以给我留言。时间有限，很多细节没办法写的很详细，请大家包涵。