Three.js前端三維圖形開發案例集錦 @ 3dWoo大學簡體電腦書店

Three.js前端三維圖形開發案例集錦 ( 簡體字)
作者：羅帥、羅斌	類別：1. -> 程式設計 -> 網路編程 -> Javascript
出版社：清華大學出版社	3dWoo書號： 55710 詢問書籍請說出此書號！缺書 NT售價： 640 元
出版日：3/1/2022
頁數：506
光碟數：0
站長推薦：
印刷：黑白印刷	語系： ( 簡體字 )
ISBN：9787302589563	加入購物車 │加到我的最愛 (請先登入會員)
(簡體書上所述之下載連結耗時費功, 恕不適用在台灣, 若讀者需要請自行嘗試, 恕不保證, 繁體書的下載亦請直接連絡出版社)
目錄前言內容簡介第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細化模型本書以“問題描述+解決方案”的模式，使用二百多個實例介紹了Scene、Renderer、Camera、Geometry、Mesh、Light、Material、EffectComposer等Three.js封裝的三維圖形對象的具體應用，如繪制正交照相機，繪制透視照相機，瀏覽全景圖，播放全景視頻，創建天空盒，繪制沙漏，繪制被切割的圓柱體，繪制旋轉的地球模型，繪制克萊因瓶，繪制莫比烏斯環，創建普通貼圖、環境貼圖、移位貼圖、高光貼圖、光照貼圖，創建輝光特效、漂白特效、拖尾特效，檢測圖形邊緣，添加輪廓邊線，加載各種外部模型并播放模型動畫等。本書適合作為廣大Web前端及三維圖形開發人員的案頭參考書，無論對于編程初學者，還是編程高手，本書都極具參考價值。 WebGL是一種三維繪圖標準，該繪圖標準允許把JavaScript和OpenGL ES 2.0結合在一起，這樣Web開發人員就可以借助硬件在瀏覽器中更流暢地展示三維場景和模型，以創建復雜的導航和數據視覺化。Three.js是一款基于原生WebGL的三維引擎框架(庫)，該框架在WebGL的API基礎上以簡單、直觀的方式封裝了三維圖形的常用對象，因此大大減少了程序員在Web前端開發三維圖形應用的工作量，Three.js還使用了很多圖形引擎的高級技巧，極大地提高了應用性能。隨著WebGL技術和5G技術的持續推廣，各種產品的在線三維展示將會變得越來越普遍，對于現在比較火爆的VR產品、AR產品，對WebGL技術的推廣，也是一個好消息。VR與Web3D技術的結合自然就衍生出一個新的概念WebVR，也就是基于Web實現的VR內容，即通過三維照相機對室內空間進行拍攝，即可在Web端以全景圖的方式預覽室內效果。Three.js對此也進行了封裝。本書使用二百多個獨立實例分類介紹了Three.js創建三維圖形的技巧。本書共分為6章。第1章主要介紹與Scene、Renderer、Camera、OrbitControls相關的實例，如繪制正交照相機、透視照相機，使用CSS3DRenderer渲染全景圖、播放全景視頻、創建天空盒，使用多個渲染器渲染場景，使用OrbitControls任意縮放、旋轉、平移三維圖形對象，使用DragControls任意拖曳三維圖形對象等。第2章主要介紹與Geometry、Mesh相關的實例，如使用各種顏色和視頻設置立方體表面、使用天空盒背景設置立方體表面、繪制沙漏、繪制被切割的圓柱體、繪制旋轉的地球模型、繪制樣條曲線及其圖形、繪制樣條曲線的線框盒、繪制多次旋轉的圓環結、自定義頂點繪制凸面體、根據路徑拉伸圓角矩形、自定義函數繪制克萊因瓶、自定義函數繪制莫比烏斯環、自定義函數繪制動態起伏的波浪，使用精簡的自定義字庫繪制漢字、根據漢字實現漢字鏡像等。第3章主要介紹與Light相關的實例，如繪制DirectionalLight、PointLight、SpotLight、HemisphereLight、RectAreaLight等多種光源產生的陰影和輔助線等，以及如何自定義環境光(AmbientLight)的強度。第4章主要介紹與Material相關的實例，如使用MeshBasicMaterial、MeshStandardMaterial、MeshPhongMaterial、MeshLambertMaterial等材質分別創建普通貼圖、環境貼圖、移位貼圖、凹凸貼圖、法向量貼圖、光照貼圖、高光貼圖等，以及使用SpriteMaterial、PointsMaterial等材質創建各種粒子(精靈)等。同時還介紹了使用LineDashedMaterial、MeshNormalMaterial、ShaderMaterial、MeshDepthMaterial等材質實現的大量三維圖形動畫的效果。第5章主要介紹與EffectComposer、ShaderPass、RenderPass相關的后期特效實例，如使用PixelShader創建馬賽克特效，使用SepiaShader創建懷舊特效，使用BleachBypassShader創建漂白特效，使用FilmPass創建老電影特效，使用UnrealBloomPass創建輝光特效，使用AfterimagePass創建拖尾特效，使用ColorifyShader實現顏色過濾，使用SobelOperatorShader檢測圖形邊緣，使用OutlinePass添加三維圖形輪廓邊線等。第6章主要介紹使用各種Loader加載各種格式的外部模型及動畫，如使用AssimpLoader加載Assimp模型，使用BabylonLoader加載Babylon模型，使用AWDLoader加載AWD模型，使用STLLoader加載STL模型，使用CTMLoader加載CTM模型，使用OBJLoader加載OBJ模型，使用ColladaLoader加載DAE模型并播放模型動畫，使用ObjectLoader加載JSON文件，使用Tween動畫控制皮膚模型狀態，使用Tween動畫拉伸和折疊PLY模型等。本書實用性強、技術新穎、貼近實戰、思路清晰、語言簡潔、干貨頗多。希望讀者在閱讀時更多地關注實例的開發思想，而不是具體的代碼邏輯。代碼技術總會不斷地更新，解決問題的思維卻歷久彌新。希望在讀完本書以后，讀者能夠產生“看得懂、學得會、做得出、有用途”的感覺；即使由于時間關系不能精讀全書，也能在實際開發工作中遇到問題時，想起本書中相同或類似的問題場景，快速找到解決方案。本書所有Three.js代碼(版本號r119)在IntelliJ IDEA環境編寫完成，在最新版的Firefox瀏覽器或Google Chrome瀏覽器測試成功。因此建議讀者在上述環境或條件下使用源代碼。所有源代碼不需要下載Three.js的其他文件，在使用時保持網絡暢通即可。此外需要注意： Three.js版本更新較快，因此在開發應用本書的源代碼時特別需要注意版本問題。全書所有內容和思想并非一人之力所能及，而是凝聚了眾多熱心人士的智慧并經過充分的提煉和總結而成，在此對他們表示崇高的敬意和衷心的感謝！由于時間關系和作者水平原因，少量內容可能存在認識不全面或偏頗的地方，以及一些疏漏和不當之處，敬請讀者批評指正。本書提供全部源代碼，讀者掃描封底刮刮卡內二維碼，獲得權限，再掃描下方二維碼即可下載本書的配套資源。由于本書為黑白印制，書中許多圖片無法呈現真實色彩和效果，因此配套資源中也包括了全書的彩色圖片，便于讀者對比學習。羅帥羅斌2021年5月于重慶渝北資源下載