        Three.js 3D 引擎詳解與應(yīng)用開發(fā)培訓(xùn)

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