Three.js前端三維圖形開發(fā)案例集錦

第1章場景
001在場景中自定義光源繪制立方體
002使用正交照相機(jī)繪制多個(gè)立方體
003使用CameraHelper繪制正交照相機(jī)
004使用透視照相機(jī)繪制多個(gè)立方體
005使用CameraHelper繪制透視照相機(jī)
006使用透視照相機(jī)滾動(dòng)瀏覽全景圖
007使用鼠標(biāo)拖曳功能查看并縮放全景圖
008使用鼠標(biāo)拖曳功能播放全景視頻
009在場景中添加粒子實(shí)現(xiàn)星空背景
010使用六幅圖像的天空盒設(shè)置背景
011使用一個(gè)圖像文件創(chuàng)建天空盒
012使用TransformControls平移對(duì)象
013使用TransformControls拉伸對(duì)象
014使用TransformControls旋轉(zhuǎn)對(duì)象
015使用DragControls任意拖曳對(duì)象
016使用OrbitControls任意縮放對(duì)象
017使用OrbitControls旋轉(zhuǎn)照相機(jī)
018在多個(gè)對(duì)象中使用鼠標(biāo)選擇對(duì)象
019在鼠標(biāo)單擊對(duì)象時(shí)改變對(duì)象顏色
020使用線性霧設(shè)置場景的霧化效果
021使用線性霧渲染場景的多個(gè)對(duì)象
022使用指數(shù)霧設(shè)置場景的霧化效果
023在場景中使用ArrowHelper繪制箭頭
024在場景中使用AxesHelper繪制坐標(biāo)軸
025使用CSS3DRenderer渲染全景圖
026使用CSS3DRenderer渲染三維對(duì)象
027使用SVGRenderer渲染線條寬度
028使用多個(gè)渲染器渲染相同的場景
029在場景中統(tǒng)一設(shè)置所有對(duì)象的材質(zhì)
030在場景中統(tǒng)一調(diào)整所有對(duì)象的亮度
031使用JSON格式保存和加載網(wǎng)格對(duì)象
032使用JSON格式保存和加載整個(gè)場景
 
 
 
第2章幾何體
033使用圖像設(shè)置立方體的各個(gè)表面
034使用多個(gè)圖像設(shè)置立方體的表面
035使用多種顏色設(shè)置立方體的表面
036使用視頻設(shè)置立方體的各個(gè)表面
037使用顏色和視頻設(shè)置立方體表面
038使用畫布貼圖設(shè)置立方體的表面
039使用畫布動(dòng)畫設(shè)置立方體的表面
040使用天空盒背景設(shè)置立方體表面
041根據(jù)索引設(shè)置立方體face的材質(zhì)
042隱藏或顯示立方體的指定表面
043在場景中根據(jù)透明度繪制立方體
044在場景中繪制圓角化的立方體
045在場景中繪制居中顯示的魔方
046在場景中圍繞坐標(biāo)軸旋轉(zhuǎn)立方體
047在場景中根據(jù)名稱旋轉(zhuǎn)立方體
048在場景中繪制普通的圓柱體
049在場景中繪制被切割的圓柱體
050在場景中根據(jù)圓柱體繪制圓臺(tái)
051在場景中根據(jù)圓柱體繪制沙漏
052在場景中繪制旋轉(zhuǎn)的圓柱體
053在場景中實(shí)現(xiàn)動(dòng)態(tài)縮放圓柱體
054在場景中繪制普通的圓錐體
055在場景中繪制被切割的圓錐體
056在經(jīng)度方向上根據(jù)弧度繪制球體
057在緯度方向上根據(jù)弧度繪制球體
058在經(jīng)緯度方向上根據(jù)弧度繪制球體
059在場景中以嵌套方式繪制多個(gè)球體
060在場景中同時(shí)繪制球體和圓柱體
061在場景中繪制持續(xù)旋轉(zhuǎn)的球體
062在場景中繪制旋轉(zhuǎn)的地球模型
063在場景中實(shí)現(xiàn)小球圍繞大球旋轉(zhuǎn)的效果
064在場景中圍繞隱藏的中心旋轉(zhuǎn)球體
065在場景中實(shí)現(xiàn)沿著軌道旋轉(zhuǎn)球體的效果
066在場景中為球體添加彈跳動(dòng)畫
067在場景中繪制整周樣條曲線圖形
068在場景中繪制半周樣條曲線圖形
069在場景中繪制樣條曲線及其圖形
070在場景中繪制樣條曲線的線框盒
071在場景中繪制旋轉(zhuǎn)的圓環(huán)面
072在場景中繪制旋轉(zhuǎn)的扇面
073在場景中繪制正弦樣式的管子
074在場景中自定義曲線繪制管子
075在場景中自定義曲線繪制扭結(jié)
076在場景中自定義頂點(diǎn)繪制曲線
077在場景中繪制甜甜圈式的圓環(huán)
078在場景中根據(jù)弧度繪制半圓環(huán)
079在場景中繪制救生圈式的圓環(huán)
080在場景中繪制多次旋轉(zhuǎn)的圓環(huán)結(jié)
081在場景中隱藏或顯示圓環(huán)結(jié)
082在場景中繪制自定義多面體
083使用多面體方法繪制八面體
084使用多面體方法繪制四面體
085在場景中自定義頂點(diǎn)繪制凸面體
086在場景中繪制立方體的邊框線
087在場景中繪制二十面體的邊框線
088在場景中繪制十二面體的邊框線
089在場景中使用虛線繪制對(duì)象邊框
090在場景中繪制多條不連續(xù)的線段
091在場景中使用漸變色線條繪制圖形
092在場景中自定義線條的寬度和顏色
093在場景中根據(jù)二維坐標(biāo)繪制螺線
094在場景中根據(jù)三維坐標(biāo)繪制螺線
095在場景中使用虛線繪制空心矩形
096在場景中根據(jù)路徑拉伸圓角矩形
097在場景中根據(jù)路徑拉伸多個(gè)矩形
098在場景中拉伸自定義的SVG圖形
099在場景中根據(jù)頂點(diǎn)繪制空心三角形
100在場景中根據(jù)頂點(diǎn)繪制空心七邊形
101在場景中根據(jù)頂點(diǎn)繪制空心五角星
102在場景中根據(jù)指定厚度繪制五角星
103在場景中沿著隨機(jī)曲線拉伸五角星
104在場景中根據(jù)頂點(diǎn)繪制空心六角星
105在場景中根據(jù)邊數(shù)繪制多邊形
106在場景中使用曲線繪制桃心
107在場景中使用虛線繪制桃心
108在場景中根據(jù)厚度和斜角繪制桃心
109在場景中沿著桃心邊線移動(dòng)小球
110在場景中使用多個(gè)桃心構(gòu)建球體
111在場景中根據(jù)半徑和切片繪制圓
112在場景中根據(jù)指定參數(shù)繪制扇形
113在場景中根據(jù)指定參數(shù)繪制圓弧
114在場景中根據(jù)指定參數(shù)繪制橢圓
115通過自定義函數(shù)繪制克萊因瓶
116通過自定義函數(shù)繪制莫比烏斯環(huán)
117通過自定義函數(shù)繪制NURBS曲面
118通過自定義函數(shù)繪制波浪圖形
119通過自定義函數(shù)繪制平面圖形
120在場景中為平面圖形添加波浪
121在場景中繪制法向量貼圖波浪
122在場景中繪制太陽照射的波浪
123在場景中繪制自定義平面圖形
124在平面圖形的前后設(shè)置相同貼圖
125在平面圖形的前后設(shè)置不同貼圖
126使用FontLoader加載字庫繪制英文字母
127使用TTFLoader加載字庫繪制數(shù)字
128在場景中繪制自定義的斜角字母
129在場景中加載中文字庫繪制漢字
130使用精簡的自定義字庫繪制漢字
131在場景中繪制線條鏤空的漢字
132使用自定義屬性自定義線條顏色
133在場景中根據(jù)漢字實(shí)現(xiàn)漢字鏡像
134在場景中加載中文字庫繪制二維漢字
135在場景中的球體上添加文本標(biāo)簽
136在場景中的文本上添加火焰動(dòng)畫
137深度遍歷在組中的多個(gè)子對(duì)象
138使用InstancedBufferGeometry
139使用InstancedMesh提升渲染性能
第3章光源
140繪制DirectionalLight光源產(chǎn)生的陰影
141模糊DirectionalLight光源產(chǎn)生的陰影
142繪制DirectionalLight光源的輔助線
143繪制PointLight光源產(chǎn)生的陰影
144繪制PointLight光源的輔助線
145繪制PointLight光源的光線陰影
146繪制SpotLight光源產(chǎn)生的陰影
147繪制SpotLight光源的輔助線
148繪制HemisphereLight光源的輔助線
149繪制RectAreaLight光源的輔助圖形
150繪制多個(gè)光源照射球體產(chǎn)生的陰影
151在場景中自定義環(huán)境光的強(qiáng)度
152在場景中實(shí)現(xiàn)飄移的特殊光暈鏡頭
第4章材質(zhì)
153使用MeshBasicMaterial設(shè)置表面顏色
154使用MeshBasicMaterial創(chuàng)建材質(zhì)數(shù)組
155在MeshBasicMaterial中啟用透明度
156在MeshBasicMaterial中使用普通貼圖
157在MeshBasicMaterial中使用環(huán)境貼圖
158自定義MeshBasicMaterial的貼圖樣式
159創(chuàng)建線框風(fēng)格的MeshBasicMaterial
160使用MeshBasicMaterial混合其他材質(zhì)
161根據(jù)視頻創(chuàng)建MeshBasicMaterial材質(zhì)
162在MeshStandardMaterial中使用ao貼圖
163在MeshStandardMaterial中使用移位貼圖
164在MeshMatcapMaterial中設(shè)置matcap
165使用MeshNormalMaterial創(chuàng)建多色表面
166使用MeshNormalMaterial創(chuàng)建多色字母
167使用MeshNormalMaterial繪制法向量
168在MeshNormalMaterial中設(shè)置著色器
169扁平化MeshNormalMaterial創(chuàng)建的球體
170使用MeshDepthMaterial淡化多個(gè)圖形
171使用MeshDepthMaterial繪制隨機(jī)圖形
172使用MeshDepthMaterial繪制圓環(huán)結(jié)
173使用MeshDepthMaterial混合其他材質(zhì)
174在場景屬性中設(shè)置MeshDepthMaterial
175在MeshPhongMaterial中使用普通貼圖
176在MeshPhongMaterial中使用高光貼圖
177在MeshPhongMaterial中使用法向量貼圖
178在MeshPhongMaterial中使用凹凸貼圖
179在MeshPhongMaterial中鏡像平鋪貼圖
180在MeshPhongMaterial中重復(fù)平鋪貼圖
181在MeshPhongMaterial中使用剪裁平面
182使用MeshLambertMaterial呈現(xiàn)局部照射
183在MeshLambertMaterial中使用普通貼圖
184在MeshLambertMaterial中使用環(huán)境貼圖
185在MeshLambertMaterial中使用光照貼圖
186設(shè)置MeshLambertMaterial貼圖重復(fù)方式
187在MeshLambertMaterial中實(shí)現(xiàn)發(fā)光的效果
188在MeshLambertMaterial中實(shí)現(xiàn)形變動(dòng)畫
189在MeshLambertMaterial中啟用反射特效
190使用SpriteMaterial繪制平面粒子
191使用SpriteMaterial隨機(jī)繪制粒子
192根據(jù)畫布內(nèi)容創(chuàng)建SpriteMaterial
193使用普通貼圖創(chuàng)建SpriteMaterial
194根據(jù)顏色和尺寸創(chuàng)建PointsMaterial
195在PointsMaterial中自定義粒子形狀
196使用普通貼圖創(chuàng)建PointsMaterial
197使用漸變紋理貼圖創(chuàng)建PointsMaterial
198使用PointsMaterial創(chuàng)建雨滴下落動(dòng)畫
199使用PointsMaterial創(chuàng)建雪花飄舞動(dòng)畫
200使用PointsMaterial創(chuàng)建粒子波動(dòng)動(dòng)畫
201使用ShaderMaterial創(chuàng)建自定義著色器
202使用ShaderMaterial自定義顏色飽和度
203使用ShaderMaterial將彩色轉(zhuǎn)換為灰度
204使用ShaderMaterial高亮顯示凹面和凸面
205使用ShaderMaterial自定義字母線條顏色
206使用ShaderMaterial動(dòng)態(tài)改變貼圖的顏色
207使用ShaderMaterial實(shí)現(xiàn)持續(xù)燃燒的大火
208使用ShaderMaterial實(shí)現(xiàn)變換的時(shí)空漩渦
209使用外部著色器自定義ShaderMaterial
210使用LineDashedMaterial繪制高斯帕曲線
第5章后期特效
211在場景中的三維圖形上添加馬賽克
212在場景中的三維圖形上添加小灰點(diǎn)
213在場景中的三維圖形上添加懷舊特效
214在場景中的三維圖形上添加重影特效
215在場景中的三維圖形上添加特藝彩色
216在場景中的三維圖形上添加鋸齒特效
217在場景中的三維圖形上添加泛光特效
218在場景中的三維圖形上添加輝光特效
219在場景中的三維圖形上添加老電影特效
220在場景中的三維圖形上添加電脈沖特效
221在場景中的三維圖形上添加漂白特效
222在場景中的三維圖形上添加光暈特效
223在場景中的三維圖形上添加聚焦特效
224在場景中的三維圖形上添加模糊特效
225在場景中的三維圖形上添加三角形模糊
226在場景中的三維圖形上添加拖尾特效
227根據(jù)在場景中的三維圖形添加水平鏡像
228根據(jù)在場景中的三維圖形添加垂直鏡像
229對(duì)在場景中的三維圖形進(jìn)行水平移軸
230對(duì)在場景中的三維圖形進(jìn)行垂直移軸
231對(duì)在場景中的三維圖形進(jìn)行伽馬校正
232對(duì)在場景中的三維圖形進(jìn)行顏色校正
233對(duì)在場景中的三維圖形使用顏色過濾
234自定義在場景中的三維圖形顏色色調(diào)
235自定義在場景中的三維圖形顏色飽和度
236自定義在場景中的三維圖形顏色對(duì)比度
237自定義在場景中的三維圖形顏色亮度
238自定義在場景中的三維圖形光亮度
239使用Sobel算子檢測三維圖形邊緣
240使用FreiChenShader檢測三維圖形邊緣
241在場景中的三維圖形上添加輪廓邊線
242在場景中根據(jù)三維圖形實(shí)現(xiàn)萬花筒變換
243在場景中以三維眼鏡視覺查看三維圖形
第6章外部模型
244使用AssimpLoader加載Assimp模型
245使用BabylonLoader加載Babylon模型
246使用LegacyJSONLoader加載JSON文件
247使用MTLLoader加載模型材質(zhì)
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加載圓環(huán)結(jié)模型
265使用PDBLoader加載PDB模型
266使用PCDLoader加載PCD模型
267使用GLTFLoader加載GLTF模型
268使用GLTFLoader加載GLB模型
269使用ColladaLoader加載DAE模型
270加載并播放DAE格式的模型動(dòng)畫
271加載并播放GLB格式的模型動(dòng)畫
272加載并播放MMD格式的模型動(dòng)畫
273使用Tween動(dòng)畫控制皮膚模型狀態(tài)
274使用Tween動(dòng)畫拉伸和折疊PLY模型
275使用DDSLoader加載DDS圖像文件
276使用TGALoader加載TGA圖像文件
277使用ImageBitmapLoader加載圖像
278使用SubdivisionModifier細(xì)化模型