內容簡介
本書通過大量的交互案例和示例代碼介紹瞭Three.js提供的各種API,讓讀者不需要瞭解很難編程的WebGL的底層細節及復雜的著色語言,隻需大緻瞭解JavaScript及HTML,就能輕鬆地在瀏覽器中創建二維和三維應用及圖形。本書共12章,涉及以下內容:使用Three.js創建三維場景,構建場景的基本組件,Three.js中的光源、材質、幾何體以及粒子、精靈和點雲,創建和加載網格、幾何體,創建動畫和移動攝像機,加載和使用紋理,自定義著色器和後期處理,在場景中添加物理效果和聲音等。
目錄
前言
第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 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
12.
前言/序言
在最近的幾年中,瀏覽器的功能變得愈發強大,並且成為展現復雜的應用和圖形的平颱。然而其中的大部分都是標準的二維圖形。大多數現代瀏覽器已經支持WebGL,不僅可以在瀏覽器端創建二維應用和圖形,而且可以通過GPU的功能創建好看並且運行良好的三維應用。
然而,直接使用WebGL編程還是很復雜的。編程者需要知道WebGL的底層細節,並且學習復雜的著色語言來獲得WebGL的大部分功能。Three.js提供一個很簡單的關於WebGL特性的JavaScript API,所以用戶不需要詳細地學習WebGL,就能創作齣好看的三維圖形。
Three.js為直接在瀏覽器中創建三維場景提供瞭大量的特性和API。閱讀這本書,讀者將通過許多交互案例和示例代碼學習Three.js提供的各種API。
本書內容第1章介紹使用Three.js的基本步驟。閱讀完本章就能立刻創建你的第一個Three.js場景,也能直接在瀏覽器中創建你的第一個三維場景並讓它動起來。
第2章解釋瞭使用Three.js時需要瞭解的基本組件。將介紹燈光、網格、幾何形狀、材質和攝像機。閱讀本章,讀者也將對Three.js提供的不同燈光和在場景中使用的攝像機有一個大概的印象。
第3章深入介紹可以在場景中使用的不同燈光。本章通過示例講解瞭如何使用聚光燈、平行光、環境光、點光源、半球光和區域光。此外,本章還展示瞭如何使用鏡頭光暈來影響光源。
第4章講述Three.js中可在網格中使用的材質。本章展示瞭可以設置的所有屬性,並且提供瞭不同的交互示例來闡述Three.js中可用的材質。
第5章講述Three.js中的幾何體。本章將介紹如何在Three.js中創建和配置幾何體,並且提供瞭幾何體的交互示例,包括平麵、圓形、任意圖形、長方體、球體、圓柱體、圓環、環狀扭結和多麵體。
第6章接著第5章講解如何使用幾何體。本章介紹如何配置和使用Three.js提供的更高級的幾何體,如凸麵體和Lathe。在本章,你還能學到如何從二維形狀拉伸齣三維幾何體,並且學會通過二元操作來組閤幾何體,從而創建齣一個新的幾何體。
第7章介紹從頭開始或者通過現有的幾何體來創建一個粒子係統。這一章還介紹瞭如何使用精靈或點雲材質來改變單個點的外觀。
第8章介紹如何通過外部資源導入網格和幾何體,以及如何使用Three.js內置的JSON格式來保存幾何體和場景。本章還會解釋如何加載不同格式的模型,如OBJ、DAE、STL、CTM、PLY等。
第9章展示可以讓場景動起來的各種動畫,包括如何組閤使用Tween.js庫和Three.js,以及如何使用基於形態和框架的動畫模型。
第10章延續第4章的內容—使用Three.js材質。在第4章已經初步介紹瞭材質,本章著重介紹現有的各種材質以及如何把材質應用到網格中。另外,本章還介紹瞭如何直接使用HTML5中的視頻元素和畫布元素作為材質的輸入。
第11章展示如何使用Three.js對已經渲染過的場景進行後期處理。通過後期處理,你可以將模糊、傾斜移位和著色等效果添加到已經渲染過的場景中。除此之外,本章還介紹瞭如何創建自己的後期處理效果、自定義的頂點和片段著色器。
第12章解釋如何將物理效果添加到Three.js場景中。通過物理效果,你能檢測物體之間的碰撞,使物體對重力有響應,以及應用摩擦力。本章展示瞭如何用Physijs JavaScript庫實現這些效果。此外,本章還展示瞭如何在Three.js場景中添加聲音。
本書的使用要求使用本書隻需一個能夠“玩轉”你的例子的文本編輯器(如Sublime)和能夠顯示這些例子的現代瀏覽器。有些例子會需要一個本地的網絡服務器,你可以在本書第1章中學會如何搭建一個輕量級的網絡服務器以使用書中的例子。
麵嚮的讀者這本書對於每一個知道JavaScript並且想要在瀏覽器中創建運行的三維圖形的人來說都是很棒的。你不需要知道任何高級的數學知識或WebGL,所需的隻是對JavaScript和HTML有大緻的瞭解。書中所需要的材料和示例都可以免費下載,所用的工具都是開源的。所以,如果你想創建可以在任何現代瀏覽器中運行的交互的三維圖形,這本書就適閤你。
讀者反饋我們一直歡迎讀者的反饋。讀者反饋讓我們知道你對這本書的想法—你是否喜歡。讀者反饋對我們非常重要,因為它能幫助我們開發讀者真正想要的主題。
你可以簡單地發一封郵件,在郵件標題中標明本書的標題。
如果你在某個主題方麵十分專業並且有興趣寫書,可以在查看我們的作者指南。
客戶支持現在你已經擁有一本Packet書瞭,我們有很多東西可以幫助你,希望你能從這次購買中得到最大的價值。
下載源碼你可以訪問http://www.packtpub.com並通過你的賬號下載所購買的Packt圖書的所有示例源碼。如果你是在彆的地方購買的圖書,也可以訪問並注冊,我們會直接將示例代碼通過電子郵件發送給你。
下載本書的彩圖我們同樣提供瞭一個PDF文件,其中保存瞭書中用到的所有截圖或圖錶的彩色圖片。這些彩圖會幫助你更好地理解輸齣結果的變化。
Three.js開發指南:WebGL的JavaScript 3D庫(原書第2版) 下載 mobi epub pdf txt 電子書