| WebGL 基礎(chǔ)鞏固：主要全面鞏固WebGL 基礎(chǔ)內(nèi)容，全面梳理WebGL基礎(chǔ)知識(shí)點(diǎn)，Three.js是基于WebGl API的封裝，全面了解WebGL有助于更好的理解Threejs各項(xiàng)API背后邏輯和基本概念。 |
| 目標(biāo)： 掌握前端開發(fā)重點(diǎn)內(nèi)容，熟悉WebGL基本原理 |
1. 前端基礎(chǔ)
- 前端重點(diǎn)內(nèi)容
- 項(xiàng)目搭建
2.WebGL 基礎(chǔ)
- WebGL 基本原理
- WebGL 是如何工作的
- WebGL 著色器和 GLSL
3.圖像處理：
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 更少代碼，更多樂趣
- WebGL 繪制多個(gè)東西
- WebGL 場景圖
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)了解場景，相機(jī)，頂點(diǎn)等概念 |
1. Threejs第一個(gè)3D場景(HTML框架文件)
- 創(chuàng)建HTML
- 旋轉(zhuǎn)動(dòng)畫、requestAnimationFrame周期性渲染
- 鼠標(biāo)操作三維場景旋轉(zhuǎn)縮放
- 場景插入新的幾何體
- 設(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的三角面
- 訪問幾何體對(duì)象的數(shù)據(jù)
- 幾何體旋轉(zhuǎn)、縮放、平移變換
3. 材質(zhì)對(duì)象
- 1.常用材質(zhì)介紹
- 2.材質(zhì)共有屬性、私有屬性
|
| 目標(biāo)： 熟悉Threejs基本原理，重點(diǎn)了解光源，層級(jí)模型，幾何體等概念，通過當(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
|
| Threejs 詳解 ：第三天主要進(jìn)入Threejs收尾內(nèi)容 詳解Threejs剩余API，結(jié)合第二天內(nèi)容完成第一個(gè)Threejs項(xiàng)目制作 |
| 目標(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
- 中國城市PM2.5可視化案例
- 樹林效果
- 下雨場景效果模擬
|
| 目標(biāo)： 熟悉Threejs基本原理，通過兩天內(nèi)容可以獨(dú)立完成Threejs項(xiàng)目開發(fā) |
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)秀插件介紹 |
