前言

昨天介紹了 three.js 中的基礎 API。不知道各位對 three.js 用物件導向繼承的方式來使用習不習慣了，前面所提到的 API 會不斷出現在每個範例當中，在繼續往下之前，請確保自己對 API 已經有一定的熟悉程度了。

今天我們要來介紹比較進階的 API 以及使用場景，明天我們會開始用 three.js 的 API 做更精緻的特效。

粒子系統

three.js 當中將粒子（point）系統另外拆出來成一個類別方便使用，原本叫做 Particle，不過改版之後名稱已經改為了(Point) 了。

particleSystem = new THREE.Points( geometry, material );

用法跟一般的 Mesh 建立方式相同。只要在 geometry 物件內加入頂點座標以及大小，particle system 會將你的頂點自動轉換為粒子。

粒子系統在實務上蠻常看到的，大量的粒子搭配適當的動畫就能產生非常精緻的效果。而 Three.js 幫我們處理了一連串複雜的操作。

• points
• fluid
• particles valley

Camera 進階

• CubeCamera CubeCamera 算是 Perspective Camera 的進階版，能夠觀察的角度為 360 度

• StereoCamera 接近人眼觀察方式的 Camera

ShaderMaterial

有時候 three.js 內建的材質中，可能沒有我們所需要的材質，這時候可以透過自己撰寫 shader 方式擴充自己的材質。

在 Three.js 當中，要和 Shader 連結很簡單，只要透過 ShaderMaterial 來連結即可。

systemMaterial = new THREE.ShaderMaterial({
uniforms: {
  color:  { type: 'c', value: new THREE.Color( parameters.color ) },
  height: { type: 'f', value: parameters.height },
},
  vertexShader: vertexShader,
  fragmentShader: fragShader,
}

uniforms 允許你傳值給 shader，不需要像是 gl.attribPointer gl.getAttribLocation 之類落落長的 API 了，透過物件的方式傳值進入比較直覺，代碼數量相對減少許多，而後面的 vertex shader 以及 fragment shader 則是直接將 script string 傳入即可，不必再做 program 連結的動作，交給 Three.js 幫你處理就好，寫起來輕鬆許多，又能夠透過自己（或其他人）的 shader 對特效做擴充。

Loader

在開發中，我們可能會需要紋理貼圖，或是將 3D 模型的頂點匯入到 Javascript 當中，自己處理這些事情非常麻煩，在 webGL 的章節當中，我們也看到了要載入一張圖片，需要花費不少繁複的步驟。

Three.js 有非常多種 Loader，主要的使用方式都是新增一個 Loader 物件之後，再使用 load 方法，例如：

var loader = new THREE.ObjectLoader();

經常使用的有：

• ObjectLoader
• JSONLoader
• FileLoader
• ImageLoader

呼叫 load 函式之後，再回呼當中對載入的數據做操作。

var loader = new THREE.OBJLoader();


loader.load('../../assets/star.obj', function(obj) {
	renderer.render(scene, camera);
  // do something with your object.
	anime();
});

像是業界中常用的 .gae 檔及 obj 檔，有了 Loader 之後，我們可以先在自己喜歡的軟體上（Sketchup Blender）建好模型之後，在統一輸出到 Javascript 當中。

而其他的 Loader 使用方式雷同，這邊就不多贅述了。