CODE大全
版权声明:本文为博主原创文章,未经博主允许不得转载。

HTML5 打造3D 机房(jifangapp)

发布时间:『 2017-06-30 11:59』  博客类别:WEB前端  阅读(1154) 评论(0)

网上关于3D机房的介绍有很多。国内还有一家专门提供机房应用(jifangapp)的网站。

3D机房的效果图基本上都是使用 WebGL 技术来实现的。本文将通过截图+视频的形式,让大家更直观的了解到WebGL搭建的3D机房效果。

navi.mapabc.com 3D机房 jifangapp

上图是一张效果图。具体的可以看下面的视频内容:

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和移动设备电量。

上面只是一个webgl的一个测试程序。如果你需要更深入的学习,建议你试试Three.js, twaver.js等。


——— 全文完 ———
如有版权问题,请联系532009913@qq.com。
关键字:   jifangapp     HTML5     3D     WebGL     Three.js     twaver.js  
评论信息
暂无评论
发表评论
验证码: 
Powered by CODE大全 | 鄂ICP备14009759号-2 | 网站留言 Copyright © 2014-2016 CODE大全 版权所有