Three.js构建web3d模型

什么是Three.js

three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。不过，这款引擎目前还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏）three.js的代码托管在github上面。

上面摘自百度百科。依我来看就是一个在HTML5画布（canvas）上显示的3D引擎。如果你之前折腾过本地3D引擎，比如Steam，寒霜，那上手这个就非常简单了。

学习这个引擎难处有几点：第一，正如上面所说，没有比较系统的文档，只有一些大神写的Demo，对于一些js基础不好或者英语不好的童鞋来说简直不能历届；第二，一般人对游戏引擎里面的纹理、光源、材质等词不甚理解。第三，不晓得怎么去调试。

在开始正式介绍之前，可以先看看Demo，了解一下这个引擎能做什么。

官方网站上的例子：http://threejs.org/

GitHub上的例子：http://stemkoski.github.io/Three.js/

其中几个比较有特色的列一下（提提你们的胃口~）（都不要使用IE或基于IE的浏览器打开！推荐使用Chrome）：

最基本的Hello World：http://stemkoski.github.io/Three.js/HelloWorld.html

调用你的摄像头：http://stemkoski.github.io/Three.js/Webcam-Texture.html

体感操作（你没有看错！）：http://stemkoski.github.io/Three.js/Webcam-Motion-Detection-Texture.html

支持你的游戏手柄（XBox等）：http://stemkoski.github.io/Three.js/Mesh-Movement-Gamepad.html

3D建模和方向键控制移动方向：http://stemkoski.github.io/Three.js/Model-Animation-Control.html

SkyBox和3个气泡渲染（可见Three.js的渲染真心不赖）：http://stemkoski.github.io/Three.js/Metabubbles.html

3D红蓝偏光的名车展（打开前自备偏光镜）：http://threejs.org/examples/webgl_materials_cars_anaglyph.html

帅爆了的元素周期表：http://threejs.org/examples/css3d_periodictable.html

跑车游戏：http://hexgl.bkcore.com/

有没有和小伙伴们都惊呆了？——至少我是的。没有使用Flash，没有大量的图片拼接，绝大多数的特效靠代码实现，包括文章配图那款SS跑车，AMAZING！

Three.js环境的准备

正文现在开始。