課程大綱： Three.js 3D 引擎詳解與應用開發培訓
目標： 掌握前端開發重點內容，熟悉WebGL基本原理
1. 前端基礎
前端重點內容
項目搭建
2.WebGL 基礎
WebGL 基本原理
WebGL 是如何工作的
WebGL 著色器和 GLSL
3.圖像處理：
WebGL 圖像處理
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. 材質對象
1.常用材質介紹
2.材質共有屬性、私有屬性
目標： 熟悉Threejs基本原理，重點了解光源，層級模型，幾何體等概念，通過當日內容進行課堂實踐，加深理解
1. 點線面模型對象
點、線、網格模型介紹
模型對象旋轉平移縮放變換
對象克隆clone復制copy
2. 光源對象
光照原理和常見光源類型
陰影投影計
基類Light和Object3D
3. 層級模型、樹結構
組對象Group、層級模型
對象節點命名、查找、遍歷
本地位置坐標、世界位置坐標
4. 幾何體對象、曲線、三維建模
常見幾何體和曲線API介紹
圓弧線繪制(直線、橢圓、圓弧)、基類Curve
樣條曲線、貝賽爾曲線
多個線條組合曲線CurvePath
曲線路徑管道成型TubeGeometry
旋轉成型LatheGeometry
Shape對象和輪廓填充ShapeGeometry
拉伸掃描成型ExtrudeGeometry
Threejs
目標： 熟悉Threejs基本原理，重點了解紋理貼圖，相機。
1. 紋理貼圖
創建紋理貼圖
UV映射原理(頂點紋理坐標)
數組材質、材質索引materialIndex
紋理對象Texture(陣列、偏移、旋轉...)
canvas畫布、視頻作為紋理貼圖
凹凸貼圖、法線貼圖(壓縮模型)
光照貼圖添加陰影
高光貼圖
環境貼圖
10.數據紋理對象DataTexture
2. 相機對象(投影方式)
正投影和透視投影相機
窗口變化自適應渲染
3. 精靈模型、粒子系統
精靈模型對象Sprite
中國城市PM2.5可視化案例
樹林效果
下雨場景效果模擬
1. 幀動畫模塊
編輯關鍵幀并解析播放
解析外部模型的的幀動畫
播放設置(暫停、時間段、時間點)
2. 骨骼動畫、變形動畫
骨骼動畫原理
加載外部模型骨骼動畫
變形目標動畫原理
解析外部模型變形目標數據
3. 模型文件加載
Three.js數據結構、導入導出
加載stl文件并解析
加載obj文件(幾何體、材質、貼圖)
加載FBX并解析骨骼動畫
手鐲在線預覽(商品展示)
4. Threejs 項目實踐 完成DIY項目
5. Threejs 社區分享，優秀插件介紹
加入高級會員獲得助教答疑
