本文的目的是簡要介紹Three.js的使用方法。我們首先會設置一個有旋轉立方體的三維場景。在本文的後面是一個可用的完整腳本示例。
查看效果：http://hovertree.com/texiao/html5/36/
Three.js是什麼？
如果你已經讀到本文，那麼你可能對Three.js已經有一些了解，也明白它對你有什麼幫助，但是我們會盡量簡要的描述它。
Three.js是使浏覽器中的WebGL - 3D 變得非常簡易的類庫。一個簡單的立方體要通過原始的WebGL 來實現需要幾百行Javascript 和著色代碼，但是如果用Three.js，則只需要很少的代碼。
准備開始之前
如果要順利使用Three.js，你先得有地方來顯示它。請把以下的HTML代碼存放到你的電腦上，同時將從Three.js的官方網站下載three.min.js文件存放到HTML文件同級目錄下的js文件夾中，然後用你支持WebGL的浏覽器打開HTML文件。
<html>
<head>
<title>My first Three.js app</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="js/three.min.js"></script>
<script>
// Our Javascript will go here.
</script>
</body>
</html>
這是所有HTML代碼的整體樣式。以下所有的代碼都會放到<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 );
現在讓我來解釋這些代碼有什麼作用。現在我們已經建立了一個場景、我們的攝像機和渲染器。在Three.js中有幾種不同的攝像機，但是我們以後再討論不同的攝
像機。現在，讓我們使用透視場景攝像機PerspectiveCamera。代碼中攝像機的第一個參數值是視界大小。
第二個參數是寬高比。幾乎大多數時候都要用顯示元素的寬度來除以高度，否則你會得到一個像在寬頻電視機上看老電影一樣被擠壓變形的效果。
後面的連個參數代表近處和遠處剪裁面。意思就是物體超過遠端剪裁面或近端剪裁面就不會被渲染顯示。現在你無需為這個操心，但是將來你要使你的游戲表現更佳的時候就需要用到其它的參數值了。
接下來是渲染器。這就是見證奇跡的時刻。除了我們在這裡使用的WebGLRenderer渲染器，Three.js也帶有其它一些渲染器，通常用於應對有些用戶使用的比較舊的沒有WebGL 支持的浏覽器。
除了創建渲染器的實例，我們也需要設置渲染器對我們的程序的渲染尺寸。使用我們的游戲需要的填充區域的寬度和高度是個好主意，也就是使用浏覽器窗口的
寬度和高度。對於追求更好表現的游戲，你也可以吧setSize的尺寸設置的小一些，比如window.innerWidth/2和window.innerHeight/2這樣半大的解析尺寸。這不意味
著游戲只會填充窗口的一半大，但是會看起來比較模糊和放大。
最後，我們把渲染元素添加到我們的HTML文件裡。這是一個<canvas> 畫布元素，渲染器用它來將場景展現給我們。
“這些都很好，但是你答應的立方體在哪裡呢？”讓我們現在添加立方體。
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
要創建立方體，我們需要CubeGeometry立方體幾何體。這是一個包含有立方體頂點（vertices)）和填充面（faces）的物體。我們會在將來進一步探討幾何形體。
除了幾何形體，我們需要材質來著色。Three.js 帶有幾種材質，但是我們現在將使用最基本的材質MeshBasicMaterial。所有的材質都需要一個具有各種屬性的可以
應用的物體。為了簡易化，我們只用一個綠色0x00ff00的顏色屬性。這和CSS或Photoshop的十六進制顏色原理一樣。
我們需要的第三樣東西是網模。網模是一種采用幾何形體並應用材質的物體，我們可以將它插入到場景中，並且可以自由的移動。
默認狀態下，當我們調用場景添加scene.add()過程的時候，一個物體將會被添加到坐標系的原點(0,0,0)。這會導致攝像機和立方體陷入其中。為了避免這一問題，
我們就簡單的把攝像機移出來一點。
渲染場景
如果你將以上的代碼復制到我們之前創建的HTML文件中，你可能看不到任何東西。這是因為我們還沒有渲染任何東西。為了顯示場景，我們需要調用渲染循環。
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
這段程序會創建一個循環，讓渲染器以每秒60次的頻率描繪場景。如果你是個用浏覽器寫游戲程序的新手，你也許會問：“為什麼我們不用setInterval來實現循環呢
？”實際情況是：我們本來也是可以這樣使用的，但是requestAnimationFrame過程卻擁有許多優勢。也許最重要的一個優勢就是：當用戶跳轉到其它浏覽器窗口的
時候，它就會暫停，因此不會浪費寶貴的計算能力和電池壽命。
讓立方體動起來
如果你把以上的所有代碼都插入到我們開頭創建的文件，你應該會看到一個綠色的盒子。讓我們把它轉動起來，變得有趣點。
請把以下的代碼添加到上面的渲染器程序的renderer.render一行之上。
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
這個會以每秒60幀的頻率運行每一幀，讓立方體獲得漂亮的旋轉動畫。一般而言，任何你要在游戲或應用運行時要移動或變化的行為都必須通過渲染循環。當然
你也可以從這個循環訪問其他程序，這樣你就不需要寫成百行的渲染器程序了。
大功告成
恭喜你！你現在已經完成了第一個Three.js應用程序。這個非常簡易，但是你必須有個開端。
查看效果：http://hovertree.com/texiao/html5/36/
下面是完整的代碼。把玩把玩，以便更好的理解其工作原理。
<html>
<head>
<title>My first Three.js app - 何問起</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="http://hovertree.com/texiao/html5/36/js/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.CubeGeometry(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 render = function () {
requestAnimationFrame(render);
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>