作 者:[美]喬斯·德克森(JosDirksen) 著 周翀 張薇 譯
定 價:99
出 版 社:機械工業出版社
出版日期:2018年06月01日
頁 數:317
裝 幀:平裝
ISBN:9787111628842
現代瀏覽器都支持WebGL,這樣不必使用Flash、Java等插件就能在瀏覽器中創建三維圖形。然而,直接使用WebGL在瀏覽器中創建三維圖形和動畫也非常繁瑣,它所提供的各種接口盡管非常豐富且強大,但對於用戶來說未免過於復雜了。 Three.js的出現則完美地幫助人們解決了這個矛盾。Three.js將WebGL的強大功能融彙其中,同時又非常易於使用,即便用戶對其中的原理不甚了解,也能借助Three.js創建出絢麗多姿的三維場景和動畫。 &nb等
●譯者序前言第1章 使用Three.js創建你的第一個三維場景11.1 準備工作31.2 獲取源碼51.2.1 通過Git獲取代碼倉庫51.2.2 下載並解壓縮檔案文件51.2.3 測試示例61.3 搭建HTML框架91.4 渲染並查看三維對像101.5 添加材質、光源和陰影效果141.6 讓你的場景動起來161.6.1 引入requestAnimationFrame()方法161.6.2 旋轉立方體181.6.3 彈跳球191.7 使用dat.GUI簡化試驗流程201.8 場景對瀏覽器的自適應221.9 總結23第2章 構建Three.js應用的基本組件242.1 創建場景242.1.1 場景的基本功能252.1.2 給場景添加霧化效果292.1.3 使用overrideMaterial屬性302.2 幾何體和網格322.2.1 幾何體的屬性和方法322.2.2 網格對像的屬性和方法362.3 選擇合適的攝像機402.3.1 正交投影攝像機和透視投影攝像機412.3.2 將攝像機聚焦在指定點上452.4 總結46第3章 學習使用Three.js中的光源473.1 Three.js中不同種類的光源473.2 基礎光源483.2.1 THREE.AmbientLight483.2.2 THREE.SpotLight533.2.3 THREE.PointLight583.2.4 THREE.DirectionalLight623.3 特殊光源633.3.1 THREE.HemisphereLight643.3.2 THREE.AreaLight653.3.3 鏡頭光暈673.4 總結69第4章 使用Three.js的材質704.1 理解材質的共有屬性714.1.1 基礎屬性714.1.2 融合屬性734.1.3 高級屬性734.2 從簡單的網格材質開始744.2.1 THREE.MeshBasicMaterial754.2.2 THREE.MeshDepthMaterial774.2.3 聯合材質794.2.4 THREE.MeshNormalMaterial804.2.5 在單幾何體上使用多種材質824.3 高級材質844.3.1 THREE.MeshLambertMaterial854.3.2 THREE.MeshPhongMaterial864.3.3 THREE.MeshStandardMaterial884.3.4 THREE.MeshPhysicalMaterial894.3.5 用THREE.ShaderMaterial創建自己的著色器894.4 線性幾何體的材質954.4.1 THREE.LineBasicMaterial954.4.2 THREE.LineDashedMaterial974.5 總結97第5章 學習使用幾何體995.1 Three.js提供的基礎幾何體1015.1.1 二維幾何體1015.1.2 三維幾何體1095.2 總結120第6章 高級幾何操作1226.1 THREE.ConvexGeometry1226.2 THREE.LatheGeometry1246.3 通過拉伸創建幾何體1256.3.1 THREE.ExtrudeGeometry1266.3.2 THREE.TubeGeometry1276.3.3 從SVG拉伸1296.4 THREE.ParametricGeometry1316.5 創建三維文本1336.5.1 渲染文本1336.5.2 添加自定義字體1366.6 操作組合網格1376.6.1 subtract函數1396.6.2 intersect函數1426.6.3 union函數1436.7 總結143第7章 粒子和精靈1457.1 理解粒子1457.2 THREE.Points和THREE.PointsMaterial1487.3 使用HTML5畫布樣式化粒子1517.3.1 在THREE.CanvasRenderer中使用HTML5畫布1517.3.2 在WebGLRenderer中使用HTML5畫布1527.4 使用紋理樣式化粒子1557.5 使用精靈貼圖1607.6 從高級幾何體創建THREE.Points1637.7 總結165第8章 創建、加載高級網格和幾何體1668.1 幾何體組合與合並1668.1.1 對像組合1668.1.2 將多個網格合並成一個網格1688.2 從外部資源加載幾何體1708.2.1 以Three.js的JSON格式保存和加載1718.2.2 使用Blender1778.3 導入三維格式文件1818.3.1 OBJ和MTL格式1818.3.2 加載Collada模型1858.3.3 從其他格式的文件中加載模型1868.3.4 展示蛋白質數據銀行中的蛋白質1908.3.5 從PLY模型中創建粒子繫統1928.4 總結194第9章 創建動畫和移動攝像機1959.1 基礎動畫1959.1.1 簡單動畫1969.1.2 選擇對像1979.1.3 使用Tween.js實現動畫1989.2 使用攝像機2019.2.1 軌跡球控制器2029.2.2 飛行控制器2049.2.3 第一視角控制器2059.2.4 軌道控制器2079.3 變形動畫和骨骼動畫2089.3.1 用變形目標創建動畫2099.3.2 用骨骼和蒙皮創建動畫2179.4 使用外部模型創建動畫2209.4.1 使用Blender創建骨骼動畫2209.4.2 從Collada模型加載動畫2239.4.3 從雷神之錘模型中加載動畫2259.4.4 使用gltfLoader2259.4.5 利用fbxLoader顯示動作捕捉模型動畫2279.4.6 通過xLoader加載古老的DirectX模型2289.4.7 利用BVHLoader顯示骨骼動畫2309.4.8 如何重用SEA3D模型2319.5 總結232第10章 加載和使用紋理23310.1 將紋理應用於材質23310.1.1 加載紋理並應用到網格23310.1.2 使用凹凸貼圖創建褶皺23810.1.3 使用法向貼圖創建更加細致的凹凸和褶皺23910.1.4 使用移位貼圖來改變頂點位置24010.1.5 用環境光遮擋貼圖實現細節陰影24110.1.6 用光照貼圖產生假陰影24310.1.7 金屬光澤度貼圖和粗糙度貼圖24410.1.8 Alpha貼圖24610.1.9 自發光貼圖24710.1.10 高光貼圖24810.1.11 使用環境貼圖創建偽鏡面反射效果25010.2 紋理的高級用途25510.2.1 自定義UV映射25510.2.2
本書將介紹如何直接在瀏覽器中創建漂亮的3D場景和動畫,並且充分發揮WebGL和現代瀏覽器的潛能。首先介紹基本概念和基礎組件,然後通過逐漸擴展示例代碼逐步深入講解更多高級技術。在本書中讀者將學到如何從外部加載3D模型和具有真實效果的材質紋理、學習使用Three.js提供的攝像機組件來實現在3D場景中飛行和走動、如何將HTML5視頻和畫布作為材質貼在3D模型表面。此外還將學習變形動畫和骨骼動畫,甚至還會涉及在場景中使用物理模擬的方法,例如重力、踫撞檢測等等。
[美]喬斯·德克森(JosDirksen) 著 周翀 張薇 譯
喬斯?德克森(Jos Dirksen),資深軟件工程師和架構師,現任職於Malmberg公司,在後臺技術(如Java和Scala)和前端開發(如HTML5、CSS和JavaScript)等技術領域有豐富的從業經驗。除了對前端的JavaScript和HTML5等技術充滿興趣,Jos也喜歡研究使用REST和傳統的網絡服務技術開發後臺服務。
在最近的幾年中,瀏覽器的功能變得愈發強大,並且成為展現復雜的應用和圖形的平臺。然而其中大部分都是標準的二維圖形。大多數現代瀏覽器已經支持WebGL,不僅可以在瀏覽器端創建二維應用和圖形,而且可以通過GPU的功能創建好看並且運行良好的三維應用。然而,直接使用WebGL編程還是很復雜的。編程者需要知道WebGL的底層細節,並且學習復雜的著色語言來獲得WebGL的大部分功能。Three.js提供了一個很簡單的關於WebGL特性的JavaScript API,所以用戶不需要詳細地學習WebGL,就能創作出好看的三維圖形。Three.js為直接在瀏覽器中創建三維場景提供了大量的特性和API。閱讀這本書,讀者將通過許多交互示例和示例代碼學習Three.js提供的各種API。本書內容第1章介紹使用Three.js的基本步驟。閱讀完本章就能立刻創建你的第一個Three.js場景,也能直接在瀏覽器中創建你的等