課程大綱： Three.js 3D 引擎詳解與應(yīng)用開發(fā)培訓(xùn)
目標(biāo)： 掌握前端開發(fā)重點(diǎn)內(nèi)容，熟悉WebGL基本原理
1. 前端基礎(chǔ)
前端重點(diǎn)內(nèi)容
項(xiàng)目搭建
2.WebGL 基礎(chǔ)
WebGL 基本原理
WebGL 是如何工作的
WebGL 著色器和 GLSL
3.圖像處理：
WebGL 圖像處理
4.2D 轉(zhuǎn)換、旋轉(zhuǎn)、伸縮、矩陣
WebGL 2D 圖像轉(zhuǎn)換
WebGL 2D 圖像旋轉(zhuǎn)
WebGL 2D 圖像伸縮
WebGL 2D 矩陣
目標(biāo)： 熟悉WebGL基本原理，嘗試動(dòng)手完成一個(gè)WebGL項(xiàng)目
1. 3D
WebGL 3D 正交
WebGL 3D 透視
WebGL 3D 攝像機(jī)
2.結(jié)構(gòu)與組織
WebGL 更少代碼，更多樂(lè)趣
WebGL 繪制多個(gè)東西
WebGL 場(chǎng)景圖
3. WebGL實(shí)踐
WebGL 基礎(chǔ)鞏固：主要全面鞏固WebGL 基礎(chǔ)內(nèi)容，全面梳理WebGL基礎(chǔ)知識(shí)點(diǎn)，Three.js是基于WebGl API的封裝，全面了解WebGL有助于更好的理解Threejs各項(xiàng)API背后邏輯和基本概念。
目標(biāo)： 熟悉Threejs基本原理，重點(diǎn)了解場(chǎng)景，相機(jī)，頂點(diǎn)等概念
1. Threejs第一個(gè)3D場(chǎng)景(HTML框架文件)
創(chuàng)建HTML
旋轉(zhuǎn)動(dòng)畫、requestAnimationFrame周期性渲染
鼠標(biāo)操作三維場(chǎng)景旋轉(zhuǎn)縮放
場(chǎng)景插入新的幾何體
設(shè)置材質(zhì)效果
光照效果設(shè)置
2. 頂點(diǎn)概念、幾何體結(jié)和
頂點(diǎn)位置數(shù)據(jù)解析渲染
頂點(diǎn)顏色數(shù)據(jù)插值計(jì)算
頂點(diǎn)法向量數(shù)據(jù)光照計(jì)算
頂點(diǎn)索引復(fù)用頂點(diǎn)數(shù)據(jù)
設(shè)置Geometry頂點(diǎn)位置、頂點(diǎn)顏色數(shù)據(jù)
Face3對(duì)象定義Geometry的三角面
訪問(wèn)幾何體對(duì)象的數(shù)據(jù)
幾何體旋轉(zhuǎn)、縮放、平移變換
3. 材質(zhì)對(duì)象
1.常用材質(zhì)介紹
2.材質(zhì)共有屬性、私有屬性
目標(biāo)： 熟悉Threejs基本原理，重點(diǎn)了解光源，層級(jí)模型，幾何體等概念，通過(guò)當(dāng)日內(nèi)容進(jìn)行課堂實(shí)踐，加深理解
1. 點(diǎn)線面模型對(duì)象
點(diǎn)、線、網(wǎng)格模型介紹
模型對(duì)象旋轉(zhuǎn)平移縮放變換
對(duì)象克隆clone復(fù)制copy
2. 光源對(duì)象
光照原理和常見光源類型
陰影投影計(jì)
基類Light和Object3D
3. 層級(jí)模型、樹結(jié)構(gòu)
組對(duì)象Group、層級(jí)模型
對(duì)象節(jié)點(diǎn)命名、查找、遍歷
本地位置坐標(biāo)、世界位置坐標(biāo)
4. 幾何體對(duì)象、曲線、三維建模
常見幾何體和曲線API介紹
圓弧線繪制(直線、橢圓、圓弧)、基類Curve
樣條曲線、貝賽爾曲線
多個(gè)線條組合曲線CurvePath
曲線路徑管道成型TubeGeometry
旋轉(zhuǎn)成型LatheGeometry
Shape對(duì)象和輪廓填充ShapeGeometry
拉伸掃描成型ExtrudeGeometry
Threejs
目標(biāo)： 熟悉Threejs基本原理，重點(diǎn)了解紋理貼圖，相機(jī)。
1. 紋理貼圖
創(chuàng)建紋理貼圖
UV映射原理(頂點(diǎn)紋理坐標(biāo))
數(shù)組材質(zhì)、材質(zhì)索引materialIndex
紋理對(duì)象Texture(陣列、偏移、旋轉(zhuǎn)...)
canvas畫布、視頻作為紋理貼圖
凹凸貼圖、法線貼圖(壓縮模型)
光照貼圖添加陰影
高光貼圖
環(huán)境貼圖
10.數(shù)據(jù)紋理對(duì)象DataTexture
2. 相機(jī)對(duì)象(投影方式)
正投影和透視投影相機(jī)
窗口變化自適應(yīng)渲染
3. 精靈模型、粒子系統(tǒng)
精靈模型對(duì)象Sprite
中國(guó)城市PM2.5可視化案例
樹林效果
下雨場(chǎng)景效果模擬
1. 幀動(dòng)畫模塊
編輯關(guān)鍵幀并解析播放
解析外部模型的的幀動(dòng)畫
播放設(shè)置(暫停、時(shí)間段、時(shí)間點(diǎn))
2. 骨骼動(dòng)畫、變形動(dòng)畫
骨骼動(dòng)畫原理
加載外部模型骨骼動(dòng)畫
變形目標(biāo)動(dòng)畫原理
解析外部模型變形目標(biāo)數(shù)據(jù)
3. 模型文件加載
Three.js數(shù)據(jù)結(jié)構(gòu)、導(dǎo)入導(dǎo)出
加載stl文件并解析
加載obj文件(幾何體、材質(zhì)、貼圖)
加載FBX并解析骨骼動(dòng)畫
手鐲在線預(yù)覽(商品展示)
4. Threejs 項(xiàng)目實(shí)踐 完成DIY項(xiàng)目
5. Threejs 社區(qū)分享，優(yōu)秀插件介紹
加入高級(jí)會(huì)員獲得助教答疑
