HTML5+WebGL的Web3D展示

HTML5+WebGL的Web3D展⽰

下图是客户给找的⼀张的效果参考图，希望机房⾄少能达到下⾯的3D效果。

懂的⼈都知道，这可是⼀张设计公司出的装修效果图啊，就算是⽤max建模，也需要⼤量的⼯作，何况咱可是程序员在

做数据中⼼的可视化项⽬啊。静下⼼来思考，那就先从搭建⼀个webGL的场景开始吧。

WebGL基本场景搭建

在html5⾥⾯使⽤3D已经不是什么⾼深技术，它的基础是WebGL，⼀个OpenGL的浏览器⼦集，⽀持⼤部分主要3D功能

接⼝。⽬前最新的浏览器都有⽐较好的⽀持，IE需要到11（是的，你没有看错）。

要在浏览器⾥⾯使⽤webGL，就要研究webGL相关的技术和⽤法。做3D应⽤并不是⼀件轻松的事。就算最简单的搭建

⼀下webGL场景，也需要下⾯这些代码：

var width = idth; var height= eight; var container = document.( 'div' ); .(

container ); var webglcanvas = document.('canvas'); container.(webglcanvas); var gl =

text("experimental-webgl"); functionupdateFrame () { rt ( 0, 0, width, height );

olor(0.4, 0.4, 0.7, 1); ( _BUFFER_BIT ); tTimeout( function(){updateFrame()}, 20); }

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

和html⼀样，需要先创建⼀个canvas元素，并获得其webgl上下⽂：

var gl = text("experimental-webgl");

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

另外，要再起⼀个死循环，每隔**毫秒调⽤⼀次这个updateFrame函数来重绘场景。和2D不同，3D场景⾥⾯的变化是

随时随地的，所以需要不停刷新，就像播放电影或视频，静⽌不动的画⾯基本没有，所以死循环刷新基本是必要的。不

过实际项⽬使⽤中会有很多优化，尽量做到“按需刷新”，节省cpu和移动设备电量。有感兴趣的同学，哥可以单独写⽂章

介绍。这段程序基本上什么也没做，就画了⼀个静⽌不动的区域，如下图：

虽然看不见任何3D的内容，不过它已经是⼀个最简单的webgl程序了。我们的3D机房，也就是在这上⾯不断丰富⽽

已。

对象封装

要做项⽬，搭建下去⼯作量太⼤了，时间周期也不允许。使⽤第三⽅辅助⼯具是不可避免的，像, 都是

选择。这些⼯具都五官的画法 可以提供3D的基本对象和各种特效，当然这都不是最主要的，主要是如何利⽤它做出我想要的效

果：好看。为了避免⼤量修改代码，在项⽬⾥做了⼀些封装，即把原始3D的⽴⽅体等对象进⾏进⼀步封装，让⼀个json

数据就可以提供这些对象的定义。这样使⽤起来就⽐较⽅便了。json⼤致结构如下：

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

下⾯我们逐⼀来看这些3D对象是怎么进⾏美化的，过程可能稍显啰嗦，跬步千⾥，这次的基础打好了，以后的项⽬迈克尔法拉第 就

⼿到擒来了。

地板和斜坡

第⼀个要做的，也是应该⽐较简单的预防电信诈骗 ，就是地板对象。3D中，地板应该是⼀个有些厚度、带上格⼦贴图的薄薄⽴⽅体

平⾯。因此我对经过封装的⽴⽅体对象，⽤⼀段json对象定义如下：

{ name: '地板', type: 'cube', width: 1600, height: 10, depth: 1300, style: { '': '#BEC9BE', 't': '#BEC9BE', }

}

通过定义，创建了⼀个13⽶*16⽶的地板块，这也是客户⼩型机房的实际尺⼨：

看起来有那么点意思，就是颜⾊还不够，需要找⼀个地板砖纹理图。需要注意的是，纹理图的尺⼨都需要是宽和⾼都是

2的幂，例如128x128、256*256等，这样出来效果才会好。这也是3D软件⼀般所要求1990是什么年 的。另外纹理要能连续拼接不露

破绽，这样才好。例如下⾯我google出来的图：

破绽，这样才好。例如下⾯我google出来的图：

在style⾥⾯添加：

'': 'images/', '': new 2(10,10),

效果如下：

有图⽚材质纹理，效果果然好多了。突然想到客户说，他们机房底⾯有⼀个⽅便运送设备的斜坡，必须要画出来。

这……（╯－＿－）╯

后来想到twaver⾥⾯的对象可以⽀持运算，⽐如可以定义⼀个斜的⽴⽅体，让地板剪掉⽴⽅体，就可以做到。于是继续

定义json：

{ name:'地板切坡', type:'cube', width:200, height:20, depth:260, translate: [-348,0,530], rotate: [/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:{ 'arent': true,

'': 'images/door_', }

上⾯增加的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: {

'arent': true, 'y':0.4, '':'#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: {

'arent': true, 'y':0.6, }, }

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

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

植物

做⼀盆植物，需要有⼀个空的花盆，花盆⾥⾯有泥⼟，上⾯有⼀株植物。这些东西⽤3D做起来都有点啰嗦。不过也不

难。花盆⽤⼀个⼤圆柱剪掉中学校安全标语 间的⼩圆柱，做成空⼼花盆；植物⽤贴图+透明模拟⼀下就⾏，不⽤真的去做植物的3D模

型，否则要累死了。

根据上⾯的思路，在项⽬中通过仔细调整，把创建花盆的代码封装好，然后在json中定义花盆位置就⾏了。下⾯定义⼀

个：

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

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

在房间、⾛廊、甚⾄窗台上都可以放⼏盆，窗台上的可以通过设置scale缩⼩⼀些，并提升其⾼度到窗台位置即可。

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

机柜和设备

写了那么⼀⼤篇，才终于把3D机房的外观装修完成，咱也算是个设计师程序员的混合型⼈才了呢。其实机房最核⼼的

资源——机柜，还没找落呢，没办法，形象⼯程也是项⽬建设的⼀⼤亮点。

机柜

机柜，以及其中的服务器设备。这才是3D机房⾥⾯最终要管理的内容。在我们的实际项⽬中，这些资产都是在数据库

中存储，并通过json接⼝加载到浏览器中显⽰。这⾥为了演⽰⽅便，直接写⼏个机柜的⽚段，看⼀下显⽰效果。

机柜对象在项⽬中是这样封装的：⽤⼀个⽴⽅体来表⽰机柜，并加上贴图。项⽬中，为了提⾼显⽰速度，机柜⼀开始并

不加载内部服务器内容，⽽是只显⽰⾃⾝⼀个⽴⽅体。当⽤户双击后，会触发⼀个延迟加载器，从服务器端加载机柜内

部服务器，并加载到对应的位置上。此时，机柜会被挖空成⼀个空⼼的⽴⽅体，以便视觉上更像⼀个机柜。

定义机柜的json如下：

上⾯的机柜定义中，有⼀个lazy标记，标记它是否延迟加载其内容。如果延迟加载，则双击触发，否则程序显⽰时直接

加载其内容。Severity是定义了机柜的告警信息，它是否有业务告警。如果有告警，会⽤⼀个⽓泡显⽰在机柜的上⽅，

同时机柜也会被染⾊成告警对应的颜⾊。

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

设备

简泰式spa 单起见，这⾥管理的设备假设都是机架设备，尺⼨规格⽐较规整，因此⽐较容易在机柜中组织。⼀个设备的外观确定

后，在数据库中定义好模板，加载时根据其所在机柜的位置放置即可。

这⾥只是随机⽣成了⼏个服务器设备，并按位置摆放。在实际应⽤中，可以通过⼿⼯录⼊或者智能机架报送的信息来确

定服务器的类型和位置。

如果需要监控到端⼝级别，还可以在服务器弹出后，再进⼀步延迟加载设备商的板卡、端⼝对象，并点击后进⼀步进⾏

配置、监控等操作。当然加载的数据越细，对3D引擎和浏览器的压⼒会越⼤。可以通过动态延迟加载/卸载策略，里番肉番本子 获取

⼀些平衡折中。HTML5+WebGL的Web 3D展⽰定制加QQ 2462806479 了解详情。