到这里突然在想：盖房子如果像写程序一样简单就好了，所有的程序猿就不会是无房一族单身狗了。当然写程序和盖房子一样：该封装好的要封装好，最后就是搭积木组装就行了。如果盖房子都是从挖土活泥巴开始，那就杯具了。写程序也是一样，如果从webGL的main开始写……这3D机房的系统要几个月甚至几年才能做出来呢？

外侧墙

按照项目实际要求，继续增加更多建筑物墙体。主要是房间外侧有两道走廊隔墙。这是一个中间有大片透明玻璃的走廊隔墙，需要做的好看一点。由于是直线墙，没有复杂走向，直接用立方体定义：

{ name: '左外墙', type: 'cube', width: 20, height: 200, depth: 1300, translate: [-790, 0, 0], op: '+', }

效果如下：

再继续挖掉中间的窗户部分：

{ name: '左外墙洞', type: 'cube', width: 30, height: 110, depth: 1300, translate: [-790, 60, 0], op: '-', }

空白显得很奇怪，加上玻璃试试：

{ name: '左外墙玻璃', type: 'cube', width: 4, height: 110, depth: 1300, translate: [-790, 60, 0], op: '+', style: { 'm.transparent': true, 'm.opacity':0.6, }, }

有了半透明和高光的效果，看起来就有质感了，右边也如法炮制：

这样，整个建筑的外观就基本完成了。最后，放一些绿植，增加些生气吧。

植物

做一盆植物，需要有一个空的花盆，花盆里面有泥土，上面有一株植物。这些东西用3D做起来都有点啰嗦。不过也不难。花盆用一个大圆柱剪掉中间的小圆柱，做成空心花盆；植物用贴图+透明模拟一下就行，不用真的去做植物的3D模型，否则要累死了。

根据上面的思路，在项目中通过仔细调整，把创建花盆的代码封装好，然后在json中定义花盆位置就行了。下面定义一个：

{ name: '花1', type: 'plant', translate: [560, 0, 400], }

程序中解析如果type是plant则创建植物对象并添加场景。

在房间、走廊、甚至窗台上都可以放几盆，窗台上的可以通过设置scale缩小一些，并提升其高度到窗台位置即可。

看看下整体效果，还不赖吧。

机柜和设备

写了那么一大篇，才终于把3D机房的外观装修完成，咱也算是个设计师程序员的混合型人才了呢。其实机房最核心的资源——机柜，还没找落呢，没办法，形象工程也是项目建设的一大亮点。

机柜

机柜，以及其中的服务器设备。这才是3D机房里面最终要管理的内容。在我们的实际项目中，这些资产都是在数据库中存储，并通过json接口加载到浏览器中显示。这里为了演示方便，直接写几个机柜的片段，看一下显示效果。

机柜对象在项目中是这样封装的：用一个立方体来表示机柜，并加上贴图。项目中，为了提高显示速度，机柜一开始并不加载内部服务器内容，而是只显示自身一个立方体。当用户双击后，会触发一个延迟加载器，从服务器端加载机柜内部服务器，并加载到对应的位置上。此时，机柜会被挖空成一个空心的立方体，以便视觉上更像一个机柜。

定义机柜的json如下：

{ name: '机柜', type: 'rack', lazy: true, width: 70, depth: 100, height: 220, translate: [-370, 0, -250], severity: CRITICAL, }

上面的机柜定义中，有一个lazy标记，标记它是否延迟加载其内容。如果延迟加载，则双击触发，否则程序显示时直接加载其内容。Severity是定义了机柜的告警信息，它是否有业务告警。如果有告警，会用一个气泡显示在机柜的上方，同时机柜也会被染色成告警对应的颜色。

加入更多的机柜看看效果：

设备

简单起见，这里管理的设备假设都是机架设备，尺寸规格比较规整，因此比较容易在机柜中组织。一个设备的外观确定后，在数据库中定义好模板，加载时根据其所在机柜的位置放置即可。

这里只是随机生成了几个服务器设备，并按位置摆放。在实际应用中，可以通过手工录入或者智能机架报送的信息来确定服务器的类型和位置。

如果需要监控到端口级别，还可以在服务器弹出后，再进一步延迟加载设备商的板卡、端口对象，并点击后进一步进行配置、监控等操作。当然加载的数据越细，对3D引擎和浏览器的压力会越大。可以通过动态延迟加载/卸载策略，获取一些平衡折中。

电视机

纯属无聊，再做一个电视机挂在墙上。依旧，定义一个立方体、挖空屏幕，放上透明玻璃，再贴上我们喜欢的电视节目画面，就ok了。

{ name: '电视机体', type: 'cube', width: 150, height: 80, depth: 5, translate: [80, 100, 13], op: '+', },{ name: '电视机挖空', type: 'cube', width: 130, height: 75, depth: 5, translate: [80, 102.5, 17], op: '-', },{ name: '电视机屏幕', type: 'cube', width: 130, height: 75, depth: 1, translate: [80, 102.5, 14.6], op: '+', style: { 'front.m.texture.image': 'images/screen.jpg', }, }

当然，实际项目中，可以换上监控大屏幕的效果：

总结