課程大綱

一、模型射線拾取

1.模型標(biāo)注(熱點(diǎn))——平面網(wǎng)格模型Mesh 免費(fèi)試學(xué)

2.模型標(biāo)簽——精靈模型對象Sprite

3.模型的標(biāo)簽——HTML元素

4.HTML元素標(biāo)簽位置更新

5.模型標(biāo)簽—HTML實(shí)現(xiàn)一個(gè)好看的UI效果 免費(fèi)試學(xué)

6.模型標(biāo)簽——Canvas技術(shù)與threejs結(jié)合

7.Canvas作為精靈或網(wǎng)格模型標(biāo)簽的貼圖

8.CSS2DRenderer—HTML元素標(biāo)簽

9.CSS3DRenderer

10.標(biāo)簽坐標(biāo)問題—局部、世界坐標(biāo)

11.標(biāo)簽坐標(biāo)問題—幾何體頂點(diǎn)坐標(biāo)

12.標(biāo)簽坐標(biāo)問題—加載外部模型標(biāo)注案例

13.標(biāo)簽坐標(biāo)問題—幾何體偏移

14.射線投射器Raycaster和射線Ray介紹

15.射線Raycaster—鼠標(biāo)點(diǎn)選網(wǎng)格模型

16.點(diǎn)Points線Line精靈Sprite—拾取

17.射線碰撞檢測相關(guān)

18.射線拾取、模型標(biāo)簽坐標(biāo)變換—局部渲染

?

二、20.WebGL渲染器相關(guān)

1.全屏和局部區(qū)域渲染

2.Threejs畫布自適應(yīng)窗口尺寸變化(窗口事件

3.Three.js背景(圖片作為背景或設(shè)置顏色)

4.Three.js背景透明度(模型懸浮在網(wǎng)頁上)

5.WebGL渲染器鋸齒問題

6.幀緩沖區(qū)(顏色、深度、模板)

7.材質(zhì)控制渲染管線(深度測試)

8.Threejs視口.setViewport

9.剪裁測試( 剪裁方法setScissor )

10.渲染管線—模板測試(24分鐘)

11.剪裁剖切模型(.clippingPlanes)

12.添加剖切面封口(模板測試)

13.Three.js渲染結(jié)果保存為圖片

14.Three.js渲染更新總結(jié)

15.模型閃爍解釋-兩個(gè)平面重合或非常接近

16.透視投影相機(jī)導(dǎo)致的模型閃爍Z-fighting

17.渲染順序

?

三、相機(jī)Camera相關(guān)

1.相機(jī)動(dòng)畫

2.相機(jī)不同方向的投影視圖

3.旋轉(zhuǎn)canvas畫布渲染結(jié)果

6.獲得相機(jī)當(dāng)前視線方向，并沿著視線移動(dòng)

7.OrbitControls.js相機(jī)控件

8.OrbitControls輔助選擇相機(jī)視角

9.同步兩個(gè)相機(jī)的位置視線等信息

10.地圖導(dǎo)航控件MapControls

11.鼠標(biāo)單擊目的地，相機(jī)飛行漫游

12.相機(jī)控件與.lookAt無效

13.模型無法渲染或渲染不完整(相機(jī)參數(shù)）

14.包圍盒功能輔助你合理設(shè)置相機(jī)參數(shù)

15.正投影相機(jī)自適應(yīng)居中和全屏渲染模型

16.透視投影相機(jī)自適應(yīng)居中和全屏模型渲染

17.判斷mesh是否位于相機(jī)視錐體Frustum內(nèi)

?

四、材質(zhì)Material和渲染效果

1.渲染Mesh三角形邊線和頂點(diǎn)

2.渲染模型邊界線EdgesGeometry

3.幾何邊線和半透明渲染模型

4.模型隱藏( .visible )

5.霧化效果(Fog)

6.練習(xí)小案例—簡約地面效果 免費(fèi)試學(xué)

7.線寬lineWidth無效( 擴(kuò)展庫解決線寬 ).

8.模型高亮發(fā)光描邊

?

五、PBR材質(zhì)

1.PBR材質(zhì)簡介

2.PBR材質(zhì)渲染金屬效果例子

3.PBR材質(zhì)環(huán)境貼圖(金屬效果例子) 免費(fèi)試學(xué)

4.解析外部PBR模型(金屬度和粗糙度貼圖)

5.alphaMap透明度貼圖

?

六、紋理貼圖相關(guān)

1.序列幀動(dòng)畫(多張圖)

2.序列幀動(dòng)畫(單張圖，UV坐標(biāo))

3.矩形Mesh加背景透明png貼圖(場景標(biāo)注)

4.光柱效果 免費(fèi)試學(xué)

5.球體Mesh渲染全景圖

6.渲染全景圖(矩形Mesh拼接立方體空間)

7.一個(gè)貼圖加載完再加載另一個(gè)(Promise)

8.優(yōu)先加載視錐體內(nèi)Mesh的全景貼圖

9.矩形圖片剪裁為圓形渲染

?

七、著色器shader相關(guān)案例

1.圖片剪裁渲染為圓形(gl_PointCoord)

2.紋理貼圖像素值混合疊加(4分鐘)

3.透明度漸變(onBeforeCompile)

4.onBeforeCompile(灰度圖)

5.PointsMaterial方點(diǎn)變圓點(diǎn)

6.練習(xí)小案例—波浪特效1(24分鐘) 免費(fèi)試學(xué)

7.練習(xí)小案例—波浪特效2(圓點(diǎn)渲染)

8.練習(xí)小案例-波浪特效3(峰谷點(diǎn)大小不同)

?

八、頂點(diǎn)、曲線、幾何體

1.繪制三角函數(shù)曲線和波動(dòng)動(dòng)畫

2.BufferGeometory構(gòu)建一個(gè)加號

3.ShapeGeometry填充加號輪廓

4.樣條曲線繪制心形輪廓

5.幾何體表面積計(jì)算

6.多個(gè)幾何體合并為一個(gè)

7.山脈地形高度可視化(頂點(diǎn)顏色插值) 免費(fèi)試學(xué)

8.一段曲線顏色漸變

9.逐漸繪制(.setDrawRange)

10.細(xì)線飛線和飛線軌跡

11.粗線飛線

12.粗頭細(xì)尾飛線(自定義著色器) 免費(fèi)試學(xué)

13.軌跡線生成帶狀平面Mesh

14.getSpacedPoints

15.軌跡線生成帶狀平面Mesh

16.直線拐角自動(dòng)圓角化(貝賽爾曲線轉(zhuǎn)彎)

17.直線拐角自動(dòng)圓角化(圓弧轉(zhuǎn)彎)(21分鐘)

18.光點(diǎn)或小球沿著任意軌跡線運(yùn)動(dòng)

19.練習(xí)小案例—純代碼模擬樹和小樹林 免費(fèi)試學(xué)

?

九、外部模型加載解析

1.三維模型、美術(shù)、分工

2.三維模型導(dǎo)出格式問題

3.three.js編輯器editor簡介

4.three.js editor設(shè)置材質(zhì)和貼圖

5. GLTF格式簡介 (Web3D領(lǐng)域JPG)

6.加載GLTF格式文件

7.相機(jī)渲染范圍和外部模型尺寸匹配(26分鐘)

8.美術(shù)是否居中導(dǎo)出模型問題

9.模型導(dǎo)出角度和姿態(tài)調(diào)整問題美術(shù)導(dǎo)出注意

10.導(dǎo)出gltf格式是否包含光源對象

11.解析層級模型批量設(shè)置材質(zhì)(GLTF)

12.加載gltf包含外部貼圖.bin等文件

13.程序與美術(shù)協(xié)作(模型命名)

14.獲取模型加載進(jìn)度設(shè)置進(jìn)度條

15.解析外部模型骨骼關(guān)鍵幀動(dòng)畫(GLTF)

16.模型壓縮(Draco)

17.包圍盒計(jì)算模型位置(平移模型居中)

?

十、渲染性能優(yōu)化

1.查看渲染性能(stats.js計(jì)算渲染幀率)

2.資源占用和性能瓶頸CPU、內(nèi)存、GPU、顯存

3.控制redner執(zhí)行減少GPU資源占用

4.remove()移除場景不需要的對象

5.瀏覽器控制臺(tái)查看geometry內(nèi)存占用

6.three.js對象CPU內(nèi)存占用釋放

7.GPU內(nèi)存釋放.dispose()

8.幾何體和材質(zhì)盡量共享

9.幾何體合并

10.盡量選擇BufferGeometry

11.多細(xì)節(jié)層次模型Lod

?

十一、動(dòng)畫庫tweenjs

1.動(dòng)畫庫tweenjs簡介和引入項(xiàng)目

2.第一個(gè)threejs和tweenjs結(jié)合案例

3.多段tween動(dòng)畫串聯(lián)起來.chain()

4.批量創(chuàng)建tween動(dòng)畫片段并串聯(lián)

5.tween開始、暫停、繼續(xù)、延遲、重復(fù)

6.動(dòng)畫不同階段回調(diào)函數(shù)開始、執(zhí)行中、完成

7.一段tween完成后多個(gè)tween同步執(zhí)行(4分鐘)

8.緩動(dòng)算法.easing()

9.模型顏色漸變動(dòng)畫

10.模型或標(biāo)簽淡入淡出