Three.js 開發指南 : WebGL 的 JavaScript 3D庫 (原書第2版) Three.js开发指南:WebGL的JavaScript 3D库(原书第2版)

目錄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