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

第1章場(chǎng)景
001在場(chǎng)景中自定義光源繪制立方體
002使用正交照相機(jī)繪制多個(gè)立方體
003使用CameraHelper繪制正交照相機(jī)
004使用透視照相機(jī)繪制多個(gè)立方體
005使用CameraHelper繪制透視照相機(jī)
006使用透視照相機(jī)滾動(dòng)瀏覽全景圖
007使用鼠標(biāo)拖曳功能查看并縮放全景圖
008使用鼠標(biāo)拖曳功能播放全景視頻
009在場(chǎng)景中添加粒子實(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è)置場(chǎng)景的霧化效果
021使用線性霧渲染場(chǎng)景的多個(gè)對(duì)象
022使用指數(shù)霧設(shè)置場(chǎng)景的霧化效果
023在場(chǎng)景中使用ArrowHelper繪制箭頭
024在場(chǎng)景中使用AxesHelper繪制坐標(biāo)軸
025使用CSS3DRenderer渲染全景圖
026使用CSS3DRenderer渲染三維對(duì)象
027使用SVGRenderer渲染線條寬度
028使用多個(gè)渲染器渲染相同的場(chǎng)景
029在場(chǎng)景中統(tǒng)一設(shè)置所有對(duì)象的材質(zhì)
030在場(chǎng)景中統(tǒng)一調(diào)整所有對(duì)象的亮度
031使用JSON格式保存和加載網(wǎng)格對(duì)象
032使用JSON格式保存和加載整個(gè)場(chǎng)景
 
 
 
第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在場(chǎng)景中根據(jù)透明度繪制立方體
044在場(chǎng)景中繪制圓角化的立方體
045在場(chǎng)景中繪制居中顯示的魔方
046在場(chǎng)景中圍繞坐標(biāo)軸旋轉(zhuǎn)立方體
047在場(chǎng)景中根據(jù)名稱旋轉(zhuǎn)立方體
048在場(chǎng)景中繪制普通的圓柱體
049在場(chǎng)景中繪制被切割的圓柱體
050在場(chǎng)景中根據(jù)圓柱體繪制圓臺(tái)
051在場(chǎng)景中根據(jù)圓柱體繪制沙漏
052在場(chǎng)景中繪制旋轉(zhuǎn)的圓柱體
053在場(chǎng)景中實(shí)現(xiàn)動(dòng)態(tài)縮放圓柱體
054在場(chǎng)景中繪制普通的圓錐體
055在場(chǎng)景中繪制被切割的圓錐體
056在經(jīng)度方向上根據(jù)弧度繪制球體
057在緯度方向上根據(jù)弧度繪制球體
058在經(jīng)緯度方向上根據(jù)弧度繪制球體
059在場(chǎng)景中以嵌套方式繪制多個(gè)球體
060在場(chǎng)景中同時(shí)繪制球體和圓柱體
061在場(chǎng)景中繪制持續(xù)旋轉(zhuǎn)的球體
062在場(chǎng)景中繪制旋轉(zhuǎn)的地球模型
063在場(chǎng)景中實(shí)現(xiàn)小球圍繞大球旋轉(zhuǎn)的效果
064在場(chǎng)景中圍繞隱藏的中心旋轉(zhuǎn)球體
065在場(chǎng)景中實(shí)現(xiàn)沿著軌道旋轉(zhuǎn)球體的效果
066在場(chǎng)景中為球體添加彈跳動(dòng)畫
067在場(chǎng)景中繪制整周樣條曲線圖形
068在場(chǎng)景中繪制半周樣條曲線圖形
069在場(chǎng)景中繪制樣條曲線及其圖形
070在場(chǎng)景中繪制樣條曲線的線框盒
071在場(chǎng)景中繪制旋轉(zhuǎn)的圓環(huán)面
072在場(chǎng)景中繪制旋轉(zhuǎn)的扇面
073在場(chǎng)景中繪制正弦樣式的管子
074在場(chǎng)景中自定義曲線繪制管子
075在場(chǎng)景中自定義曲線繪制扭結(jié)
076在場(chǎng)景中自定義頂點(diǎn)繪制曲線
077在場(chǎng)景中繪制甜甜圈式的圓環(huán)
078在場(chǎng)景中根據(jù)弧度繪制半圓環(huán)
079在場(chǎng)景中繪制救生圈式的圓環(huán)
080在場(chǎng)景中繪制多次旋轉(zhuǎn)的圓環(huán)結(jié)
081在場(chǎng)景中隱藏或顯示圓環(huán)結(jié)
082在場(chǎng)景中繪制自定義多面體
083使用多面體方法繪制八面體
084使用多面體方法繪制四面體
085在場(chǎng)景中自定義頂點(diǎn)繪制凸面體
086在場(chǎng)景中繪制立方體的邊框線
087在場(chǎng)景中繪制二十面體的邊框線
088在場(chǎng)景中繪制十二面體的邊框線
089在場(chǎng)景中使用虛線繪制對(duì)象邊框
090在場(chǎng)景中繪制多條不連續(xù)的線段
091在場(chǎng)景中使用漸變色線條繪制圖形
092在場(chǎng)景中自定義線條的寬度和顏色
093在場(chǎng)景中根據(jù)二維坐標(biāo)繪制螺線
094在場(chǎng)景中根據(jù)三維坐標(biāo)繪制螺線
095在場(chǎng)景中使用虛線繪制空心矩形
096在場(chǎng)景中根據(jù)路徑拉伸圓角矩形
097在場(chǎng)景中根據(jù)路徑拉伸多個(gè)矩形
098在場(chǎng)景中拉伸自定義的SVG圖形
099在場(chǎng)景中根據(jù)頂點(diǎn)繪制空心三角形
100在場(chǎng)景中根據(jù)頂點(diǎn)繪制空心七邊形
101在場(chǎng)景中根據(jù)頂點(diǎn)繪制空心五角星
102在場(chǎng)景中根據(jù)指定厚度繪制五角星
103在場(chǎng)景中沿著隨機(jī)曲線拉伸五角星
104在場(chǎng)景中根據(jù)頂點(diǎn)繪制空心六角星
105在場(chǎng)景中根據(jù)邊數(shù)繪制多邊形
106在場(chǎng)景中使用曲線繪制桃心
107在場(chǎng)景中使用虛線繪制桃心
108在場(chǎng)景中根據(jù)厚度和斜角繪制桃心
109在場(chǎng)景中沿著桃心邊線移動(dòng)小球
110在場(chǎng)景中使用多個(gè)桃心構(gòu)建球體
111在場(chǎng)景中根據(jù)半徑和切片繪制圓
112在場(chǎng)景中根據(jù)指定參數(shù)繪制扇形
113在場(chǎng)景中根據(jù)指定參數(shù)繪制圓弧
114在場(chǎng)景中根據(jù)指定參數(shù)繪制橢圓
115通過自定義函數(shù)繪制克萊因瓶
116通過自定義函數(shù)繪制莫比烏斯環(huán)
117通過自定義函數(shù)繪制NURBS曲面
118通過自定義函數(shù)繪制波浪圖形
119通過自定義函數(shù)繪制平面圖形
120在場(chǎng)景中為平面圖形添加波浪
121在場(chǎng)景中繪制法向量貼圖波浪
122在場(chǎng)景中繪制太陽照射的波浪
123在場(chǎng)景中繪制自定義平面圖形
124在平面圖形的前后設(shè)置相同貼圖
125在平面圖形的前后設(shè)置不同貼圖
126使用FontLoader加載字庫繪制英文字母
127使用TTFLoader加載字庫繪制數(shù)字
128在場(chǎng)景中繪制自定義的斜角字母
129在場(chǎng)景中加載中文字庫繪制漢字
130使用精簡(jiǎn)的自定義字庫繪制漢字
131在場(chǎng)景中繪制線條鏤空的漢字
132使用自定義屬性自定義線條顏色
133在場(chǎng)景中根據(jù)漢字實(shí)現(xiàn)漢字鏡像
134在場(chǎng)景中加載中文字庫繪制二維漢字
135在場(chǎng)景中的球體上添加文本標(biāo)簽
136在場(chǎng)景中的文本上添加火焰動(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在場(chǎng)景中自定義環(huán)境光的強(qiáng)度
152在場(chǎng)景中實(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在場(chǎng)景屬性中設(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在場(chǎng)景中的三維圖形上添加馬賽克
212在場(chǎng)景中的三維圖形上添加小灰點(diǎn)
213在場(chǎng)景中的三維圖形上添加懷舊特效
214在場(chǎng)景中的三維圖形上添加重影特效
215在場(chǎng)景中的三維圖形上添加特藝彩色
216在場(chǎng)景中的三維圖形上添加鋸齒特效
217在場(chǎng)景中的三維圖形上添加泛光特效
218在場(chǎng)景中的三維圖形上添加輝光特效
219在場(chǎng)景中的三維圖形上添加老電影特效
220在場(chǎng)景中的三維圖形上添加電脈沖特效
221在場(chǎng)景中的三維圖形上添加漂白特效
222在場(chǎng)景中的三維圖形上添加光暈特效
223在場(chǎng)景中的三維圖形上添加聚焦特效
224在場(chǎng)景中的三維圖形上添加模糊特效
225在場(chǎng)景中的三維圖形上添加三角形模糊
226在場(chǎng)景中的三維圖形上添加拖尾特效
227根據(jù)在場(chǎng)景中的三維圖形添加水平鏡像
228根據(jù)在場(chǎng)景中的三維圖形添加垂直鏡像
229對(duì)在場(chǎng)景中的三維圖形進(jìn)行水平移軸
230對(duì)在場(chǎng)景中的三維圖形進(jìn)行垂直移軸
231對(duì)在場(chǎng)景中的三維圖形進(jìn)行伽馬校正
232對(duì)在場(chǎng)景中的三維圖形進(jìn)行顏色校正
233對(duì)在場(chǎng)景中的三維圖形使用顏色過濾
234自定義在場(chǎng)景中的三維圖形顏色色調(diào)
235自定義在場(chǎng)景中的三維圖形顏色飽和度
236自定義在場(chǎng)景中的三維圖形顏色對(duì)比度
237自定義在場(chǎng)景中的三維圖形顏色亮度
238自定義在場(chǎng)景中的三維圖形光亮度
239使用Sobel算子檢測(cè)三維圖形邊緣
240使用FreiChenShader檢測(cè)三維圖形邊緣
241在場(chǎng)景中的三維圖形上添加輪廓邊線
242在場(chǎng)景中根據(jù)三維圖形實(shí)現(xiàn)萬花筒變換
243在場(chǎng)景中以三維眼鏡視覺查看三維圖形
第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ì)化模型