編輯推薦
《Three.js開發指南》首部全麵講解Three.js開發的實用指南,循序漸進講解Three.js的各種功能
通過大量交互式示例,深入探索使用開源的Three.js庫創建絢麗三維圖形的實用方法和技巧
內容簡介
隨著HTML 5標準的頒布,以及流行瀏覽器的日益強大,直接在瀏覽器中展示三維圖形和動畫已經變得越來越容易,也越來越受關注。但是三維圖形和動畫本身比較復雜,不僅需要有豐富的數學、圖形學等方麵的知識,還需要瞭解材質、貼圖等各種創建三維場景所必備的要素。另外,直接使用WebGL在瀏覽器中創建三維圖形和動畫也非常繁瑣,它所提供的各種接口盡管非常豐富且強大,但對於用戶來說未免過於復雜瞭。
Three.js的齣現則完美地幫助人們解決瞭這個矛盾。Three.js將WebGL的強大功能融匯其中,同時又非常易於使用,即便用戶對其中的原理不甚瞭解,也能藉助Three.js創建齣絢麗多姿的三維場景和動畫。
《Three.js開發指南》先從基本概念和Three.js的基本模塊講起,然後伴隨著大量的示例和代碼,逐步擴展到更多的主題,循序漸進地講解Three.js的各種功能,幫助讀者充分利用WebGL和現代瀏覽器的潛能,直接在瀏覽器中創建動態的華麗場景
《Three.js開發指南》通過大量的示例和代碼,以互動的方式嚮讀者展示Three.js的各種功能。
《Three.js開發指南》共12章:第1章講述使用Three.js庫的基本步驟;第2章講解Three.js庫使用過程中所要瞭解的各種基礎組件,包括光源、網格、幾何體、材質和相機等;第3章通過具體示例講解場景中使用的各種光源;第4章討論Three.js庫中可以應用於網格的各種材質,並通過互動示例讓讀者試用這些材質;第5章講解Three.js中幾何體的創建和設置;第6章展示如何設置、使用Three.js庫中的高級幾何體,例如凸麵體和掃描體;第7章講解如何使用Three.js庫中的粒子係統;第8章展示如何從外部導入網格和幾何體;第9章探索各種動畫效果,使場景活動起來;第10章深入講解材質的細節,包括如何控製材質,以及如何將HTML 5視頻的輸齣和HTML 5畫布中的元素作為紋理;第11章探索如何使用Three.js庫來對已經渲染過的場景進行後期處理;第12章講解如何在Three.js的場景中添加物理效果。
作者簡介
Jos Dirksen,資深軟件工程師和架構師,現任職於Malmberg公司,在後颱技術(如Java和Scala)和前端開發(如HTML5、CSS和JavaScript)等技術領域有豐富的從業經驗。除瞭對前端的JavaScript和HTML5等技術充滿興趣,Jos也喜歡研究使用REST和傳統的網絡服務技術開發後颱服務。
李鵬程,SAP中國研究院高級軟件工程師。早年他曾在AutoDesk公司從事三維設計軟件的開發工作,後來因緣際會來到SAP,轉行做ERP。隨著雲熱潮的來臨,傳統的ERP也逐漸轉嚮雲端,因此也伴隨著這股潮流學習瞭很多網絡前端、後端方麵的開發。
目錄
前 言
緻 謝
第1章用Three.js創建你的第一個三維場景
1.1 使用Three.js的前提條件
1.2 獲取源代碼
1.2.1 用Git剋隆代碼倉庫
1.2.2 下載並解壓壓縮包
1.2.3 測試示例
1.3 創建HTML頁麵框架
1.4 渲染並展示三維對象
1.5 添加材質、燈光和陰影
1.6 用動畫擴展你的首個場景
1.6.1 引入requestAnimation-Frame()方法
1.6.2 轉動方塊
1.6.3 彈跳球
1.7 使用dat.GUI庫簡化試驗
1.8 使用ASCII效果
1.9 總結
第2章使用構建Three.js場景的基本組件
2.1 創建場景
2.1.1 場景的基本功能
2.1.2 在場景中添加霧化效果
2.1.3 使用材質覆蓋屬性
2.2 使用幾何和網格對象
2.2.1 幾何對象的屬性和函數
2.2.2 網格對象的函數和屬性
2.3 選擇閤適的相機
2.3.1 正投影相機和透視相機
2.3.2 讓相機在指定點上聚焦
2.4 總結
第3章使用Three.js裏的各種光源
3.1 探索Three.js庫提供的光源
3.2 學習基礎光源
3.2.1 AmbientLight-影響整個場景的光源
3.2.2 PointLight-照射所有方嚮的光源
3.2.3 SpotLight-具有錐形效果的光源
3.2.4 DirectinalLight-模擬遠處類似太陽的光源
3.2.5 使用特殊光源生成高級光照效果
3.3 總結
第4章使用Three.js的材質
4.1 理解共有屬性
4.1.1 基礎屬性
4.1.2 融閤屬性
4.1.3 高級屬性
4.2 從簡單的網格材質(基礎、深度和麵)開始
4.2.1 簡單錶麵的MeshBasic-Material
4.2.2 基於深度著色的MeshDepthMaterial
4.2.3 聯閤材質
4.2.4 計算法嚮顔色的MeshNormalMaterial
4.2.5 為每個麵指定材質的MeshFaceMaterial
4.3 學習高級材質
4.3.1 用於暗淡、不光亮錶麵的MeshLambertMaterial
4.3.2 用於光亮錶麵的MeshPhongMaterial
4.3.3 用ShaderMaterial創建自己的著色器
4.4 綫段幾何體的材質
4.4.1 LineBasicMaterial
4.4.2 LineDashedMaterial
4.5 總結
第5章學習使用幾何體
5.1 Three.js提供的基礎幾何體
5.1.1 二維幾何體
5.1.2 三維幾何體
5.2 總結
第6章使用高級幾何體和二元操作
6.1 ConvexGeometry
6.2 LatheGeometry
6.3 通過拉伸創建幾何體
6.3.1 ExtrudeGeometry
6.3.2 TubeGeometry
6.3.3 從SVG拉伸
6.3.4 ParametricGeometry
6.4 創建三維文本
6.4.1 渲染文本
6.4.2 添加自定義字體
6.5 使用二元操作組閤網格
6.5.1 subtract函數
6.5.2 intersect函數
6.5.3 union函數
6.6 總結
第7章粒子和粒子係統
7.1 理解粒子
7.2 粒子、粒子係統和BasicParticleMaterial
7.3 使用HTML5畫布格式化粒子
7.3.1 在CanvasRenderer類裏使用HTML5畫布
7.3.2 在WebGLRenderer中使用HTML5畫布
7.4 使用紋理格式化粒子
7.5 從高級幾何體中創建粒子係統
7.6 總結
第8章創建、加載高級網格和幾何體
8.1 幾何體組閤和閤並
8.1.1 對象組閤
8.1.2 將多個網格閤並成一個網格
8.2 從外部資源中加載幾何體
8.3 以Three.js的JSON格式保存和加載
8.3.1 保存和加載幾何體
8.3.2 保存和加載場景
8.4 使用Blender
8.4.1 在Blender中安裝Three.js導齣器
8.4.2 在Blender裏加載和導齣模型
8.5 導入三維格式文件
8.5.1 OBJ和MTL格式
8.5.2 加載Collada模型
8.5.3 加載STL、CTM和VTK模型
8.5.4 展示蛋白質數據銀行中的蛋白質
8.5.5 從PLY模型中創建粒子係統
8.6 總結
第9章創建動畫和移動相機
9.1 基礎動畫
9.1.1簡單動畫
9.1.2 選擇對象
9.1.3 用Tween.js做動畫
9.2 使用相機
9.2.1 軌跡球控件
9.2.2 飛行控件
9.2.3 翻滾控件
9.2.4 第一人稱控件
9.2.5 軌道控件
9.2.6 路徑控件
9.3 變形動畫和骨骼動畫
9.3.1 用變形目標製作動畫
9.3.2用骨骼和濛皮製作動畫
9.4使用外部模型創建動畫
9.4.1 用Blender創建骨骼動畫
9.4.2從Collada模型中加載動畫
9.4.3從雷神之錘模型中加載動畫
9.5總結
第10章加載和使用紋理
10.1在材質中使用紋理
10.1.1加載紋理並應用到網格
10.1.2使用凹凸貼圖創建皺紋
10.1.3使用法嚮貼圖創建更加細緻的凹凸和皺紋
10.1.4使用光照貼圖創建假陰影
10.1.5用環境貼圖創建虛假的反光效果
10.1.6高光貼圖
10.2紋理的高級用途
10.2.1定製UV映射
10.2.2重復映射
10.2.3在畫布上繪製圖案並作為紋理
10.3總結
第11章定製著色器和渲染後期處理
11.1設置後期處理
11.1.1創建EffectComposer對象
11.2後期處理通道
11.2.1簡單後期處理通道
11.2.2 使用掩膜的高級效果組閤器
11.2.3 用ShaderPass定製效果
11.3 創建自定義的後期處理著色器
11.3.1 定製灰度圖著色器
11.3.2 定製位著色器
11.4 總結
第12章用Physijs在場景中添加物理效果
12.1 創建可用Physijs的基本Three.js場景
12.2 材質屬性
12.3 基礎圖形
12.4 使用約束限製對象移動
12.4.1 用PointConstraint限製兩點間的移動
12.4.2 用HingeConstraint創建類似門的約束
12.4.3 用SliderConstraint將移動限製到一個軸
12.4.4 用ConeTwistConstraint創建類似球銷的約束
12.4.5 用DOFConstraint實現細節的控製
12.5 總結
前言/序言
在過去的兩年裏,瀏覽器變得更加強大瞭,而且能夠作為平颱來運行復雜的應用和圖形。但大部分的圖形都是二維的。現在大部分的瀏覽器已經實現瞭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章進一步講解場景中的各種光源。該章會展示幾個例子,並解釋如何使用各種光源,該章所介紹的光源包括:SpotLight、DirectionLight、AmbientLight、PointLight、HemisphereLight,以及AreaLight。另外,該章還展示如何在光源中應用LensFlare效果。
第4章討論Three.js庫中可以用於網格的各種材質。這一章將會展示所有可以在材質中設置的屬性,每種屬性都有其特定的用途。並且這章還提供交互式的例子,通過它們你可以試驗Three.js庫中各種可用的材質。
第5章開始探討Three.js庫中的各種幾何體。在這一章裏你會學習如何創建、設置Three.js裏的幾何體,而且你還可以通過交互式的示例來試驗,該章介紹的幾何體包括:平麵、圓、自定義形狀、方塊、球體、圓柱體、圓環、環麵紐結和多麵體。
第6章繼續第5章未講完的內容,展示如何設置、使用Three.js庫中的高級幾何體,例如凸麵體和掃描體。該章將會介紹如何從二維幾何體中拉齣三維幾何體,以及如何使用二元運算將幾何體組閤起來。
第7章講解如何使用Three.js庫中的粒子係統。你將會學習如何從零開始創建粒子係統,以及如何基於已有的幾何體創建粒子係統。你還會學習如何使用精靈和粒子材質來改變粒子的外觀。
第8章展示如何從外部源導入網格和幾何體。你將會學習如何使用Three.js庫的JSON格式來存儲幾何體和場景。這一章還解釋瞭如何從OBJ、DAE、STL、CTM和PLY格式的文件中加載模型。
第9章探討各種動畫效果,使場景活動起來。你將會學習如何結閤Tween.js庫使用Three.js,以及基於變形和骨骼的動畫效果。
第10章進一步展開討論第4章引入的材質。這一章會深入講解材質的細節。該章介紹瞭各種可用的材質,以及應用到網格上時如何控製材質。另外,在這一章你還會看到如何將HTML5視頻的輸齣和HTML5畫布中的元素作為紋理。
第11章探討如何使用Three.js庫來對已經渲染過的場景進行後期處理。通過後期處理,你可以對已經渲染過的場景應用某些特效,如模糊、移軸、陳舊。另外,你還會學習如何創建自定義的後期處理效果,以及創建自定義頂點和片段著色器。
第12章講解如何在Three.js的場景中添加物理效果。有瞭物理效果後,你就可以檢測物體之間的碰撞,使它們能夠對重力産生反應,並産生摩擦。這一章將會展示如何使用JavaScript的物理庫來達到上述效果。
閱讀之前的準備
閱讀本書你要準備的隻是一個文本編輯器(例如Sublime文本編輯器),用來編輯示例,以及一個現代的瀏覽器,用來顯示這些示例。有些示例需要一個本地的Web服務器,但是在第1章,你將會學習如何搭建一個非常輕量的Web服務器來使用本書中的示例。
在我們開始之前,先對書中示例可能齣現的問題簡單提一下。第1章大緻介紹瞭一下支持WebGL的瀏覽器,這是運行Three.js所必需的。現在的瀏覽器,諸如Chrome、Firefox和Internet Explorer可以很好地支持HTML5 標準。但是仍然有一些細節要注意。當瀏覽器有新的版本時,它們有可能會不支持WebGL的某些特性。例如,在本書完成的時候,Windows 7上的Chrome和Firefox在運行第11章的例子時會有問題。所以在嘗試這些示例時,請確保升級到最新版的Chrome和Firefox。
讀者對象
本書對所有已經瞭解JavaScript並開始想在瀏覽器裏創建三維圖形的人都會有很大的幫助。你不必去瞭解任何高級的算法或WebGL,隻要具有一般的JavaScript和HTML知識即可。所有示例代碼可以登錄華章網站(www.hzbook.com)免費下載,本書中用到的工具也都是開源的。所以,如果你想要學習如何創建漂亮的、交互的三維圖形,並且可以在任何現代的瀏覽器上運行,那麼這本書就是你想要的。
緻 謝 Acknowledgements
寫書是一件耗時且艱苦的事情。如果沒有很多人的支持和幫助,我不可能完成。我想在這裏感謝他們。
首先是我的項目協調人,Leena Purkait,要不是她幫助我協調所有的細節,從而讓我可以專注於內容的創作,我根本不可能按時完成所有的章節。我還要感謝Ritika Singh和Anita Nayak,她們花瞭很多時間和精力來完善本書。
還有來自Packt齣版社的好多人,他們在我寫書、審校期間給瞭我很多幫助,保證整個過程順利進行。乾得不錯,夥計們!
當然,我還要感謝Ricardo Cabello,即Mr.dò_ób,Three.js正是他的傑作。
非常感謝本書的各位審校人。感謝你們那些非常好的反饋和建議,對本書的改進幫助很大。正是你們的積極評論纔成就瞭本書。
我還沒有提到最重要的人。我想感謝我的太太Brigitte,她一再地容忍我在周末和晚上將大量的時間花費在筆記本電腦上。我要感謝我的女兒Sophie,她經常把我從鍵盤上拉開,逗我開心。還有我的女兒Amber,盡管隻有幾周大,但是她讓我對生命中真正重要的事情和時刻充滿感激。
Three.js開發指南 [Learning Three.js: The JavaScript 3D Library for W] epub pdf mobi txt 電子書 下載 2024
Three.js開發指南 [Learning Three.js: The JavaScript 3D Library for W] 下載 epub mobi pdf txt 電子書
Three.js開發指南 [Learning Three.js: The JavaScript 3D Library for W] mobi pdf epub txt 電子書 下載 2024
Three.js開發指南 [Learning Three.js: The JavaScript 3D Library for W] epub pdf mobi txt 電子書 下載 2024