課程大綱： Threejs實(shí)戰(zhàn)常用技巧培訓(xùn)
一、模型射線拾取
1.模型標(biāo)注(熱點(diǎn))——平面網(wǎng)格模型Mesh
2.模型標(biāo)簽——精靈模型對(duì)象Sprite
3.模型的標(biāo)簽——HTML元素
4.HTML元素標(biāo)簽位置更新
5.模型標(biāo)簽—HTML實(shí)現(xiàn)一個(gè)好看的UI效果
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)問(wèn)題—局部、世界坐標(biāo)
11.標(biāo)簽坐標(biāo)問(wèn)題—幾何體頂點(diǎn)坐標(biāo)
12.標(biāo)簽坐標(biāo)問(wèn)題—加載外部模型標(biāo)注案例
13.標(biāo)簽坐標(biāo)問(wèn)題—幾何體偏移
14.射線投射器Raycaster和射線Ray介紹
15.射線Raycaster—鼠標(biāo)點(diǎn)選網(wǎng)格模型
16.點(diǎn)Points線Line精靈Sprite—拾取
17.射線碰撞檢測(cè)相關(guān)
18.射線拾取、模型標(biāo)簽坐標(biāo)變換—局部渲染
二、20.WebGL渲染器相關(guān)
1.全屏和局部區(qū)域渲染
2.Threejs畫(huà)布自適應(yīng)窗口尺寸變化(窗口事件
3.Three.js背景(圖片作為背景或設(shè)置顏色)
4.Three.js背景透明度(模型懸浮在網(wǎng)頁(yè)上)
5.WebGL渲染器鋸齒問(wèn)題
6.幀緩沖區(qū)(顏色、深度、模板)
7.材質(zhì)控制渲染管線(深度測(cè)試)
8.Threejs視口.setViewport
9.剪裁測(cè)試( 剪裁方法setScissor )
10.渲染管線—模板測(cè)試(24分鐘)
11.剪裁剖切模型(.clippingPlanes)
12.添加剖切面封口(模板測(cè)試)
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)畫(huà)
2.相機(jī)不同方向的投影視圖
3.旋轉(zhuǎn)canvas畫(huà)布渲染結(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無(wú)效
13.模型無(wú)法渲染或渲染不完整(相機(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í)小案例—簡(jiǎn)約地面效果
7.線寬lineWidth無(wú)效( 擴(kuò)展庫(kù)解決線寬 ).
8.模型高亮發(fā)光描邊
五、PBR材質(zhì)
1.PBR材質(zhì)簡(jiǎn)介
2.PBR材質(zhì)渲染金屬效果例子
3.PBR材質(zhì)環(huán)境貼圖(金屬效果例子)
4.解析外部PBR模型(金屬度和粗糙度貼圖)
5.alphaMap透明度貼圖
六、紋理貼圖相關(guān)
1.序列幀動(dòng)畫(huà)(多張圖)
2.序列幀動(dòng)畫(huà)(單張圖，UV坐標(biāo))
3.矩形Mesh加背景透明png貼圖(場(chǎng)景標(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.紋理貼圖像素值混合疊加
3.透明度漸變(onBeforeCompile)
4.onBeforeCompile(灰度圖)
5.PointsMaterial方點(diǎn)變圓點(diǎn)
6.練習(xí)小案例—波浪特效1(24分鐘)
7.練習(xí)小案例—波浪特效2(圓點(diǎn)渲染)
8.練習(xí)小案例-波浪特效3(峰谷點(diǎn)大小不同)
八、頂點(diǎn)、曲線、幾何體
1.繪制三角函數(shù)曲線和波動(dòng)動(dòng)畫(huà)
2.BufferGeometory構(gòu)建一個(gè)加號(hào)
3.ShapeGeometry填充加號(hào)輪廓
4.樣條曲線繪制心形輪廓
5.幾何體表面積計(jì)算
6.多個(gè)幾何體合并為一個(gè)
7.山脈地形高度可視化(頂點(diǎn)顏色插值)
8.一段曲線顏色漸變
9.逐漸繪制(.setDrawRange)
10.細(xì)線飛線和飛線軌跡
11.粗線飛線
12.粗頭細(xì)尾飛線(自定義著色器)
13.軌跡線生成帶狀平面Mesh
14.getSpacedPoints
15.軌跡線生成帶狀平面Mesh
16.直線拐角自動(dòng)圓角化(貝賽爾曲線轉(zhuǎn)彎)
17.直線拐角自動(dòng)圓角化(圓弧轉(zhuǎn)彎)
18.光點(diǎn)或小球沿著任意軌跡線運(yùn)動(dòng)
19.練習(xí)小案例—純代碼模擬樹(shù)和小樹(shù)林
九、外部模型加載解析
1.三維模型、美術(shù)、分工
2.三維模型導(dǎo)出格式問(wèn)題
3.three.js編輯器editor簡(jiǎn)介
4.three.js editor設(shè)置材質(zhì)和貼圖
5. GLTF格式簡(jiǎn)介 (Web3D領(lǐng)域JPG)
6.加載GLTF格式文件
7.相機(jī)渲染范圍和外部模型尺寸匹配
8.美術(shù)是否居中導(dǎo)出模型問(wèn)題
9.模型導(dǎo)出角度和姿態(tài)調(diào)整問(wèn)題美術(shù)導(dǎo)出注意
10.導(dǎo)出gltf格式是否包含光源對(duì)象
11.解析層級(jí)模型批量設(shè)置材質(zhì)(GLTF)
12.加載gltf包含外部貼圖.bin等文件
13.程序與美術(shù)協(xié)作(模型命名)
14.獲取模型加載進(jìn)度設(shè)置進(jìn)度條
15.解析外部模型骨骼關(guān)鍵幀動(dòng)畫(huà)(GLTF)
16.模型壓縮(Draco)
17.包圍盒計(jì)算模型位置(平移模型居中)
十、渲染性能優(yōu)化
1.查看渲染性能(stats.js計(jì)算渲染幀率)
2.資源占用和性能瓶頸CPU、內(nèi)存、GPU、顯存
3.控制redner執(zhí)行減少GPU資源占用
4.remove()移除場(chǎng)景不需要的對(duì)象
5.瀏覽器控制臺(tái)查看geometry內(nèi)存占用
6.three.js對(duì)象CPU內(nèi)存占用釋放
7.GPU內(nèi)存釋放.dispose()
8.幾何體和材質(zhì)盡量共享
9.幾何體合并
10.盡量選擇BufferGeometry
11.多細(xì)節(jié)層次模型Lod
十一、動(dòng)畫(huà)庫(kù)tweenjs
1.動(dòng)畫(huà)庫(kù)tweenjs簡(jiǎn)介和引入項(xiàng)目
2.第一個(gè)threejs和tweenjs結(jié)合案例
3.多段tween動(dòng)畫(huà)串聯(lián)起來(lái).chain()
4.批量創(chuàng)建tween動(dòng)畫(huà)片段并串聯(lián)
5.tween開(kāi)始、暫停、繼續(xù)、延遲、重復(fù)
6.動(dòng)畫(huà)不同階段回調(diào)函數(shù)開(kāi)始、執(zhí)行中、完成
7.一段tween完成后多個(gè)tween同步執(zhí)行
8.緩動(dòng)算法.easing()
9.模型顏色漸變動(dòng)畫(huà)
10.模型或標(biāo)簽淡入淡出
加入高級(jí)會(huì)員獲得助教答疑
