Three.js 開發指南 : WebGL 的 JavaScript 3D庫 (原書第2版)
內容描述
本書通過大量的交互案例和示例代碼介紹了Three.js提供的各種API，讓讀者不需要瞭解很難編程的WebGL的底層細節及復雜的著色語言，只需大致瞭解JavaScript及HTML，就能輕松地在瀏覽器中創建二維和三維應用及圖形。
本書共12章，涉及以下內容：使用Three.js創建三維場景，構建場景的基本組件，Three.js中的光源、材質、幾何體以及粒子、精靈和點雲，創建和加載網格、幾何體，創建動畫和移動攝像機，加載和使用紋理，自定義著色器和後期處理，在場景中添加物理效果和聲音等。
目錄大綱
目錄Contents
前言
第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 T HREE.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 union函數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
