Three.js介绍
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。Three.js（类似于JQuery）在浏览器提供的 WebGL 接口之上又做了一层封装。WebGL 是在浏览器中实现三维效果的一套标准。WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 前端开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。下面雷雪松就简单介绍一下Three.js。
1、创建一个 Three.js 程序步骤
a. 初始化 场景（scene）–包含所有需要显示的3D物体以及其他相关元素的容器
b. 初始化 相机（camera）–决定3D场景如何投影到2D画布之上
c. 初始化 渲染器（renderer）–用于最后绘制的画笔
d. 场景中创建物体
[cc lang=’javascript’]var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
// 1. 75设置的是视角（field of view）。
// 2. 设置的是相机拍摄面的长宽比（aspect ratio）。我们几乎总是会使用元素的宽除以高，否则会出现挤压变形。
// 3. 是近裁剪面（near clipping plane）
// 4. 远裁剪面（far clipping plane）。
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
[/cc]
2、Three.js 之相机
在网页显示出三维的效果，就要借助于视觉效果来实现，比如阴影、光照等。Camera相当于人的眼睛，从坐标的那个视点去观察目标，相当于投影出立体感。Three.js的架构支持多种camera，这里使用最常见的远景相机（PerspectiveCamera），也就是类似于人眼观察的方式。
3、Three.js 之渲染器
渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制。
[cc lang=’javascript’]var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器的大小为窗口的内宽度，也就是内容区的宽度
document.body.appendChild(renderer.domElement);[/cc]
注意，渲染器renderer的domElement元素，表示渲染器中的画布，所有的渲染都是画在domElement上的，所以这里的appendChild表示将这个domElement挂接在body下面，这样渲染的结果就能够在页面中显示了。
4、Three.js 之场景
[cc lang=’javascript’]var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
// Mesh 好比一个包装工，它将『可视化的材质』粘合在一个『数学世界里的几何体』上，形成一个『可添加到场景的对象』。
// 当然，创建的材质和几何体可以多次使用（若需要）。而且，包装工不止一种，还有 Points（点集）、Line（线/虚线） 等。
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);[/cc]
CubeGeometry是一个正方体或者长方体，究竟是什么，由它的3个参数所决定，cubeGeometry的原型。
[cc lang=’javascript’]CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)
// width：立方体x轴的长度; height：立方体y轴的长度; depth：立方体z轴的深度，也就是长度[/cc]
5、Three.js之渲染
渲染应该使用渲染器，结合相机和场景来得到结果画面。渲染分两种：离线渲染、实时渲染。渲染函数的原型如下：render( scene, camera, renderTarget, forceClear )。各个参数的意义是：
scene：前面定义的场景
camera：前面定义的相机
renderTarget：渲染的目标，默认是渲染到前面定义的render变量中
forceClear：每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除。
（1）离线渲染
比如特效动画是用电脑做出然后渲染一帧一帧的高质量图片，然后再把图片用视频处理软件拼接成电影的。这就是离线渲染。如果不事先处理好一帧一帧的图片，那么电影播放得会很卡。CPU和GPU根本没有能力在播放的时候渲染出这种高质量的图片。
（2）实时渲染
就是需要不停的对画面进行渲染，即使画面中什么也没有改变，也需要重新渲染。下面就是一个渲染循环：
[cc lang=’javascript’]function render() {
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
requestAnimationFrame(render);
}[/cc]
其中一个重要的函数是requestAnimationFrame，这个函数就是让浏览器去执行一次参数中的函数，这样通过上面render中调用requestAnimationFrame()函数，requestAnimationFrame()函数又让rander()再执行一次，就形成了我们通常所说的游戏循环了。
来源：Three.js介绍