基本介紹
- 中文名：Three.js開發指南
- 作者：[美] 喬斯·德克森
- 出版社：機械工業出版社
- ISBN：9787111570134
內容簡介,圖書目錄,
內容簡介
本書通過大量的互動案例和示例代碼介紹了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
