HTML5，不仅仅是看上去非常美（第二弹：打造最美3D机房）

前言

近期项目开发任务告一段落，刚好有时间整理这大半年的一些成果。使用html5时间还不久，对js的认识还不够深入。没办法，曾经一直搞java，对js的一些语言特性和概念一时还转换只是来。

上一篇第一弹介绍了项目中做的一个彩虹爆炸图，主要用了 html5的canvas的2d绘制技术。这一回我想介绍一下项目中的一个亮点技术：html5的3D，以及怎样用它打造精美的3D机房监控系统。

目标效果图

下图是客户给找的一张的效果參考图，希望机房至少能达到以下的3D效果。

懂的人都知道，这但是一张设计公司出的装修效果图啊，就算是用max建模。也须要大量的工作，何况咱但是程序猿在做数据中心的可视化项目啊。。。

强忍心中奔腾的万千头**马，静下心来思考。那就先从搭建一个webGL的场景開始吧。

WebGL基本场景搭建

在html5里面使用3D已经不是什么高深技术，它的基础是WebGL，一个OpenGL的浏览器子集，支持大部分主要3D功能接口。眼下最新的浏览器都有比較好的支持，IE须要到11（是的，你没有看错）。

要检測你的浏览器是否支持webGL，可直接訪问网页http://get.webgl.org/ 看能否看到一个旋转的立方体。假设能看到，说明你的浏览器支持webgGL。否则，能够下一个最新的chrome试试吧。相对来说chrome对webGL的支持最好，效率也非常优秀。

要在浏览器里面使用webGL，就要研究webGL相关的技术和使用方法。做3D应用并非一件轻松的事。就算最简单的搭建一下webGL场景，也须要以下这些代码：

var width = window.innerWidth;
var height= window.innerHeight;
var container = document.createElement( 'div' );
document.body.appendChild( container );
var webglcanvas = document.createElement('canvas');
container.appendChild(webglcanvas);
var gl = webglcanvas.getContext("experimental-webgl");                

function updateFrame () {
  gl.viewport ( 0, 0, width, height );
        gl.clearColor(0.4, 0.4, 0.7, 1);
        gl.clear ( gl.COLOR_BUFFER_BIT );
         setTimeout(
    function(){updateFrame()},
            20);
     }  

setTimeout(
  function(){
    updateFrame();
  },
20);

和html一样，须要先创建一个canvas元素，并获得其webgl上下文：

var gl = webglcanvas.getContext("experimental-webgl");

然后在一个updateFrame的函数中，像html5的2D context一样。去绘制3D的内容。

另外，要再起一个死循环，每隔**毫秒调用一次这个updateFrame函数来重绘场景。

和2D不同，3D场景里面的变化是随时随地的，所以须要不停刷新，就像播放电影或视频，精巧不动的画面基本没有。所以死循环刷新基本是必要的。只是实际项目使用中会有非常多优化，尽量做到“按需刷新”，节省cpu和移动设备电量。有感兴趣的同学。哥能够单独写文章介绍。这段程序基本上什么也没做，就画了一个精巧不动的区域，例如以下图：

虽然看不见不论什么3D的内容。只是它已经是一个最简单的webgl程序了。我们的3D机房。也就是在这上面不断丰富而已。

对象封装

要做项目，搭建下去工作量太大了，时间周期也不同意。

使用第三方辅助工具是不可避免的。像Three.js, twaver.js都是选择。这些工具都能够提供3D的基本对象和各种特效，当然这都不是最基本的。主要是怎样利用它做出我想要的效果：好看。为了避免大量改动代码。在项目里做了一些封装，即把原始3D的立方体等对象进行进一步封装，让一个json数据就能够提供这些对象的定义。这样使用起来就比較方便了。

json大致结构例如以下：

var json={
objects: [{
    name: '地板',
    …
},{
…
}],
}

以下我们逐一来看这些3D对象是怎么进行美化的。过程可能稍显啰嗦。跬步千里，这次的基础打好了，以后的项目就手到擒来了。

地板和斜坡

第一个要做的。也是应该比較简单的，就是地板对象。3D中，地板应该是一个有些厚度、带上格子贴图的薄薄立方体平面。

因此我对经过封装的立方体对象，用一段json对象定义例如以下：

{
    name: '地板',
    type: 'cube',
    width: 1600,
    height: 10,
    depth: 1300,

    style: {
        'm.color': '#BEC9BE',
        'm.ambient': '#BEC9BE',
    }
}

通过定义，创建了一个13米*16米的地板块。这也是客户小型机房的实际尺寸：

看起来有那么点意思，就是颜色还不够，须要找一个地板砖纹理图。

须要注意的是。纹理图的尺寸都须要是宽和高都是2的幂，比如128x128、256*256等，这样出来效果才会好。这也是3D软件一般所要求的。另外纹理要能连续拼接不露破绽，这样才好。比如以下我google出来的图：

在style里面加入：

   'top.m.texture.image': 'images/floor.png',
   'top.m.texture.repeat': new mono.Vec2(10,10),

效果例如以下：

有图片材质纹理，效果果然好多了。突然想到客户说，他们机房底面有一个方便运送设备的斜坡。必须要画出来。这……（╯－＿－）╯

后来想到twaver里面的对象能够支持运算。比方能够定义一个斜的立方体。让地板剪掉立方体。就能够做到。

于是继续定义json：

{
    name: '地板切坡',
    type: 'cube',
    width: 200,
    height: 20,
    depth: 260,
    translate: [-348,0,530],
    rotate: [Math.PI/180*3, 0, 0],
    op: '-',
    style: {
        …,
    }
}

这里定义的一个倾斜的立方体，通过translate定义位置，rotate定义旋转角度。然后再通过op定义运算符。这里是“减去”，就用“-”表示。被剪掉的立方体也能够设置材质、纹理、贴图、颜色…等等。和地板一样。看看效果：

第一步总算是有惊无险地搞定了。

走廊桌

下一步找了个简单的对象，按要求走廊要放一个接待桌。为了简单，我决定就偷懒做一个立方体表示。

{
    name: '走廊板凳',
    type: 'cube',
    width: 300,
    height: 50,
    depth: 100,
    translate: [350, 0, -500],
}

效果例如以下：

这里偷懒事实上是有原因的。在3D里，最重视的就是效率。千万不要放一些非常复杂的模型，尤其是这类非业务对象。就像这个桌子。虽然仅仅是个简单的立方体，但仅仅要和总体风格协调一致，再添加一点配色并启动阴影效果后。看着就好多了：

墙体

墙体是机房里非常重要的一个部分，有好的光照、阴影的效果才干看起来更加逼真。

因为墙体是不规则的路径，一段一段去生成还真挺麻烦的，还好引擎支持这样的物体，甚至曲线路径都能够。这里仅仅要在json里面定义一组数字的坐标，让这些数字依次连接，组成一个墙体，最后生成3D对象放入场景中即可啦。

json定义例如以下：

{
    name: '主墙体',
    type: 'path',
    width: 20,
    height: 200,
    translate: [-500, 0, -500],
    data:[
        [0, 0],
        [1000, 0],
        [1000, 500],
        [500, 500],
        [500, 1000],
        [0, 1000],
        [0,0],
    ],
}

注意这里的类型变成了path。data中定义了一个二维坐标数组来描写叙述墙体。

因为墙都是从底面開始的，所以仅仅定义它的平面的x、y坐标即可了。看看效果：

只是如前文所说，还是须要上色、上阴影。才干有更好的效果。

这里我们启用阴影并咨询设计师美眉几个颜色值，加上去后再看下效果：

以及一些细节：

门

看着雪白的墙。是不是认为少了点什么？对，就是门。在3D机房的监控系统里。门禁是非常重要的一块，客户要求门应该与实际位置相相应，并且要有开门关门的动画效果。这样，实际的门禁信息採集上来后。就能在界面实时看到门的状态了。

这里，考虑到门假设直接放上去，会被墙盖住；假设比墙厚，又难看不符合实际。还是应该先定义一个门洞立方体，把门所在的位置挖掉：

{
    name: '门洞',
    type: 'cube',
    width: 195,
    height: 170,
    depth: 30,
    op: '-',
    translate:[-350,2,500],
}

刚好挖在斜坡的位置。这样设备进屋就方便了：

只是这门没有一个门框，感觉不太生动。多一个门框会感觉立体感强一些。门框能够是一个比门洞略大的立方体，在挖门洞之前加入：

{
    name: '门框',
    type: 'cube',
    width: 205,
    height: 180,
    depth: 26,
    translate: [-350, 0, 500],
    op: '+',
}

加上阴影和光线等综合效果后。还不错，挺有档次的。

来张全景图看看：

接着，仅仅要把门安上去即可了。门的定义比較简单。就是一个薄的立方体。只是为了做到玻璃效果，须要设置透明度，让它看上去更像一个玻璃，再让设计师美眉弄一张好看一点的门的图。贴上去。虽然有了webGL，复杂的建模工作能够省略了，只是设计师美眉的配合仍然非常重要。

先做左边的门：

{
    name: '左门',
    type: 'cube',
    width: 93,
    height: 165,
    depth: 2,
    translate:[-397,4,500],
    style:{
        'm.transparent': true,
        'm.texture.image': 'images/door_left.png',
    }

上面添加的style主要透明和贴图两项。

看看效果：

相同的方法。再把右側门贴上就搞定了。为了添加体验，也是用户的要求。门上面设置了动画：双击能够自己主动打开。再双击能够直接关闭。动画功能引擎做好了封装，在json中直接指定动画类型即可了。

只是要注意左右门的动画旋转方向要相反。要不然一个向里开一个向外开感觉比較怪异。

窗

项目中，窗本身不须要有不论什么业务属性。但是美观度的要求可一点都不能少。方法和门相似，先放窗框后挖窗口。只是为了有点变化。这里不做窗框了，做一个窗台，方法和道理与门相同。

{
    name: '主窗户洞',
    type: 'cube',
    width: 420,
    height: 150,
    depth: 50,
    translate: [200, 30, 500],
    op: '-',
},{
    name: '主窗户台',
    type: 'cube',
    width: 420,
    height: 10,
    depth: 40,
    translate: [200, 30, 510],
    op: '+',
}

定义了一个窗洞（挖掉）、一个窗台（加入）。

一个大窗户就做好了：

再加入一个略带颜色的透明玻璃。玻璃设置点高光和反射，添加“玻璃”感觉：

{
    name: '主窗户玻璃',
    type: 'cube',
    width: 420,
    height: 150,
    depth: 2,
    translate: [200, 30, 500],
    op: '+',
    style: {
        'm.transparent': true,
        'm.opacity':0.4,
        'm.color':'#58ACFA',
    },
}

json中玻璃设置了透明度和颜色。

这样一个半透明的茶色玻璃就好了：

到这里突然在想：盖房子假设像敲代码一样简单就好了，全部的程序猿就不会是无房一族单身狗了。当然敲代码和盖房子一样：该封装好的要封装好。最后就是搭积木组装即可了。

假设盖房子都是从挖土活泥巴開始，那就杯具了。敲代码也是一样，假设从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机房的外观装修完毕，咱也算是个设计师程序猿的混合型人才了呢。

事实上机房最核心的资源——机柜。还没找落呢，没办法。形象project也是项目建设的一大亮点。

机柜

机柜。以及当中的server设备。这才是3D机房里面最终要管理的内容。

在我们的实际项目中，这些资产都是在数据库中存储，并通过json接口载入到浏览器中显示。这里为了演示方便，直接写几个机柜的片段，看一下显示效果。

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

定义机柜的json例如以下：

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

上面的机柜定义中。有一个lazy标记，标记它是否延迟载入其内容。假设延迟载入，则双击触发，否则程序显示时直接载入其内容。

Severity是定义了机柜的告警信息，它是否有业务告警。假设有告警。会用一个气泡显示在机柜的上方，同一时候机柜也会被染色成告警相应的颜色。

加入很多其它的机柜看看效果：

设备

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

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

假设须要监控到port级别。还能够在server弹出后，再进一步延迟载入设备商的板卡、port对象，并点击后进一步进行配置、监控等操作。当然载入的数据越细。对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',
    },
}

当然。实际项目中，能够换上监控大屏幕的效果：

总结

整个场景写到最后。我也已经脑洞大开游刃有余了。

3D场景，尤其是这类业务系统，并不一定要死抠模型的仿真度，才干做到“好看”的效果。先来一张全景看一下：

怎么样。还算精美吧？基本不输前面看到的广告公司的效果图。

但和效果图一张死图片不一样，我们这是一个能操作、能漫游、能缩放、有动画、显示流畅、浏览器无需插件就能直接打开的3D机房小程序，就一个json文件和一百多行代码和一天的时间就搞定了，还是让人有点吃惊的。

不用插件、不用3Dmax。不用模型库。干干净净纯粹的小程序，手机和平板也能用哦，并且还非常流畅！上一张我的Nexus5截图瞅瞅：

经过优化。场景载入已经控制在600毫秒以内，缩放漫游也非常流畅。当然，技术和美化永无止境，用户的需求也千变万化精益求精。但仅仅要我们选择好了技术和工具。就能事半功倍。

Html5就是极佳的一个选择。

Html5，或许它还不是银弹。但它确实是非常好的一个炮弹。

本文这一弹，你还喜欢吗？欢迎来信留言索代替码、技术交流：tw-service@servasoft.com