[Three.js] 概述與第一個範例

先用第一個簡單的範例讓大家看一下 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 Create a scene

用 Three.js 來當個創世神 (03)：Hello Three.js!