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