不只是看上去很美（第二弹：打造最美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),