前言
第1章　使用Three. js創建你的第一個三維場景1
1.1　準備工作4
1.2　獲取源碼5
1.2.1　通過Git獲取代碼倉庫5
1.2.2　下載並解壓縮檔案文件5
1.2.3　測試示例6
1.3　搭建HTML框架9
1.4　渲染並查看三維對象10
1.5　添加材質、光源和陰影效果14
1.6　讓你的場景動起來16
1.6.1　引入requestAnimationFrame()方法16
1.6.2　鏇轉立方體17
1.6.3　彈跳球18
1.7　使用dat.GUI簡化試驗流程19
1.8　場景對瀏覽器的自適應21
1.9　總結22
第2章　構建Three.js場景的基本組件23
2.1　創建場景23
2.1.1　場景的基本功能24
2.1.2　給場景添加霧化效果29
2.1.3　使用overrideMaterial屬性30
2.2　幾何體和網格31
2.2.1　幾何體的屬性和方法31
2.2.2　網格對象的屬性和方法36
2.3　選擇閤適的攝像機40
2.3.1　正交投影攝像機和透視投影攝像機40
2.3.2　將攝像機聚焦在指定點上44
2.4　總結45
第3章　學習使用Three.js中的光源46
3.1　Three.js中不同種類的光源46
3.2　基礎光源47
3.2.1　THREE.AmbientLight47
3.2.2　THREE.PointLight51
3.2.3　THREE.SpotLight54
3.2.4　THREE.DirectionalLight58
3.3　特殊光源60
3.3.1　THREE.HemisphereLight60
3.3.2　THREE.AreaLight61
3.3.3　鏡頭光暈64
3.4　總結66
第4章　使用Three.js的材質67
4.1　理解材質的共有屬性68
4.1.1　基礎屬性68
4.1.2　融閤屬性69
4.1.3　高級屬性70
4.2　從簡單的網格材質開始70
4.2.1　THREE.MeshBasicMaterial71
4.2.2　THREE.MeshDepthMaterial73
4.2.3　聯閤材質75
4.2.4　THREE.MeshNormalMaterial76
4.2.5　THREE.MeshFaceMaterial78
4.3　高級材質81
4.3.1　THREE.MeshLambertMaterial81
4.3.2　THREE.MeshPhongMaterial82
4.3.3　用THREE.ShaderMaterial創建自己的著色器83
4.4　綫性幾何體的材質89
4.4.1　THREE.LineBasicMaterial89
4.4.2　THREE.LineDashedMaterial91
4.5　總結92
第5章　學習使用幾何體93
5.1　THREE.js提供的基礎幾何體94
5.1.1　二維幾何體94
5.1.2　三維幾何體102
5.2　總結112
第6章　高級幾何體和二元操作113
6.1　THREE.ConvexGeometry113
6.2　THREE.LatheGeometry115
6.3　通過拉伸創建幾何體116
6.3.1　THREE.ExtrudeGeometry117
6.3.2　THREE.TubeGeometry119
6.3.3　從SVG拉伸120
6.3.4　THREE.ParametricGeometry122
6.4　創建三維文本124
6.4.1　渲染文本124
6.4.2　添加自定義字體126
6.5　使用二元操作組閤網格127
6.5.1　subtract函數129
6.5.2　intersect函數132
6.5.3　函數133
6.6　總結134
第7章　粒子、精靈和點雲135
7.1　理解粒子135
7.2　粒子、THREE.PointCloud和THREE.PointCloudMaterial138
7.3　使用HTML5畫布樣式化粒子140
7.3.1　在THREE.CanvasRenderer中使用HTML5畫布140
7.3.2　在WebGLRenderer中使用HTML5畫布142
7.4　使用紋理樣式化粒子144
7.5　使用精靈貼圖149
7.6　從高級幾何體創建THREE.Point Cloud153
7.7　總結155
第8章　創建、加載高級網格和幾何體156
8.1　幾何體組閤與閤並156
8.1.1　對象組閤156
8.1.2　將多個網格閤並成一個網格158
8.1.3　從外部資源中加載幾何體160
8.1.4　以Three.js的JSON格式保存和加載161
8.1.5　使用Blender165
8.1.6　導入三維格式文件169
8.2　總結179
第9章　創建動畫和移動攝像機180
9.1　基礎動畫180
9.1.1　簡單動畫181
9.1.2　選擇對象182
9.1.3　使用Tween.js實現動畫184
9.2　使用攝像機186
9.2.1　軌跡球控製器187
9.2.2　飛行控製器189
9.2.3　翻滾控製器190
9.2.4　第一視角控製器191
9.2.5　軌道控製器192
9.3　變形動畫和骨骼動畫193
9.3.1　用變形目標創建動畫195
9.3.2　用骨骼和濛皮創建動畫198
9.4　使用外部模型創建動畫200
9.4.1　使用Blender創建骨骼動畫201
9.4.2　從Collada模型加載動畫203
9.4.3　從雷神之錘模型中加載動畫204
9.5　總結205
第10章　加載和使用紋理206
10.1　將紋理應用於材質206
10.1.1　加載紋理並應用到網格206
10.1.2　使用凹凸貼圖創建褶皺210
10.1.3　使用法嚮貼圖創建更加細緻的凹凸和褶皺211
10.1.4　使用光照貼圖創建陰影效果212
10.1.5　使用環境貼圖創建反光效果214
10.1.6　高光貼圖218
10.2　紋理的高級用途220
10.2.1　自定義UV映射220
10.2.2　重復紋理222
10.2.3　在畫布上繪製圖案並作為紋理224
10.2.4　將視頻輸齣作為紋理227
10.3　總結229
第11章　自定義著色器和後期處理230
11.1　配置Three.js以進行後期處理230
11.2　後期處理通道233
11.2.1　簡單後期處理通道233
11.2.2　使用掩碼的高級效果組閤器239
11.2.3　使用THREE.ShaderPass自定義效果242
11.3　創建自定義後期處理著色器248
11.3.1　自定義灰度圖著色器248
11.3.2　自定義位著色器251
11.4　總結253
第12章　在場景中添加物理效果和聲音254
12.1　創建基本的Three.js場景254
12.2　材質屬性259
12.3　基礎圖形260
12.4　使用約束限製對象的移動265
12.4.1　使用PointConstraint限製對象在兩點間移動266
12.4.2　使用HingeConstraint創建類似門的約束267
12.4.3　使用SliderConstraint將移動限製在一個軸上269
12.4.4　使用ConeTwistConstraint創建類似球銷的約束270
12.4.5　使用DOFConstraint實現細節的控製272
12.4.6　在場景中添加聲源276
12.5　總結277
· · · · · · (收起)