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