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场景，也需要下面这些代码：

 

<script>    
    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);  
</script>   

 

 

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

 

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

 

 

然后在一个updateFrame的函数中，像html5的2d context一样，去绘制3D的内容。另外，要再起一个死循环，每隔**毫秒调用一次这个updateFrame函数来重绘场景。和2D不同，3D场景里面的变化是随时随地的，所以需要不停刷新，就像播放电影或视频，静止不动的画面基本没有，所以死循环刷新基本是必要的。不过实际项目使用中会有很多优化，尽量做到“按需刷新”，节省cpu和移动设备电量。这一点也是很重要的，有感兴趣的同学，可以单独写文章介绍。这段程序基本上什么也没做，就画了一个静止不动的区域，如下图：