Three.js開發(fā)指南：基于WebGL和HTML5在網(wǎng)頁上渲染3D圖形和動(dòng)畫（原書第3版）
定 價(jià)：99 元
叢書名：Web開發(fā)技術(shù)叢書
- 作者：[美]喬斯·德克森（Jos Dirksen ）
- 出版時(shí)間：2019/7/1
- ISBN：9787111628842
- 出 版 社：機(jī)械工業(yè)出版社
- 中圖法分類：TP312JA
- 頁碼：
- 紙張：膠版紙
- 版次：
- 開本：16開
本書將介紹如何直接在瀏覽器中創(chuàng)建漂亮的3D場景和動(dòng)畫，并且充分發(fā)揮WebGL和現(xiàn)代瀏覽器的潛能。首先介紹基本概念和基礎(chǔ)組件，然后通過逐漸擴(kuò)展示例代碼逐步深入講解更多高級(jí)技術(shù)。在本書中讀者將學(xué)到如何從外部加載3D模型和具有真實(shí)效果的材質(zhì)紋理、學(xué)習(xí)使用Three.js提供的攝像機(jī)組件來實(shí)現(xiàn)在3D場景中飛行和走動(dòng)、如何將HTML5視頻和畫布作為材質(zhì)貼在3D模型表面。此外還將學(xué)習(xí)變形動(dòng)畫和骨骼動(dòng)畫，甚至還會(huì)涉及在場景中使用物理模擬的方法，例如重力、碰撞檢測等等。
現(xiàn)代瀏覽器都支持WebGL，這樣不必使用Flash、Java等插件就能在瀏覽器中創(chuàng)建三維圖形。然而，直接使用WebGL在瀏覽器中創(chuàng)建三維圖形和動(dòng)畫也非常繁瑣，它所提供的各種接口盡管非常豐富且強(qiáng)大，但對(duì)于用戶來說未免過于復(fù)雜了。
Three.js的出現(xiàn)則完美地幫助人們解決了這個(gè)矛盾。Three.js將WebGL的強(qiáng)大功能融匯其中，同時(shí)又非常易于使用，即便用戶對(duì)其中的原理不甚了解，也能借助Three.js創(chuàng)建出絢麗多姿的三維場景和動(dòng)畫。
本書先從基本概念和Three.js的基本模塊講起，然后伴隨著大量的示例和代碼，逐步擴(kuò)展到更多的主題，循序漸進(jìn)地講解Three.js的各種功能，幫助你充分利用WebGL和現(xiàn)代瀏覽器的潛能，直接在瀏覽器中創(chuàng)建動(dòng)態(tài)的華麗場景。
通過閱讀本書，你將學(xué)會(huì)：
使用Three.js提供的各種材質(zhì)并了解它們?nèi)绾闻c3D模型和場景相互作用
通過Three.js提供的各種攝像機(jī)控制功能，在三維場景中輕松導(dǎo)航
通過直接操作頂點(diǎn)實(shí)現(xiàn)雨、雪以及宇宙星系效果
導(dǎo)入OBJ、STL、COLLADA等外部格式的模型和創(chuàng)建動(dòng)畫效果
創(chuàng)建和運(yùn)行基于形態(tài)和框架的動(dòng)畫
在材質(zhì)上應(yīng)用高級(jí)紋理（凹凸貼圖、法向貼圖、高光貼圖和光照貼圖），創(chuàng)建逼真的三維圖形
使用Physijs這個(gè)JavaScript庫，實(shí)現(xiàn)三維物體的物理效果
創(chuàng)建自定義頂點(diǎn)和片段著色器，實(shí)現(xiàn)與WebGL的直接交互
在最近的幾年中，瀏覽器的功能變得愈發(fā)強(qiáng)大，并且成為展現(xiàn)復(fù)雜的應(yīng)用和圖形的平臺(tái)。然而其中大部分都是標(biāo)準(zhǔn)的二維圖形。大多數(shù)現(xiàn)代瀏覽器已經(jīng)支持WebGL，不僅可以在瀏覽器端創(chuàng)建二維應(yīng)用和圖形，而且可以通過GPU的功能創(chuàng)建好看并且運(yùn)行良好的三維應(yīng)用。
然而，直接使用WebGL編程還是很復(fù)雜的。編程者需要知道WebGL的底層細(xì)節(jié)，并且學(xué)習(xí)復(fù)雜的著色語言來獲得WebGL的大部分功能。Three.js提供了一個(gè)很簡單的關(guān)于WebGL特性的JavaScript API，所以用戶不需要詳細(xì)地學(xué)習(xí)WebGL，就能創(chuàng)作出好看的三維圖形。
Three.js為直接在瀏覽器中創(chuàng)建三維場景提供了大量的特性和API。閱讀這本書，讀者將通過許多交互示例和示例代碼學(xué)習(xí)Three.js提供的各種API。
本書內(nèi)容
第1章介紹使用Three.js的基本步驟。閱讀完本章就能立刻創(chuàng)建你的第一個(gè)Three.js場景，也能直接在瀏覽器中創(chuàng)建你的第一個(gè)三維場景并讓它動(dòng)起來。
第2章解釋使用Three.js時(shí)需要了解的基本組件。將介紹燈光、網(wǎng)格、幾何形狀、材質(zhì)和攝像機(jī)。閱讀本章，讀者也將對(duì)Three.js提供的不同燈光和在場景中使用的攝像機(jī)有一個(gè)大概的印象。
第3章深入介紹可以在場景中使用的不同燈光。本章會(huì)通過示例講解如何使用聚光燈、平行光、環(huán)境光、點(diǎn)光源、半球光和區(qū)域光。此外，本章還會(huì)展示如何使用鏡頭光暈來影響光源。
第4章講述Three.js中可在網(wǎng)格中使用的材質(zhì)。本章展示可以設(shè)置的所有屬性，并且提供不同的交互示例來闡述Three.js中可用的材質(zhì)。
第5章講述Three.js中的幾何體。本章將介紹如何在Three.js中創(chuàng)建和配置幾何體，并且提供了幾何體的交互示例，包括平面、圓形、任意圖形、長方體、球體、圓柱體、圓環(huán)、環(huán)狀扭結(jié)和多面體。
第6章接著第5章講解如何使用幾何體。本章介紹如何配置和使用Three.js提供的更高級(jí)的幾何體，如凸面體和旋轉(zhuǎn)體。在本章，你還能學(xué)到如何從二維形狀拉伸出三維幾何體，并且學(xué)會(huì)通過二元操作來組合幾何體，從而創(chuàng)建出一個(gè)新的幾何體。
第7章解釋如何使用Three.js中的精靈和粒子，介紹從頭開始或者通過現(xiàn)有的幾何體來創(chuàng)建一個(gè)粒子系統(tǒng)。這一章還介紹如何使用精靈或點(diǎn)云材質(zhì)來改變單個(gè)點(diǎn)的外觀。
第8章介紹如何通過外部資源導(dǎo)入網(wǎng)格和幾何體，以及如何使用Three.js內(nèi)置的JSON格式來保存幾何體和場景。本章還會(huì)解釋如何加載不同格式的模型，如OBJ、DAE、STL、CTM、PLY等。
第9章展示可以讓場景動(dòng)起來的各種動(dòng)畫，包括如何組合使用Tween.js庫和Three.js，以及如何使用基于變形和骨骼的動(dòng)畫模型。
第10章延續(xù)第4章的內(nèi)容—使用Three.js材質(zhì)。在第4章已經(jīng)初步介紹了材質(zhì)，本章著重介紹現(xiàn)有的各種材質(zhì)以及如何把材質(zhì)應(yīng)用到網(wǎng)格中。另外，本章還介紹如何直接使用HTML5中的視頻元素和畫布元素作為材質(zhì)來源。
第11章展示如何使用Three.js對(duì)已經(jīng)渲染過的場景進(jìn)行后期處理。通過后期處理，你可以將模糊、傾斜移位和著色等效果添加到已經(jīng)渲染過的場景中。除此之外，本章還介紹如何創(chuàng)建自己的后期處理效果、自定義的頂點(diǎn)和片段著色器。
第12章解釋如何將物理效果添加到Three.js場景中。通過物理效果，你能檢測物體之間的碰撞，使物體對(duì)重力有響應(yīng)，以及應(yīng)用摩擦力。本章會(huì)展示如何用Physijs JavaScript庫實(shí)現(xiàn)這些效果。此外，本章還會(huì)展示如何在Three.js場景中添加聲音。
本書的使用要求
使用本書只需稍微了解JavaScript，并按照第1章的指導(dǎo)搭建一個(gè)本地的網(wǎng)絡(luò)服務(wù)器和獲取書中使用的示例。
面向的讀者
這本書對(duì)于每一個(gè)知道JavaScript并且想要在瀏覽器中創(chuàng)建運(yùn)行的三維圖形的人來說都是很棒的。你不需要知道任何高級(jí)的數(shù)學(xué)知識(shí)或WebGL，所需的只是對(duì)JavaScript和HTML有大致的了解。書中所需要的材料和示例都可以免費(fèi)下載，所用的工具都是開源的。所以，如果你想創(chuàng)建可以在任何現(xiàn)代瀏覽器中運(yùn)行的交互的三維圖形，這本書就適合你。
下載示例代碼及彩圖
本書的示例代碼及彩圖，可從http://www.packtpub.com通過個(gè)人賬號(hào)下載，也可以訪問華章公司官網(wǎng)http://www.hzbook.com，通過注冊(cè)并登錄個(gè)人賬號(hào)下載。
譯者序
前言
第1章 使用Three.js創(chuàng)建你的第一個(gè)三維場景1
1.1 準(zhǔn)備工作3
1.2 獲取源碼5
1.2.1 通過Git獲取代碼倉庫5
1.2.2 下載并解壓縮檔案文件5
1.2.3 測試示例6
1.3 搭建HTML框架9
1.4 渲染并查看三維對(duì)象10
1.5 添加材質(zhì)、光源和陰影效果14
1.6 讓你的場景動(dòng)起來16
1.6.1 引入requestAnimationFrame()方法16
1.6.2 旋轉(zhuǎn)立方體18
1.6.3 彈跳球19
1.7 使用dat.GUI簡化試驗(yàn)流程20
1.8 場景對(duì)瀏覽器的自適應(yīng)22
1.9 總結(jié)23
第2章 構(gòu)建Three.js應(yīng)用的基本組件24
2.1 創(chuàng)建場景24
2.1.1 場景的基本功能25
2.1.2 給場景添加霧化效果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中不同種類的光源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 從簡單的網(wǎng)格材質(zhì)開始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 線性幾何體的材質(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 通過拉伸創(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畫布樣式化粒子151
7.3.1 在THREE.CanvasRenderer中使用HTML5畫布151
7.3.2 在WebGLRenderer中使用HTML5畫布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)畫和移動(dòng)攝像機(jī)195
9.1 基礎(chǔ)動(dòng)畫195
9.1.1 簡單動(dòng)畫196
9.1.2 選擇對(duì)象197
9.1.3 使用Tween.js實(shí)現(xiàn)動(dòng)畫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)畫和骨骼動(dòng)畫208
9.3.1 用變形目標(biāo)創(chuàng)建動(dòng)畫209
9.3.2 用骨骼和蒙皮創(chuàng)建動(dòng)畫217
9.4 使用外部模型創(chuàng)建動(dòng)畫220
9.4.1 使用Blender創(chuàng)建骨骼動(dòng)畫220
9.4.2 從Collada模型加載動(dòng)畫223
9.4.3 從雷神之錘模型中加載動(dòng)畫225
9.4.4 使用gltfLoader225
9.4.5 利用fbxLoader顯示動(dòng)作捕捉模型動(dòng)畫227
9.4.6 通過xLoader加載古老的DirectX模型228
9.4.7 利用BVHLoader顯示骨骼動(dòng)畫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 使用移位貼圖來改變頂點(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
書單推薦
