        Threejs實戰常用技巧培訓

 

 

 

一、模型射線拾取

1.模型標注(熱點)——平面網格模型Mesh

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

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

4.HTML元素標簽位置更新

5.模型標簽—HTML實現一個好看的UI效果

6.模型標簽——Canvas技術與threejs結合

7.Canvas作為精靈或網格模型標簽的貼圖

8.CSS2DRenderer—HTML元素標簽

9.CSS3DRenderer

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

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

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

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

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

15.射線Raycaster—鼠標點選網格模型

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

17.射線碰撞檢測相關

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

二、20.WebGL渲染器相關

1.全屏和局部區域渲染

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

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

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

5.WebGL渲染器鋸齒問題

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

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

8.Threejs視口.setViewport

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

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

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

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

13.Three.js渲染結果保存為圖片

14.Three.js渲染更新總結

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

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

17.渲染順序

三、相機Camera相關

1.相機動畫

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

3.旋轉canvas畫布渲染結果

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

7.OrbitControls.js相機控件

8.OrbitControls輔助選擇相機視角

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

10.地圖導航控件MapControls

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

12.相機控件與.lookAt無效

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

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

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

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

17.判斷mesh是否位于相機視錐體Frustum內

四、材質Material和渲染效果

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

2.渲染模型邊界線EdgesGeometry

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

4.模型隱藏( .visible )

5.霧化效果(Fog)

6.練習小案例—簡約地面效果

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

8.模型高亮發光描邊

五、PBR材質

1.PBR材質簡介

2.PBR材質渲染金屬效果例子

3.PBR材質環境貼圖(金屬效果例子)

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

5.alphaMap透明度貼圖

六、紋理貼圖相關

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

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

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

4.光柱效果 免費試學

5.球體Mesh渲染全景圖

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

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

8.優先加載視錐體內Mesh的全景貼圖

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

七、著色器shader相關案例

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

2.紋理貼圖像素值混合疊加

3.透明度漸變(onBeforeCompile)

4.onBeforeCompile(灰度圖)

5.PointsMaterial方點變圓點

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

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

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

八、頂點、曲線、幾何體

1.繪制三角函數曲線和波動動畫

2.BufferGeometory構建一個加號

3.ShapeGeometry填充加號輪廓

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

5.幾何體表面積計算

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

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

8.一段曲線顏色漸變

9.逐漸繪制(.setDrawRange)

10.細線飛線和飛線軌跡

11.粗線飛線

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

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

14.getSpacedPoints

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

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

17.直線拐角自動圓角化(圓弧轉彎)

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

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

九、外部模型加載解析

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

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

3.three.js編輯器editor簡介

4.three.js editor設置材質和貼圖

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

6.加載GLTF格式文件

7.相機渲染范圍和外部模型尺寸匹配

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

9.模型導出角度和姿態調整問題美術導出注意

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

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

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

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

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

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

16.模型壓縮(Draco)

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

十、渲染性能優化

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

2.資源占用和性能瓶頸CPU、內存、GPU、顯存

3.控制redner執行減少GPU資源占用

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

5.瀏覽器控制臺查看geometry內存占用

6.three.js對象CPU內存占用釋放

7.GPU內存釋放.dispose()

8.幾何體和材質盡量共享

9.幾何體合并

10.盡量選擇BufferGeometry

11.多細節層次模型Lod

十一、動畫庫tweenjs

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

2.第一個threejs和tweenjs結合案例

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

4.批量創建tween動畫片段并串聯

5.tween開始、暫停、繼續、延遲、重復

6.動畫不同階段回調函數開始、執行中、完成

7.一段tween完成后多個tween同步執行

8.緩動算法.easing()

9.模型顏色漸變動畫

10.模型或標簽淡入淡出