无插件纯web 3D机房 （第四季：大型园区、地球仪效果和其他扩展应用）

前言

初次见面的朋友们大家好，这篇文章是“无插件纯web 3D机房”系列的第四季，感兴趣的朋友可从头开始观看，以下是正确的阅读顺序：

无插件纯web 3D机房（第一季：从零开始搭建Web 3D机房）
无插件纯web 3D机房（第二季：机柜和设备）
无插件纯web 3D机房（第三季：资产管理和动环监控）

答一些读者问

阔别了半年多，哥其实没闲着，在憋大招来着。期间陆续收到朋友的留言和来信，提了不少特别棒的意见和想法，项目也有了很大的进展，在接下来的文章里，哥会无私和大家分享。

不扯了，进入正题。首先，想说一个最近一直在和大家探讨的问题：HTML5好还是插件好？

无论是在学习还是在做项目的一些朋友都提到了这个问题。尽管web3d技术风起云涌，大体还是分为两大流派：插件派和HTML5派。插件派的技术路线是，在浏览器中安装一个企业自己做的插件，然后在这个插件上提供3D的开发能力。典型代表例如Flash插件、Unity3D插件（简称U3D）。另外一派就是无插件的HTML5路线，它使用H5的WEBGL标准和Canvas技术来实现浏览器中的3D/2D技术，而无需安装插件。

插件的好处是可以适配各种老型号的浏览器（例如老版本的IE），效率应该也会好一点。缺点是，需要安装插件，跨手机平板也麻烦，语言上要使用插件要求的语言。HTML5的好处是不安装插件，效率也很不错，语言简单统一，都是javascript，而且是目前最火的技术方向。

本人相信 “插件必死”的发展趋势。要是不服，就看看Flash，和那些被坑在Flex技术上现在还爬不出来眼看着别人学HTML5拿高薪恨得吐血的程序猿们吧。谁又能保证Unity3D不会有一天变成另外一个Flash呢？看看现在日新月异每天大量涌现的HTML5技术和应用，我们有时间争论插件好还是H5好这样的无聊问题，还不如实实在在地干起来。达成共识后，我们来开始看此次的一大波更新。

鹰眼

上次的小机房功能已经基本完成了，客户对演示效果也非常满意。由于客户使用过我们之前做的2D系统，看到过鹰眼功能（也就是缩略图），所以这次毫不犹豫也要求3D机房监控界面增加鹰眼功能。这个把哥难了一阵子。

为了寻找思路，哥首先打开了我们之前做过的2D的拓扑图，寻找灵感。鹰眼看上去是这样子的：

上面的界面是同事给客户做的虚拟机开通、配置的编辑界面，右下角的这块试图就是鹰眼缩略图。咨询同事，他说鹰眼在2D实现的时候，可以考虑把2D大图做一个内存缩略图更新到鹰眼视图，或在大图发生任何属性变化时候进行监听，然后动态生成缩略图更新鹰眼视图。不过在3D里面会有所不同：弄一个小尺寸的webgl的canvas实时刷新，应该负载也不大。所以决定再new一个network放在右下角试试：

var overview = new mono.Overview3D(network); overview.adjustBounds(200,200); var rootView = overview.getRootView(); network3d.getRootView().appendChild(rootView);

同时，还要把镜头固定到头顶上方垂直向下看，并去掉鼠标的交互机制。经过一番折腾，终于把一个鹰眼画布放在大的场景画布的右下方，看看效果：

设备编辑器

这次项目中据说有200多种不同的设备，每个设备面板都不一样，要给每一个设备建模，这不是纯体力活吗？就算丢给美工组做，也得耗费好多个人天呢，而且模型的复用性也不高。考虑再三，项目组紧急开发了设备面板的编辑器，很好地解决了这个问题。我试了一下，以做一个标准的机架设备为例，还是很快的：

编辑器里面把常见的端口和面板都做好了，拖拖拽拽、对齐吸附，放上logo，很快一个像模像样的交换机就出来了，真是个良心产品！点击按钮导出json，可以直接在项目里面用了。当然，我这边的用法是把设备继续往机柜上放。机架编辑器是我这里开发的，效果差不多，可以直接把设计好的设备拖放到机柜的位置上：

接下来，再把机柜往房间里面拖，房间的形状也要编辑的：

直接点击3D按钮可以预览一下：

对了，这里要注意的是一排机柜一般都会配置一个列头柜，专门控制电路等信息的，双击它会弹出一个电路配置界面：

据说这个界面也有编辑器可以直接拖拽生成，这样就更方便了。

更多场景

其实对于机柜场景的编辑，模型稍作变化，就可以应付其他行业的应用。

3D仓库

例如把机柜变成货架，把服务器变成货物，简单拖拽，会是什么场景呢？可以想象一下。

3D工厂

继续想象，如果把机柜变成生产加工车间的机床，简单拖拽、添加告警信息，又是怎么样一番景象呢？

3D变电站

再比如，把场景里面的模型换为变电站里面的变压器、楼房、龙门架等，加上告警和交互，不就是一个户外变电站监控的应用吗？

3D加油站

如果把模型换为加油站，就是一个加油站SCADA和监控的应用：

3D工控应用

当然如果跟硬件连上，就可以做工业上各种检测和控制了：

当然自动控制应用需要数据采集存储转发云平台组态系统等内容，等以后有机会单独写一篇和大家探讨。

管线