Three.js是一個用來簡化WebGL開發的JavaScript庫，比如繪製一個三維立方體，

使用WebGL需要100多行，那Three.js只要10幾行就能夠完成。

本文通過建立一個立方體來簡單介紹Three.js的基礎知識。

Three.js中的基本概念

Three.js包含3個基本概念：場景（Scene）、相機（Camera）和渲染器（Renderer）。

場景就是需要繪製的物件，相機代表取景的視角，渲染器是繪製的載體（可以掛靠到瀏覽器的DOM元素中），

也就是我們通過相機拍攝場景然後繪製到目標介質中去。

建立場景、相機和渲染器

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

接著建立了一個WebGL的渲染器（注意Three.js也支援非3D的Canvas 2D的渲染器），然後掛靠為HTML文件body的DOM子元素。

建立立方體

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;
 

接著建立了一個色彩為綠色的材料，然後通過Mesh（圖元裝配函式）方法把顏色應用到幾何物件上，這樣就構建了一個綠色的立方體。

最後把該立方體物件新增到場景（scene）中，並設定視覺深度。

繪製場景

編寫了上述程式碼後，我們就已經有了可以繪製的物件、視角、渲染器；接下來就是把物件實際繪製出來。

function render() {
	requestAnimationFrame( render );
	renderer.render( scene, camera );
}
render();

而不是setInterval是因為前者更能節省資源（在瀏覽器頁面切換時，會暫停執行）。

實現動畫

接下來我們嘗試讓這個立方體旋轉起來，這樣更有趣一些。在render函式中新增如下程式碼：

cube.rotation.x += 0.1;
cube.rotation.y += 0.1;