Three.js 前端三維圖形開發案例集錦

本書以“問題描述+解決方案”的模式，使用二百多個實例介紹了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細化模型