无插件纯Web 3D机房，HTML5+WebGL倾力打造

前言

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

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

目标效果图

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

懂的人都知道，这可是一张设计公司出的装修效果图啊，就算是用max建模，也需要大量的工作，何况咱可是程序员在做数据中心的可视化项目啊。。。强忍心中奔腾的万千头**马，静下心来思考，那就先从搭建一个webGL的场景开始吧。

WebGL基本场景搭建

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

要检测你的浏览器是否支持webGL，可直接访问网页 看是否能看到一个旋转的立方体。如果能看到，说明你的浏览器支持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定义运算符，这里是“减去”，就用“-”表示。被剪掉的立方体也可以设置材质、纹理、贴图、颜色…等等，和地板一样。看看效果：

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

走廊桌