《Three.js 開發指南》源碼示例說明以及在線demo（原書第二版）附第三版的代碼下載

《Three.js 開發指南》基於原書第二版
源碼來自華章出版社官網隨書源碼，修改替換了其中不能跑的示例，保證每個demo都可以運行。
源碼以及示例說明下載： git下載地址
huazhang目錄下是第二版的修改源碼。 huazhang3目錄下面是第三版的源碼。
第二版和第三版大同小異，第二版的three.js版本是69，第三版的版本是95。

Three.js 官網文檔

1. 用Three.js創建你的第一個三維場景

1.1 具有所有基本元素的hello world示例

2. 使用構建Three.js場景的基本組件

2.1 添加、刪除、枚舉、通過名字獲取場景中的對象

2.2 霧化效果

2.3 材質效果覆蓋

場景對象最重要的函數和屬性的總結

2.4 three.js內建的幾何體

2.5 自定義幾何體，複製幾何體

2.6 網格對象的函數和屬性 position, rotation, scale, translate, visible

2.7 正投影相機和透視相機


          if (camera instanceof THREE.PerspectiveCamera) {
              camera = new THREE.OrthographicCamera(window.innerWidth / -16, window.innerWidth / 16, window.innerHeight / 16, window.innerHeight / -16, -200, 500);
              camera.position.x = 120;
              camera.position.y = 60;
              camera.position.z = 180;
              camera.lookAt(scene.position);

              trackballControls = initTrackballControls(camera, renderer);
              this.perspective = "Orthographic";
          } else {
              camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
              camera.position.x = 120;
              camera.position.y = 60;
              camera.position.z = 180;

              camera.lookAt(scene.position);
              trackballControls = initTrackballControls(camera, renderer);
              this.perspective = "Perspective";
          }

2.8 讓相機在指定點上聚焦

camera.lookAt( new THREE.Vector3(x, y, z));

3 . 學習使用Three.js中的光源

新版本Three.js中PointLight已經可以創建陰影。

詳細參數可以參考：
three.js光源使用詳解

顏色對象方法可參考：
THREE.Color顏色對象詳解

3.1 AmbientLight環境光

3.2 PointLight 點光源

3.3 SpotLight 聚光燈

3.4 DirectionalLight 方向光

3.5 HemisphereLight 半球環境光

3.6 AreaLight 區域光

3.7 LensflaresLight 光暈光

4. 使用Three.js的材質

參數配置看這裏： Three.js - 材質的使用參數詳解

4. 1 MeshBasicMaterial 網格基礎材質

4. 2 MeshDepthMaterial 網格深度材質，顏色與離開相機的距離相關。

4. 3 材質結合：基礎材質 + 深度材質

4. 4 MeshNormalMaterial 網格法向材質, 法向材質可以將材質的顏色設置爲其法向量的方向，有時候對於調試很有幫助。

4. 5 MeshFaceMaterial 網格面材質，可以指定每個面使用的材質。

4. 6 MeshLambertMaterial 網格lambert材質， Lambert光照模型的主要特點是隻考慮漫反射而不考慮鏡面反射的效果，因而對於金屬、鏡子等需要鏡面反射效果的物體就不適應，對於其他大部分物體的漫反射效果都是適用的。效果示例

4. 7 MeshPhongMaterial 網格phong材質，和Lambert不同的是，Phong模型考慮了鏡面反射的效果，因此對於金屬、鏡面的表現尤爲適合。效果示例

4. 8 ShaderMaterial 着色器材質, glsl自定義材質，

4. 9 LineBasicMaterial 直線基礎材質

4. 10 LineDashMaterial 虛線材質

着色器資源, 創建和分享着色器的好網站： http://glslsandbox.com/和https://www.shadertoy.com

5. 學習使用幾何體

簡單的參數可以看這裏

5. 1 二維幾何體

5.1.1 PlaneGeometry 二維矩形

5.1.2 CircleGeometry 二維圓

5.1.3 RingGeometry 二維環

5.1.4 ShapeGeometry 自定義二維圖形, 可以通過一些函數畫出二維圖形。自定義參數示例

5. 2 三維幾何體

5.2.1 BoxGeometry 長方體

5.2.2 SphereGeometry 球體可以通過設置參數獲得特殊的多面體,半球，傘形

5.2.3 CylinderGeometry 圓柱體可以通過參數獲得多邊形柱體

5.2.4 TorusGeometry 三維圓環

5.2.5 TorusKnotGeometry 環狀扭結

5.2.6 各種多面體

其實幾何體還有線性幾何體，可以看上一章。

6. 高級幾何體和二元操作

這一章非常實用，介紹了很多將一維和二維的幾何體轉化爲三維的方法。以及三維幾何體合併、相減、相交等操作。對數據可視化應該比較有用。

6.1 ConvexGeometry 凸包幾何體包含三維點集的多面體詳細參數設置

6.2 LatheGeometry 通過旋轉創建幾何體讓一根曲線繞Z軸旋轉一週，創建幾何體詳細參數設置

6.3 ExtrudeGeometry 讓一個平面形狀沿某一根曲線拉伸，創建幾何體詳細參數設置

6.4 TubeGeometry 管道幾何體，讓某一根曲線變粗，創建幾何體詳細參數設置

6.5 把svg拉伸讓一個svg平面形狀沿某一根曲線拉伸，創建幾何體詳細參數設置，依賴於d3-threeD.js庫

6.6 ParametricGeometry 參數化幾何體，通過設置函數，創建各種幾何體詳細參數設置

6.7 textGeometry 文字幾何體詳細參數設置示例中是老版本threejs的js文字方式，參數設置中是新版本的json文字方式 typeface在線字體庫獲取相關字體文件

6.8 幾何體的二元操作幾何體的合併、相減、相交操作詳細參數設置依賴於ThreeBSP庫

7. 粒子，sprite和點雲

這一章介紹了兩種粒子系統： sprite和點雲。sprite可以定製每一個粒子的樣式，支持的點比較少。點雲可以定製一羣粒子的材質，支持的點更多；點雲只可以定製單個粒子的顏色，單個粒子其他的屬性都是通過修改材質統一設置的。粒子的位置在sprite和點雲中都可以單獨修改。

7.1 理解粒子

7.2 粒子顏色

7.3 點雲基礎

7.4 sprite + canvasRenderer 通過代碼繪製canvas內容，並設置爲THREE.SpriteCanvasMaterial的program屬性值。

7.5a pointCloud + webglRenderer 通過代碼繪製canvas內容，並設置爲THREE.PointCloudMaterial的map屬性值。

7.5b sprite + webglRenderer 通過代碼繪製canvas內容，並設置爲THREE.SpriteMaterial的map屬性值。

7.6 雨滴單個紋理使用紋理圖片來設置THREE.PointCloudMaterial的map屬性值。

7.7 雪花多個紋理使用多個紋理圖片來創建多個pointCloud。

7.8 sprite 使用大紋理圖片的一部分

7.9 sprite 使用大紋理圖片的多個部分

7.10 利用幾何體模型的結點創建粒子系統

8. 創建、加載高級網格和幾何體

這一章介紹了 1. 如何組合幾何體。如果說第7章的粒子中的最小單元是平面的，那麼這一章最小單元就是立體的。group之於merge, 有點類似於sprite之於pointCloud。 2. 如何加載三維模型文件。Blender是一個開源的製作三維幾何體的軟件，介紹瞭如何從Blender導出三維模型文件。
多種格式的比較和說明

8.1 group 組 group可以把多個object組合成一個object, 並對合成的object進行統一的位移、旋轉、縮放操作。使用組的時候，還可以單獨引用、修改、定位每一個單獨的幾何體，唯一需要注意的是，所有的位移、旋轉、縮放操作都是相對於父對象的。

8.2 merge 合併 merge可以把多個幾何體合併成一個幾何體。內部的幾何體共享一個材質。無法單獨控制。merge的性能優於group，書中說可以提升5倍。

8.3 json object導入導出

8.4 json scene導入導出

8.5 blender 模型導出並顯示

8.6 obj格式

8.7 obj-mtl格式

8.8 collada(.dae)格式

8.9 stl格式

8.10 ctm格式

8.11 vtk格式

8.12 pdb格式

8.13 PLY格式粒子效果示例

8.14 awd格式

8.15 assimp格式

8.16 vrml格式

8.17 babylon格式 babylon可以整個scene導入

9. 創建動畫和移動攝像機

RequestAnimationFrame 實現動畫。 Tween.js實現補間。光線追蹤實現交互。各種內置控制器。變形和骨骼動畫。

9.1.1 簡單動畫

9.1.2 選擇對象

9.1.3 使用tween.js實現動畫

9.2.1 軌跡球控制器

9.2.2 飛行控制器

9.2.3 翻滾控制器

9.2.4 第一視角控制器

9.2.5 軌道控制器

適合用來做地球的3D控制

9.3 變形動畫和骨骼動畫

9.3.1 用變形目標創建動畫

9.3.1.1 用MorphAnimMesh創建動畫需要帶有變形目標的模型

9.3.1.2 通過設置morphTargetInfluence創建動畫通過代碼創建變形目標

9.3.2 用骨骼和蒙皮來創建動畫

9.4 使用外部模型創建動畫

9.4.1 用Blender創建骨骼動畫

9.4.2 用Collada創建骨骼動畫

9.4.3 用md2創建骨骼動畫

10. 加載和使用紋理

10.1 加載紋理並應用到網格

dds格式紋理 pvr格式紋理 tga格式紋理

10.2 凹凸貼圖

bump map這種貼圖是一種灰度圖，用表面上灰度的變化來描述目標表面的凹凸。Bump Map並沒有改變物體的表面而只是影響光照的結果。把Bump Map疊加在已經渲染好的表面上，造成亮度上的擾動，從而讓人以爲是凹凸的。更多貼圖相關原理

10.3 法向量貼圖

normal-map圖中存儲的東西是每個原始表面法線的迭代。使用Normal Map的先決條件－－逐像素著色。引入NormalMap。這時光照計算和以往有點不同，把表面的法線用NormalMap中存儲的法線來替代。這樣當我們在計算表面光照情況的時候，就會因爲法線不斷的變化而產生比原來豐富的多的明暗變化。至於爲什麼會感覺出凹凸來這個就是人的眼睛自己騙自己了……其實那裏本沒有凹凸。

10.4 用光照貼圖創建陰影效果用陰影貼圖來模擬陰影。只能用於靜態場景。

10.5 用環境貼圖創建反光效果（靜態），用環境貼圖創建反光效果（動態）

10.6 高光貼圖地球的海洋部分可以用反光更亮的部分來修飾。

10.7 自定義紋理映射 blender等建模軟件可以設置uv映射，導出不同的obj文件。 Three.js也可以設置UV映射

10.8 重複紋理

10.9 使用canvas作爲紋理

var canvas = document.createElement("canvas");
var canvasMap = new THREE.Texture(canvas);
var mat = new THREE.MeshPhongMaterial();
mat.map = canvasMap;
var mesh = new THREE.Mesh(geom, mat);

10.10 將畫布作爲凹凸貼圖

10.11 將視頻輸出作爲紋理 , 使用Three.VideoTexture的簡化版本

var video = document.getElementById('video');
texture = new THREE.VideoTexture(video);

11. 自定義着色器和後期處理

這一章主要講了後期處理。可以對Three.js 輸出的畫面做一些After Effect 特效，比如模糊、電影、泛光等等，對提升視覺品質有很好的效果。各種不同的特效感覺像ps的濾鏡，需要比較熟悉才能運用好。最後還介紹了用自定義着色器才製作後期特效。自定義着色器也可應通過第4章4.8中的自定義材質來實現。

11.1 配置Three.js以進行後期處理 THREE.EffectComposer基礎示例

11.2 後期處理通道

11.2.1 簡單後期處理通道這個示例分別展示了FilmPass的電視效果，BloomPass的泛光效果，DotScreenPass的點集效果，以及三者的融合效果。

GlitchPass電脈衝效果

11.2.2 使用掩碼的高級效果組合器

地球與火星 maskPass可以對單獨的物體做後期處理，比如地球和火星有不同的後期處理特效。

11.2.3 使用THREE.ShaderPass自定義效果

ShaderPass裏面可以設置shader，達到不同的效果。這些Shader都以Shader結尾。
shader合集
 shader模糊效果
 更多高級的shader效果

11.3 創建自定義後期處理着色器自定義的shader效果

12. 在場景中添加物理效果和聲音

這一章主要講物理碰撞檢測庫Physijs, 它是一個three.js的配套庫，在物理碰撞引擎ammo.js或者cannon.js上做了一層封裝，方便three.js調用。

12.1創建基本的Three.js場景

多米諾骨牌

12.2 材質屬性設置物理的摩擦係數和彈性

12.3 基礎圖形 Physijs默認封裝了不少網格幾何體

12.4 使用約束限制對象的移動 PointConstraint限制對象在兩點間移動；HingeConstraint創建類似門的約束；SlideConstraint將移動限制在一個軸上；ConeTwistConstraint創建類似於球銷的約束。

運動的四輪小車 DOFConstraint實現細節的控制

12.4.6 在場景中添加聲源幾何體上綁定聲源，camera上綁定聽筒，聲音的大小隨着距離的遠近而變化。