机房里有很多物理的或逻辑的链路信息，例如网线、光纤，一些业务上的连接关系等。这些管线要显示在机房中，就需要对管线进行建模、存储、显示。显示的部分，我这里做了简单的空间自动路径，寻找最合适的路线走向，并将A端和Z端设备之外的物体虚化，可以把管线显示的更清晰：

对于跨楼层的链路，也可以清晰的呈现：

根据客户要求，会议室场景也应该建模。经过同事现场拍照考察，会议室结构并不复杂，于是依旧让美工妹妹操刀，很快做完了会议室模型：

当然，这里面的场景并不是固定不变的，例如双击投影仪可以让他在投影幕布上播放视频；双击门可以打开，等等。这是因为我们对这里面的模型进行了分拆、动作定义。

例如下面墙上的电视屏幕，双击可以显示机房的统计信息图。

继续双击屏幕上的统计图，可以把2D的统计图程序界面直接显示出来，进行交互。

这也是使用HTML5的2D和3D技术的混合优势。

客户要求机房所在的园区也要加到场景中，想一想也合理。项目大了后，机房会分布在好几个楼宇的不同楼层，要查看必须有一个3D全景场景进去才方便。这个难度倒是不大，找美工妹子帮忙。妹子比开发商还快，用了几个小时，一个全新楼盘便在3D Max中诞生了。转obj，导入系统，急忙打开浏览器看效果：

这里的一个经验是，如果要做到双击大楼能够进去，就要把大楼拆成单独的模型进行加载、监听事件。

问题又来了。客户说北京上海全国各地有多处机房，需要统一显示和管理。看来园区已经不够用了，需要一个全国地图。如果过几天客户说美国还有一个机房怎么办？干脆直接整个地球显示吧，一步到位。等客户要求火星有机房的时候再说吧。

弄一个地球用3D太简单方便了，贴图加光晕，分分钟出来：

接下来把中国的区域高亮出来，突出我国的地位。这个做法是准备一个透明的中国地图轮廓，如下图：

然后把地图作为贴图叠加在地球上，调整位置：

接下来做几个数据中心的节点。用一个小小的球就可以吧！

为了防止看上去枯燥，把数据中心的连线用流动动画显示，每个数据中心用一个发光的图片动画做成旋转发光效果，看上去就生动多了。

当然我们项目里最后做成的效果是这样的：

有没有瞬间高大上的感觉？这还不算完，另外一个同事把我的代码拿过去，又增加了一些乱七八糟的效果，变成了这样：

主要是增加了一些地理位置的热点，环绕地球的卫星，以及一些弹道导弹的攻击动画效果。据说某国防单位需要这样的显示方法，具体咱就不了解啦，总之有点科幻感了。

说道弹道攻击效果，想起项目中另外一个网络攻击的显示界面，也很有意思，虽然是2D的，但是也有不错的动画效果：

这里面的爆炸效果、弹道效果，都用了HTML5的canvas里面2D的一些API绘制，例如模糊、渐变等。综合利用2D+3D来呈现网络攻击，还是非常直观的。还可以把网络攻击的应对流程通过3D化的泳道图显示出来进行分析：

至此，一个“从地球到设备端口”的多层次、大型综合3D机房系统就构建成了。怎么样，HTML5的3D技术不是“小玩具”吧？只要认真打造，完全可以支撑各种大型行业应用了。咱们程序猿也不要徘徊等待了，抓紧学习HTML5的2D、3D技术吧！

最后老规矩，觉得图片不过瘾，需要一睹3D机房真容的同学，可以发邮件到tw-service@servasoft.com，索取程序代码，依然真诚欢迎大家各抒已见，共同进步~

posted @