課程大綱

一、模型射線拾取

1.模型標注(熱點)——平面網(wǎng)格模型Mesh 免費試學

2.模型標簽——精靈模型對象Sprite

3.模型的標簽——HTML元素

4.HTML元素標簽位置更新

5.模型標簽—HTML實現(xiàn)一個好看的UI效果 免費試學

6.模型標簽——Canvas技術與threejs結(jié)合

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

8.CSS2DRenderer—HTML元素標簽

9.CSS3DRenderer

10.標簽坐標問題—局部、世界坐標

11.標簽坐標問題—幾何體頂點坐標

12.標簽坐標問題—加載外部模型標注案例

13.標簽坐標問題—幾何體偏移

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

15.射線Raycaster—鼠標點選網(wǎng)格模型

16.點Points線Line精靈Sprite—拾取

17.射線碰撞檢測相關

18.射線拾取、模型標簽坐標變換—局部渲染

?

二、20.WebGL渲染器相關

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

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

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

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.模型閃爍解釋-兩個平面重合或非常接近

16.透視投影相機導致的模型閃爍Z-fighting

17.渲染順序

?

三、相機Camera相關

1.相機動畫

2.相機不同方向的投影視圖

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

6.獲得相機當前視線方向，并沿著視線移動

7.OrbitControls.js相機控件

8.OrbitControls輔助選擇相機視角

9.同步兩個相機的位置視線等信息

10.地圖導航控件MapControls

11.鼠標單擊目的地，相機飛行漫游

12.相機控件與.lookAt無效

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

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

15.正投影相機自適應居中和全屏渲染模型

16.透視投影相機自適應居中和全屏模型渲染

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

?

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

1.渲染Mesh三角形邊線和頂點

2.渲染模型邊界線EdgesGeometry

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

4.模型隱藏( .visible )

5.霧化效果(Fog)

6.練習小案例—簡約地面效果 免費試學

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

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

?

五、PBR材質(zhì)

1.PBR材質(zhì)簡介

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

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

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

5.alphaMap透明度貼圖

?

六、紋理貼圖相關

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

2.序列幀動畫(單張圖，UV坐標)

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

4.光柱效果 免費試學

5.球體Mesh渲染全景圖

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

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

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

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

?

七、著色器shader相關案例

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

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

3.透明度漸變(onBeforeCompile)

4.onBeforeCompile(灰度圖)

5.PointsMaterial方點變圓點

6.練習小案例—波浪特效1(24分鐘) 免費試學

7.練習小案例—波浪特效2(圓點渲染)

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

?

八、頂點、曲線、幾何體

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

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

3.ShapeGeometry填充加號輪廓

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

5.幾何體表面積計算

6.多個幾何體合并為一個

7.山脈地形高度可視化(頂點顏色插值) 免費試學

8.一段曲線顏色漸變

9.逐漸繪制(.setDrawRange)

10.細線飛線和飛線軌跡

11.粗線飛線

12.粗頭細尾飛線(自定義著色器) 免費試學

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

14.getSpacedPoints

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

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

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

18.光點或小球沿著任意軌跡線運動

19.練習小案例—純代碼模擬樹和小樹林 免費試學

?

九、外部模型加載解析

1.三維模型、美術、分工

2.三維模型導出格式問題

3.three.js編輯器editor簡介

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

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

6.加載GLTF格式文件

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

8.美術是否居中導出模型問題

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

10.導出gltf格式是否包含光源對象

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

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

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

14.獲取模型加載進度設置進度條

15.解析外部模型骨骼關鍵幀動畫(GLTF)

16.模型壓縮(Draco)

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

?

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

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

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

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

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

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

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

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

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

9.幾何體合并

10.盡量選擇BufferGeometry

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

?

十一、動畫庫tweenjs

1.動畫庫tweenjs簡介和引入項目

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

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

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

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

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

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

8.緩動算法.easing()

9.模型顏色漸變動畫

10.模型或標簽淡入淡出