隨着HTML5的普及，網頁的表現能力越來越強大，瀏覽器提供了WebGL接口，可以通過調用對應API進行3D圖形的繪製，Three.js在這些基礎接口之上又做了一層封裝。
特點
Three.js特點：
* 掩蓋了3D渲染細節
* 面向對象
* 功能豐富
* 速度快
* 支持交互
* 內置文件支持
* 拓展性強
* 同時支持HTML5、2D、Canvas
動畫示例
簡介
本文通過three.js中基礎的場景實現簡單瞭解一下
引入
首先需要引入three.js庫文件，可以下載到本地或直接引用線上地址。
<script src='http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js'></script>
創建場景
爲了three.js顯示，需要三件事情：場景、相機和渲染器
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
1、先建立一塊場景。
2、在three.js中有不同的相機，上面使用的是PerspectiveCamera
第一個參數是視野。是在任何給定時刻在顯示器上看到的場景的範圍，以度爲單位。
第二個是寬高比。最好使用元素的寬度除以高度，不然圖像看起來很凹陷。
接下來的兩個屬性是近端和遠端剪切平面。如果對象遠離相機比的數值，遠或近於附近將不會被渲染。
3、接下來是渲染器。除了使用的WebGLRenderer之外，three.js還帶有一些其他的功能，通常用於舊版瀏覽器或者因爲某些原因沒有WebGL支持的用戶。
4、除了創建渲染器實例外，還需要設置渲染應用程序的大小。可以設置成瀏覽器窗口的寬度和高度。但對於性能密集型場景，可以用setSize設置較小的值，如window.innerWidth/2和window.innerHeight/2，使應用程序呈現一半的大小。
如果想保持應用程序的大小，以較低的分辨率渲染它，可以通過以false第三個參數來調用setSize。例如，setSize(window.innerWidth/2,window.innerHeight/2,false)，將以一半分辨率呈現應用程序。
添加立方體
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
1、使用BoxGeometry創建一個多維數據集，包含數據集中的點(頂點)和麪的對象。
2、接着是進行上色，three.js中有幾種材料，可以使用MeshBasicMaterial方法。
3、創建一個網格對象Mesh，帶入之前創建的幾何體和材質，然後添加到場景中。默認情況下，調用scene.add()，添加的東西會被顯示到座標（0,0,0）。會導致相機和立方體在彼此內部。爲了避免這種情況，只需將攝像頭移出一點。
渲染場景
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
利用requestAnimationFrame在刷新屏幕時不斷渲染場景。
動起來
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
在場景刷新時修改一些立方體屬性，使其運動。
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<title>first three.js</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src='http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js'></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>
總結
根據Threejs官方示例簡單瞭解一下threejs概念和基礎佈局場景，通過提供的api可以繪製出有趣的場景，實現複雜的動畫。