先用第一個簡單的範例讓大家看一下 Three.js 的效果，首先要記得把 library 讀進來，我這邊使用的是這一隻：
https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js
也可以到官網下載目前最新的版本到自己的電腦裡再讀入。
接著照官方範例來看，我們先
1. 建立一個場景：
var scene = new THREE.Scene();
2. 建立相機
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
關於相機的參數可以先看一下官方文件 THREE.PerspectiveCamera 的說明，官方使用的是透視投影相機（PerspectiveCamera）。
裡面的一些參數設定與說明如下：
- 視角（fov, field of view）：又稱為視野、視場，指的是我們能從畫面上看到的視野範圍，一般在遊戲中會設定在 60 ~ 90 度。
- 畫面寬高比（aspect）：渲染結果的畫面比例，一般都是使用 window.innerWidth / window.innerHeight 。
- 近面距離（near）：從距離相機多近的地方開始渲染，一般推薦使用 0.1。
- 遠面距離（far）：相機能看得多遠，一般推薦使用 1000，可視需求調整，設置過大會影響效能。
3. 建立渲染器：
//選擇渲染器 var renderer = new THREE.WebGLRenderer(); //設定尺寸 renderer.setSize( window.innerWidth, window.innerHeight ); //把渲染器加到網頁上 document.body.appendChild( renderer.domElement );
4. 建立物件
//設定物體
var geometry = new THREE.BoxGeometry();
//設定材質
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
//加到場景
scene.add( cube );
camera.position.z = 5;
這裡利用 THREE.BoxGeometry 來建立立方體，一般建立物體的就是先宣告形狀（geometry）與材質（material），然後用這兩個要素建立一個網格物件（mesh），再設定位置後加到場景中便可完成。
5. 增加動畫
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
若是要讓場景中的物體動起來，就需要每隔一段時間重新渲染場景，而這就是程式裡面 requestAnimationFrame 所負責的部分。
requestAnimationFrame 是 HTML5 中瀏覽器提供的一個為動畫而生的接口，它能讓畫面盡可能平滑與高效地進行重新渲染，還能有效節省 CPU、GPU 資源，所以一般在 Three.js 會透過它來幫忙重新渲染場景。
這邊是讓 cube 不停的旋轉：
cube.rotation.x += 0.01; cube.rotation.y += 0.01;
利用不停呼叫 animate 並執行 requestAnimationFrame，就可以讓場景不停地渲染並變成動畫了。
完整的程式碼：
官方的第一個範例是建立一個立方體，並讓他在場景中不停的旋轉，這個範例沒有用到光源，所以會看到的是一個單色的立方體在空間中不斷旋轉，之後打上光後看起來就會比較自然了。
參考：
用 Three.js 來當個創世神 (03)：Hello Three.js!
