Three.js 前端三維圖形開發案例集錦
羅帥、羅斌
買這商品的人也買了...
-
$204安全攻防入門 -
CSS 重構 (CSS Refactoring: Architect Your Stylesheets for Success)$450$356 -
線性代數, 9/e (Leon: Linear Algebra with Application, 9/e)$720$706 -
遊戲化實戰全書：遊戲化大師教你把工作、教學、健身、行銷、產品設計……變遊戲，愈好玩就愈有吸引力！(Actionable Gamification: Beyond Points, Badges, and Leaderboards)$480$432 -
WEB 設計職人必修 UX Design 初學者學習手冊$420$357 -
Three.js 開發指南：基於 WebGL 和 HTML5 在網頁上渲染 3D圖形和動畫, 3/e (Learn Three.js: Programming 3D animations and visualizations for the web with HTML5 and WebGL, 3/e)$594$564 -
深入淺出大型網站架構設計$534$507 -
多元裝置時代的 UI/UX 設計法則：打造出讓使用者完美體驗的好用介面, 2/e$450$351 -
深入淺出設計模式, 2/e (Head First Design Patterns: Building Extensible and Maintainable Object-Oriented Software, 2/e)$980$774 -
$658MATLAB 函數及應用 -
從零開始的 3D設計之旅：Blender 3D 入門教材$600$468 -
Solidity 實戰全書：完整掌握智能合約！成為獨立開發 Dapp 的區塊鏈工程師$650$507 -
戰術 + 技術 + 程序 -- ATT＆CK 框架無差別學習$880$748 -
Test-Driven Development 學習手冊$580$458 -
「新」SEO 超入門！打敗 AI、征服搜尋引擎，洞悉使用者需求的必備指南$630$536 -
電腦圖形學基礎與應用 — 基於 WebGL$359$341 -
$1,306高質量用戶體驗：恰到好處的設計與敏捷 UX 實踐 (第2版 特別版)(全四冊) -
$403MATLAB 圖形學基礎 -
【資安密碼系列】秘密不再是秘密：輕鬆認識密碼學-打造你的數位安全防線$500$390 -
SRE 實踐與開發平台指南：從團隊協作、原則、架構和趨勢掌握全局，做出精準決策$620$484 -
精通 API 架構｜設計、營運和發展基於 API 的系統 (Mastering API Architecture: Design, Operate, and Evolve Api-Based Systems)$680$537 -
$619UI 智能化與前端智能化：工程技術、實現方法與編程思想 -
決戰！微前端架構 Micro Frontends：新一代可擴展的網頁開發模式，實現各種框架的無縫整合與溝通$820$697 -
甚麼？網頁也可以做派對遊戲？使用 Vue 和 babylon.js 打造 3D 派對遊戲吧！$980$774 -
網頁視覺特效最強必殺技大全：用 Three.js 與 Shader 圖說核心原理 x 閃避踩雷 x 創作指南（iThome鐵人賽系列書）【軟精裝】$800$624
相關主題
商品描述
本書以“問題描述+解決方案”的模式，使用二百多個實例介紹了Scene、Renderer、Camera、Geometry、Mesh、Light、Material、EffectComposer等Three.js封裝的三維圖形對象的具體應用，如繪制正交照相機，繪制透視照相機，瀏覽全景圖，播放全景視頻，創建天空盒，繪制沙漏，繪制被切割的圓柱體，繪制旋轉的地球模型，繪制克萊因瓶，繪制莫比烏斯環，創建普通貼圖、環境貼圖、移位貼圖、高光貼圖、光照貼圖，創建輝光特效、漂白特效、拖尾特效，檢測圖形邊緣，添加輪廓邊線，加載各種外部模型並播放模型動畫等。 本書適合作為廣大Web前端及三維圖形開發人員的案頭參考書，無論對於編程初學者，還是編程高手，本書都極具參考價值。
目錄大綱
目錄
第1章場景
001在場景中自定義光源繪制立方體
002使用正交照相機繪制多個立方體
003使用CameraHelper繪制正交照相機
004使用透視照相機繪制多個立方體
005使用CameraHelper繪制透視照相機
006使用透視照相機滾動瀏覽全景圖
007使用鼠標拖曳功能查看並縮放全景圖
008使用鼠標拖曳功能播放全景視頻
009在場景中添加粒子實現星空背景
010使用六幅圖像的天空盒設置背景
011使用一個圖像文件創建天空盒
012使用TransformControls平移對象
013使用TransformControls拉伸對象
014使用TransformControls旋轉對象
015使用DragControls任意拖曳對象
016使用OrbitControls任意縮放對象
017使用OrbitControls旋轉照相機
018在多個對象中使用鼠標選擇對象
019在鼠標單擊對象時改變對象顏色
020使用線性霧設置場景的霧化效果
021使用線性霧渲染場景的多個對象
022使用指數霧設置場景的霧化效果
023在場景中使用ArrowHelper繪制箭頭
024在場景中使用AxesHelper繪制坐標軸
025使用CSS3DRenderer渲染全景圖
026使用CSS3DRenderer渲染三維對象
027使用SVGRenderer渲染線條寬度
028使用多個渲染器渲染相同的場景
029在場景中統一設置所有對象的材質
030在場景中統一調整所有對象的亮度
031使用JSON格式保存和加載網格對象
032使用JSON格式保存和加載整個場景
第2章幾何體
033使用圖像設置立方體的各個錶面
034使用多個圖像設置立方體的錶面
035使用多種顏色設置立方體的錶面
036使用視頻設置立方體的各個錶面
037使用顏色和視頻設置立方體錶面
038使用畫布貼圖設置立方體的錶面
039使用畫布動畫設置立方體的錶面
040使用天空盒背景設置立方體錶面
041根據索引設置立方體face的材質
042隱藏或顯示立方體的指定錶面
043在場景中根據透明度繪制立方體
044在場景中繪制圓角化的立方體
045在場景中繪制居中顯示的魔方
046在場景中圍繞坐標軸旋轉立方體
047在場景中根據名稱旋轉立方體
048在場景中繪制普通的圓柱體
049在場景中繪制被切割的圓柱體
050在場景中根據圓柱體繪制圓台
051在場景中根據圓柱體繪制沙漏
052在場景中繪制旋轉的圓柱體
053在場景中實現動態縮放圓柱體
054在場景中繪制普通的圓錐體
055在場景中繪制被切割的圓錐體
056在經度方向上根據弧度繪制球體
057在緯度方向上根據弧度繪制球體
058在經緯度方向上根據弧度繪制球體
059在場景中以嵌套方式繪制多個球體
060在場景中同時繪制球體和圓柱體
061在場景中繪制持續旋轉的球體
062在場景中繪制旋轉的地球模型
063在場景中實現小球圍繞大球旋轉的效果
064在場景中圍繞隱藏的中心旋轉球體
065在場景中實現沿著軌道旋轉球體的效果
066在場景中為球體添加彈跳動畫
067在場景中繪制整周樣條曲線圖形
068在場景中繪制半周樣條曲線圖形
069在場景中繪制樣條曲線及其圖形
070在場景中繪制樣條曲線的線框盒
071在場景中繪制旋轉的圓環面
072在場景中繪制旋轉的扇面
073在場景中繪制正弦樣式的管子
074在場景中自定義曲線繪制管子
075在場景中自定義曲線繪制扭結
076在場景中自定義頂點繪制曲線
077在場景中繪制甜甜圈式的圓環
078在場景中根據弧度繪制半圓環
079在場景中繪制救生圈式的圓環
080在場景中繪制多次旋轉的圓環結
081在場景中隱藏或顯示圓環結
082在場景中繪制自定義多面體
083使用多面體方法繪制八面體
084使用多面體方法繪制四面體
085在場景中自定義頂點繪制凸面體
086在場景中繪制立方體的邊框線
087在場景中繪制二十面體的邊框線
088在場景中繪制十二面體的邊框線
089在場景中使用虛線繪制對象邊框
090在場景中繪制多條不連續的線段
091在場景中使用漸變色線條繪制圖形
092在場景中自定義線條的寬度和顏色
093在場景中根據二維坐標繪制螺線
094在場景中根據三維坐標繪制螺線
095在場景中使用虛線繪制空心矩形
096在場景中根據路徑拉伸圓角矩形
097在場景中根據路徑拉伸多個矩形
098在場景中拉伸自定義的SVG圖形
099在場景中根據頂點繪制空心三角形
100在場景中根據頂點繪制空心七邊形
101在場景中根據頂點繪制空心五角星
102在場景中根據指定厚度繪制五角星
103在場景中沿著隨機曲線拉伸五角星
104在場景中根據頂點繪制空心六角星
105在場景中根據邊數繪制多邊形
106在場景中使用曲線繪制桃心
107在場景中使用虛線繪制桃心
108在場景中根據厚度和斜角繪制桃心
109在場景中沿著桃心邊線移動小球
110在場景中使用多個桃心構建球體
111在場景中根據半徑和切片繪制圓
112在場景中根據指定參數繪制扇形
113在場景中根據指定參數繪制圓弧
114在場景中根據指定參數繪制橢圓
115通過自定義函數繪制克萊因瓶
116通過自定義函數繪制莫比烏斯環
117通過自定義函數繪制NURBS曲面
118通過自定義函數繪制波浪圖形
119通過自定義函數繪制平面圖形
120在場景中為平面圖形添加波浪
121在場景中繪製法向量貼圖波浪
122在場景中繪制太陽照射的波浪
123在場景中繪制自定義平面圖形
124在平面圖形的前後設置相同貼圖
125在平面圖形的前後設置不同貼圖
126使用FontLoader加載字庫繪制英文字母
127使用TTFLoader加載字庫繪制數字
128在場景中繪制自定義的斜角字母
129在場景中加載中文字庫繪制漢字
130使用精簡的自定義字庫繪制漢字
131在場景中繪制線條鏤空的漢字
132使用自定義屬性自定義線條顏色
133在場景中根據漢字實現漢字鏡像
134在場景中加載中文字庫繪制二維漢字
135在場景中的球體上添加文本標簽
136在場景中的文本上添加火焰動畫
137深度遍歷在組中的多個子對象
138使用InstancedBufferGeometry
139使用InstancedMesh提升渲染性能
第3章光源
140繪制DirectionalLight光源產生的陰影
141模糊DirectionalLight光源產生的陰影
142繪制DirectionalLight光源的輔助線
143繪制PointLight光源產生的陰影
144繪制PointLight光源的輔助線
145繪制PointLight光源的光線陰影
146繪制SpotLight光源產生的陰影
147繪制SpotLight光源的輔助線
148繪制HemisphereLight光源的輔助線
149繪制RectAreaLight光源的輔助圖形
150繪制多個光源照射球體產生的陰影
151在場景中自定義環境光的強度
152在場景中實現飄移的特殊光暈鏡頭
第4章材質
153使用MeshBasicMaterial設置錶面顏色
154使用MeshBasicMaterial創建材質數組
155在MeshBasicMaterial中啟用透明度
156在MeshBasicMaterial中使用普通貼圖
157在MeshBasicMaterial中使用環境貼圖
158自定義MeshBasicMaterial的貼圖樣式
159創建線框風格的MeshBasicMaterial
160使用MeshBasicMaterial混合其他材質
161根據視頻創建MeshBasicMaterial材質
162在MeshStandardMaterial中使用ao貼圖
163在MeshStandardMaterial中使用移位貼圖
164在MeshMatcapMaterial中設置matcap
165使用MeshNormalMaterial創建多色錶面
166使用MeshNormalMaterial創建多色字母
167使用MeshNormalMaterial繪製法向量
168在MeshNormalMaterial中設置著色器
169扁平化MeshNormalMaterial創建的球體
170使用MeshDepthMaterial淡化多個圖形
171使用MeshDepthMaterial繪制隨機圖形
172使用MeshDepthMaterial繪制圓環結
173使用MeshDepthMaterial混合其他材質
174在場景屬性中設置MeshDepthMaterial
175在MeshPhongMaterial中使用普通貼圖
176在MeshPhongMaterial中使用高光貼圖
177在MeshPhongMaterial中使用法向量貼圖
178在MeshPhongMaterial中使用凹凸貼圖
179在MeshPhongMaterial中鏡像平鋪貼圖
180在MeshPhongMaterial中重復平鋪貼圖
181在MeshPhongMaterial中使用剪裁平面
182使用MeshLambertMaterial呈現局部照射
183在MeshLambertMaterial中使用普通貼圖
184在MeshLambertMaterial中使用環境貼圖
185在MeshLambertMaterial中使用光照貼圖
186設置MeshLambertMaterial貼圖重復方式
187在MeshLambertMaterial中實現發光的效果
188在MeshLambertMaterial中實現形變動畫
189在MeshLambertMaterial中啟用反射特效
190使用SpriteMaterial繪制平面粒子
191使用SpriteMaterial隨機繪制粒子
192根據畫布內容創建SpriteMaterial
193使用普通貼圖創建SpriteMaterial
194根據顏色和尺寸創建PointsMaterial
195在PointsMaterial中自定義粒子形狀
196使用普通貼圖創建PointsMaterial
197使用漸變紋理貼圖創建PointsMaterial
198使用PointsMaterial創建雨滴下落動畫
199使用PointsMaterial創建雪花飄舞動畫
200使用PointsMaterial創建粒子波動動畫
201使用ShaderMaterial創建自定義著色器
202使用ShaderMaterial自定義顏色飽和度
203使用ShaderMaterial將彩色轉換為灰度
204使用ShaderMaterial高亮顯示凹面和凸面
205使用ShaderMaterial自定義字母線條顏色
206使用ShaderMaterial動態改變貼圖的顏色
207使用ShaderMaterial實現持續燃燒的大火
208使用ShaderMaterial實現變換的時空漩渦
209使用外部著色器自定義ShaderMaterial
210使用LineDashedMaterial繪制高斯帕曲線
第5章後期特效
211在場景中的三維圖形上添加馬賽克
212在場景中的三維圖形上添加小灰點
213在場景中的三維圖形上添加懷舊特效
214在場景中的三維圖形上添加重影特效
215在場景中的三維圖形上添加特藝彩色
216在場景中的三維圖形上添加鋸齒特效
217在場景中的三維圖形上添加泛光特效
218在場景中的三維圖形上添加輝光特效
219在場景中的三維圖形上添加老電影特效
220在場景中的三維圖形上添加電脈沖特效
221在場景中的三維圖形上添加漂白特效
222在場景中的三維圖形上添加光暈特效
223在場景中的三維圖形上添加聚焦特效
224在場景中的三維圖形上添加模糊特效
225在場景中的三維圖形上添加三角形模糊
226在場景中的三維圖形上添加拖尾特效
227根據在場景中的三維圖形添加水平鏡像
228根據在場景中的三維圖形添加垂直鏡像
229對在場景中的三維圖形進行水平移軸
230對在場景中的三維圖形進行垂直移軸
231對在場景中的三維圖形進行伽馬校正
232對在場景中的三維圖形進行顏色校正
233對在場景中的三維圖形使用顏色過濾
234自定義在場景中的三維圖形顏色色調
235自定義在場景中的三維圖形顏色飽和度
236自定義在場景中的三維圖形顏色對比度
237自定義在場景中的三維圖形顏色亮度
238自定義在場景中的三維圖形光亮度
239使用Sobel算子檢測三維圖形邊緣
240使用FreiChenShader檢測三維圖形邊緣
241在場景中的三維圖形上添加輪廓邊線
242在場景中根據三維圖形實現萬花筒變換
243在場景中以三維眼鏡視覺查看三維圖形
第6章外部模型
244使用AssimpLoader加載Assimp模型
245使用BabylonLoader加載Babylon模型
246使用LegacyJSONLoader加載JSON文件
247使用MTLLoader加載模型材質
248使用AWDLoader加載AWD模型
249使用STLLoader加載STL模型
250使用FBXLoader加載FBX模型
251播放使用FBXLoader加載的FBX模型
252使用VOXLoader加載VOX模型
253使用DRACOLoader加載DRC模型
254使用AMFLoader加載AMF模型
255使用ThreeMFLoader加載3MF模型
256使用TDSLoader加載3DS模型
257使用Rhino3dmLoader加載3DM模型
258使用PRWMLoader加載PRWM模型
259使用SVGLoader加載SVG模型
260使用FileLoader加載SVG模型
261使用CTMLoader加載CTM模型
262使用OBJLoader加載OBJ模型
263使用ObjectLoader加載JSON文件
264使用ObjectLoader加載圓環結模型
265使用PDBLoader加載PDB模型
266使用PCDLoader加載PCD模型
267使用GLTFLoader加載GLTF模型
268使用GLTFLoader加載GLB模型
269使用ColladaLoader加載DAE模型
270加載並播放DAE格式的模型動畫
271加載並播放GLB格式的模型動畫
272加載並播放MMD格式的模型動畫
273使用Tween動畫控制皮膚模型狀態
274使用Tween動畫拉伸和折疊PLY模型
275使用DDSLoader加載DDS圖像文件
276使用TGALoader加載TGA圖像文件
277使用ImageBitmapLoader加載圖像
278使用SubdivisionModifier細化模型
