Three.js開(kāi)發(fā)指南：基于WebGL和HTML5在網(wǎng)頁(yè)上渲染3D圖形和動(dòng)畫(huà)（原書(shū)第3版）

譯者序
前言
第1章　使用Three.js創(chuàng)建你的個(gè)三維場(chǎng)景1
1.1　準(zhǔn)備工作3
1.2　獲取源碼5
1.2.1　通過(guò)Git獲取代碼倉(cāng)庫(kù)5
1.2.2　下載并解壓縮檔案文件5
1.2.3　測(cè)試示例6
1.3　搭建HTML框架9
1.4　渲染并查看三維對(duì)象10
1.5　添加材質(zhì)、光源和陰影效果14
1.6　讓你的場(chǎng)景動(dòng)起來(lái)16
1.6.1　引入requestAnimationFrame()方法16
1.6.2　旋轉(zhuǎn)立方體18
1.6.3　彈跳球19
1.7　使用dat.GUI簡(jiǎn)化試驗(yàn)流程20
1.8　場(chǎng)景對(duì)瀏覽器的自適應(yīng)22
1.9　總結(jié)23
第2章　構(gòu)建Three.js應(yīng)用的基本組件24
2.1　創(chuàng)建場(chǎng)景24
2.1.1　場(chǎng)景的基本功能25
2.1.2　給場(chǎng)景添加霧化效果29
2.1.3　使用overrideMaterial屬性30
2.2　幾何體和網(wǎng)格32
2.2.1　幾何體的屬性和方法32
2.2.2　網(wǎng)格對(duì)象的屬性和方法36
2.3　選擇合適的攝像機(jī)40
2.3.1　正交投影攝像機(jī)和透視投影攝像機(jī)41
2.3.2　將攝像機(jī)聚焦在指定點(diǎn)上45
2.4　總結(jié)46
第3章　學(xué)習(xí)使用Three.js中的光源47
3.1　Three.js中不同種類(lèi)的光源47
3.2　基礎(chǔ)光源48
3.2.1　THREE.AmbientLight48
3.2.2　THREE.SpotLight53
3.2.3　THREE.PointLight58
3.2.4　THREE.DirectionalLight62
3.3　特殊光源63
3.3.1　THREE.HemisphereLight64
3.3.2　THREE.AreaLight65
3.3.3　鏡頭光暈67
3.4　總結(jié)69
第4章　使用Three.js的材質(zhì)70
4.1　理解材質(zhì)的共有屬性71
4.1.1　基礎(chǔ)屬性71
4.1.2　融合屬性73
4.1.3　高級(jí)屬性73
4.2　從簡(jiǎn)單的網(wǎng)格材質(zhì)開(kāi)始74
4.2.1　THREE.MeshBasicMaterial75
4.2.2　THREE.MeshDepthMaterial77
4.2.3　聯(lián)合材質(zhì)79
4.2.4　THREE.MeshNormalMaterial80
4.2.5　在單幾何體上使用多種材質(zhì)82
4.3　高級(jí)材質(zhì)84
4.3.1　THREE.MeshLambertMaterial85
4.3.2　THREE.MeshPhongMaterial86
4.3.3　THREE.MeshStandardMaterial88
4.3.4　THREE.MeshPhysicalMaterial89
4.3.5　用THREE.ShaderMaterial創(chuàng)建自己的著色器89
4.4　線(xiàn)性幾何體的材質(zhì)95
4.4.1　THREE.LineBasicMaterial95
4.4.2　THREE.LineDashedMaterial97
4.5　總結(jié)97
第5章　學(xué)習(xí)使用幾何體99
5.1　Three.js提供的基礎(chǔ)幾何體101
5.1.1　二維幾何體101
5.1.2　三維幾何體109
5.2　總結(jié)120
第6章　高級(jí)幾何體和二元操作122
6.1　THREE.ConvexGeometry122
6.2　THREE.LatheGeometry124
6.3　通過(guò)拉伸創(chuàng)建幾何體125
6.3.1　THREE.ExtrudeGeometry126
6.3.2　THREE.TubeGeometry127
6.3.3　從SVG拉伸129
6.4　THREE.ParametricGeometry131
6.5　創(chuàng)建三維文本133
6.5.1　渲染文本133
6.5.2　添加自定義字體136
6.6　使用二元操作組合網(wǎng)格137
6.6.1　subtract函數(shù)139
6.6.2　intersect函數(shù)142
6.6.3　union函數(shù)143
6.7　總結(jié)143
第7章　粒子和精靈145
7.1　理解粒子145
7.2　THREE.Points和THREE.PointsMaterial148
7.3　使用HTML5畫(huà)布樣式化粒子151
7.3.1　在THREE.CanvasRenderer中使用HTML5畫(huà)布151
7.3.2　在WebGLRenderer中使用HTML5畫(huà)布152
7.4　使用紋理樣式化粒子155
7.5　使用精靈貼圖160
7.6　從高級(jí)幾何體創(chuàng)建THREE.Points163
7.7　總結(jié)165
第8章　創(chuàng)建、加載高級(jí)網(wǎng)格和幾何體166
8.1　幾何體組合與合并166
8.1.1　對(duì)象組合166
8.1.2　將多個(gè)網(wǎng)格合并成一個(gè)網(wǎng)格168
8.2　從外部資源加載幾何體170
8.2.1　以Three.js的JSON格式保存和加載171
8.2.2　使用Blender177
8.3　導(dǎo)入三維格式文件181
8.3.1　OBJ和MTL格式181
8.3.2　加載Collada模型185
8.3.3　從其他格式的文件中加載模型186
8.3.4　展示蛋白質(zhì)數(shù)據(jù)銀行中的蛋白質(zhì)190
8.3.5　從PLY模型中創(chuàng)建粒子系統(tǒng)192
8.4　總結(jié)194
第9章　創(chuàng)建動(dòng)畫(huà)和移動(dòng)攝像機(jī)195
9.1　基礎(chǔ)動(dòng)畫(huà)195
9.1.1　簡(jiǎn)單動(dòng)畫(huà)196
9.1.2　選擇對(duì)象197
9.1.3　使用Tween.js實(shí)現(xiàn)動(dòng)畫(huà)198
9.2　使用攝像機(jī)201
9.2.1　軌跡球控制器202
9.2.2　飛行控制器204
9.2.3　視角控制器205
9.2.4　軌道控制器207
9.3　變形動(dòng)畫(huà)和骨骼動(dòng)畫(huà)208
9.3.1　用變形目標(biāo)創(chuàng)建動(dòng)畫(huà)209
9.3.2　用骨骼和蒙皮創(chuàng)建動(dòng)畫(huà)217
9.4　使用外部模型創(chuàng)建動(dòng)畫(huà)220
9.4.1　使用Blender創(chuàng)建骨骼動(dòng)畫(huà)220
9.4.2　從Collada模型加載動(dòng)畫(huà)223
9.4.3　從雷神之錘模型中加載動(dòng)畫(huà)225
9.4.4　使用gltfLoader225
9.4.5　利用fbxLoader顯示動(dòng)作捕捉模型動(dòng)畫(huà)227
9.4.6　通過(guò)xLoader加載古老的DirectX模型228
9.4.7　利用BVHLoader顯示骨骼動(dòng)畫(huà)230
9.4.8　如何重用SEA3D模型231
9.5　總結(jié)232
第10章　加載和使用紋理233
10.1　將紋理應(yīng)用于材質(zhì)233
10.1.1　加載紋理并應(yīng)用到網(wǎng)格233
10.1.2　使用凹凸貼圖創(chuàng)建褶皺238
10.1.3　使用法向貼圖創(chuàng)建更加細(xì)致的凹凸和褶皺239
10.1.4　使用移位貼圖來(lái)改變頂點(diǎn)位置240
10.1.5　用環(huán)境光遮擋貼圖實(shí)現(xiàn)細(xì)節(jié)陰影241
10.1.6　用光照貼圖產(chǎn)生假陰影243
10.1.7　金屬光澤度貼圖和粗糙度貼圖244
10.1.8　Alpha貼圖246
10.1.9　自發(fā)光貼圖247
10.1.10　高光貼圖248
10.1.11　使用環(huán)境貼圖創(chuàng)建偽鏡面反射效果250
10.2　紋理的高級(jí)用途255
10.2.1　自定義UV映射255
10.2.2