【帶著canvas去流浪（11）】Three.js入門學(xué)習(xí)筆記

目錄

* 一. 資料推薦及建議 <https://www.cnblogs.com/dashnowords/p/11182474.html#一.-資料推薦及建議>
* 二. Three.js中的基本概念
<https://www.cnblogs.com/dashnowords/p/11182474.html#二.-three.js中的基本概念>
* 三.重點(diǎn)筆記 <https://www.cnblogs.com/dashnowords/p/11182474.html#三.重點(diǎn)筆記>
* 四.補(bǔ)充示例 <https://www.cnblogs.com/dashnowords/p/11182474.html#四.補(bǔ)充示例>


示例代碼托管在：http://www.github.com/dashnowords/blogs
<https://github.com/dashnowords/blogs/tree/master/Demo/threejs-demo/%E5%B8%A6%E7%9D%80canvas%E5%8E%BB%E6%B5%81%E6%B5%AA%EF%BC%8811%EF%BC%89-demo>

博客園地址：《大史住在大前端》原創(chuàng)博文目錄 <https://www.cnblogs.com/dashnowords/p/10127926.html>

華為云社區(qū)地址：【你要的前端打怪升級(jí)指南】
<https://bbs.huaweicloud.com/blogs/8ae7e6420a4611e9bd5a7ca23e93a891>

一. 資料推薦及建議

1.官方文檔

很詳細(xì)，但是API部分單獨(dú)理解也很難，屬于工具書。官方github倉庫里提供了海量的插件和demo頁面。

2.在CSDN上找到的一個(gè)【Three.js系列博文】
<https://blog.csdn.net/qq_30100043/article/category/7003591/5?>

內(nèi)容相當(dāng)全，包括了three.js的基本知識(shí)，官方倉庫的實(shí)例說明，插件說明等等，是筆者學(xué)習(xí)的主線。

3.上面的內(nèi)容最好是做個(gè)大作業(yè)實(shí)踐一下

4.想要學(xué)習(xí)底層知識(shí)的話，需要學(xué)習(xí)的資料是線性代數(shù)和WebGL編程指南。

二. Three.js中的基本概念

官方文檔中的新手示例過于簡(jiǎn)單，所以本節(jié)對(duì)Three.js中的概念進(jìn)行一些補(bǔ)充描述：

*
客觀三要素：場(chǎng)景Scene，相機(jī)Camera，渲染器Renderer

具體用法可以看官方文檔的【新手示例Demo】
<https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene%3E>

*
光照Light

THREE.js提供了點(diǎn)光源，射線光源，平行光，環(huán)境光的等多種光源來模擬光。

*
幾何模型Geometry

生成實(shí)體的第一步是要建立幾何模型geometry，THREE.js根據(jù)構(gòu)建數(shù)據(jù)的數(shù)據(jù)類型將幾何模型分為Geometry和BufferGeometry
兩個(gè)大類，每種內(nèi)置類型都可以使用其中任何一種來實(shí)現(xiàn)，BufferGeometry基于定型數(shù)組運(yùn)作，使用起來要求更嚴(yán)格也更復(fù)雜，但性能相對(duì)更好。THREE.js
中內(nèi)置了包含立方體，球體，多面體數(shù)十種常見的幾何體，也可以將canvas繪制的平面圖形拉伸成為實(shí)體。

*
材質(zhì)Material

第二步是為實(shí)體選擇材質(zhì)material
，材質(zhì)是描述幾何體表面對(duì)于光照的表現(xiàn)的，是像金屬表面那種高光，還是像粗糙表面那樣會(huì)對(duì)光進(jìn)行漫反射的，幾何體的不同表面也可以選擇不同的材質(zhì)。材質(zhì)material
需要和貼圖texture的合理搭配才能使最終的實(shí)體效果更加逼真，比如你給一個(gè)立方體選擇了鏡面反射的材料，但是又貼了磚頭墻面的紋理，最終效果就會(huì)很詭異。

*
貼圖紋理Texture

第三步是為實(shí)體選擇貼圖紋理texture
，紋理通常是通過引入圖片來生成，通過貼圖可以讓幾何體呈現(xiàn)為它所代表的實(shí)體模型，比如一個(gè)球體，你貼上足球的紋理，它就是足球，貼上籃球紋理，把周圍環(huán)境作為貼圖貼在它表面，它就是水晶球。
texture通常是在material實(shí)例化時(shí)通過指定map參數(shù)來關(guān)聯(lián)的。

*
實(shí)體Object

大多數(shù)博文的示例中只使用到了Mesh（網(wǎng)格實(shí)體）這一種類型的實(shí)體模型，實(shí)際上THREE.js中還提供了Points（粒子點(diǎn)集實(shí)體）,Line（線性實(shí)體），
Skeleton（骨骼動(dòng)畫實(shí)體）等等多種抽象實(shí)體模型來構(gòu)建模型。實(shí)體的實(shí)例化依賴于geometry幾何模型實(shí)例和material材料實(shí)例，最終調(diào)用場(chǎng)景的add
方法將實(shí)體實(shí)例添加進(jìn)場(chǎng)景中，實(shí)體就可以被渲染器renderer渲染出來。

*
動(dòng)畫的更新

動(dòng)畫的更新實(shí)際上和二維動(dòng)畫是一樣的，也是通過requestAnimationFrame和逐幀動(dòng)畫來實(shí)現(xiàn)的。

三.重點(diǎn)筆記

*
webGL中的世界坐標(biāo)是以屏幕中心為原點(diǎn)(0,0,0)的，面對(duì)屏幕時(shí)，右為正X，上為正Y，指向屏幕外為正Z。

*
dat.GUI是個(gè)非常棒的動(dòng)態(tài)調(diào)試工具，官方倉庫地址：https://github.com/dataarts/dat.gui
<https://github.com/dataarts/dat.gui>

*
THREE.CameraHelper類可以生成相機(jī)視錐輔助線，非常有用。

*
常見材質(zhì)的區(qū)別如下：MeshLambertMaterial材質(zhì)適合表現(xiàn)漫反射表面，MeshStandardMaterial和MeshPhongMaterial
適合表現(xiàn)鏡面反射表面,MeshBasicMaterial是不響應(yīng)光照的基本材質(zhì)。

*
THREE.PointLight是真正的點(diǎn)光源，THREE.SpotLight是射線光源

*
flyControls控件相當(dāng)于為相機(jī)實(shí)現(xiàn)第一人稱視角，玩過CS的應(yīng)該都懂。

*
材質(zhì)的基本定義：



*
生成網(wǎng)格實(shí)例時(shí)傳入wireframe:true即可以網(wǎng)格形式展示幾何體。

*
THREE.LatheGeometry
相當(dāng)于三維建模軟件中的“根據(jù)樣條曲線生成回轉(zhuǎn)體”，構(gòu)造函數(shù)的參數(shù)中沒有回轉(zhuǎn)軸，此處官方文檔中有說明：車削是繞著Y軸來進(jìn)行旋轉(zhuǎn)的。

*
THREE.shapeGeometry,THREE.ExtrudeGeometry等一類由平面生成3D實(shí)體的模型，感興趣的可以嘗試一下三維建模軟件
solidworks，完全是一個(gè)路數(shù)，對(duì)理解這些抽象幾何實(shí)體很有幫助。

*
三維的動(dòng)畫和二維動(dòng)畫的原理沒什么區(qū)別，都是通過逐幀動(dòng)畫實(shí)現(xiàn)的。

*
AnimationMixer是場(chǎng)景中特定對(duì)象的動(dòng)畫播放器，場(chǎng)景中有多個(gè)獨(dú)立動(dòng)畫時(shí)，可以為每一個(gè)對(duì)象使用一個(gè)AnimationMixer。

*
變形動(dòng)畫的實(shí)現(xiàn)過程：獲得animationMixer實(shí)例,獲得clip實(shí)例，獲得action實(shí)例，最后調(diào)用
action.setDuration().play()開啟動(dòng)畫播放。

*
morph和skeleton動(dòng)畫對(duì)比，morph文件更大加載更慢，但實(shí)際在網(wǎng)頁上計(jì)算量更??；骨骼動(dòng)畫文件更小，當(dāng)在網(wǎng)頁上運(yùn)行時(shí)需要進(jìn)行更多計(jì)算。

*
反光表面是通過材質(zhì)實(shí)例化時(shí)修改envMap屬性實(shí)現(xiàn)的。

*
舞臺(tái)背景scene.background是可以設(shè)置貼圖紋理的。

*
調(diào)整貼圖的

四.補(bǔ)充示例

第15節(jié)-關(guān)于物體陰影

后來發(fā)現(xiàn)這個(gè)問題在第27節(jié)有說明。

許多demo都無法生成投影，投影不僅需要設(shè)置光線和物體的castShadow = true ,receiveShadow = true
,同時(shí)需要選擇能夠響應(yīng)光線的材質(zhì)，另外，陰影需要獨(dú)立的相機(jī)去拍，默認(rèn)是一個(gè)正交相機(jī)，需要正確調(diào)整其參數(shù)才能夠顯示陰影
,參數(shù)配置錯(cuò)誤時(shí)可能會(huì)顯示一半陰影或者馬賽克黑區(qū)：
//初始化燈光 function initLight(color) { //添加環(huán)境光 ambientLight = new
THREE.AmbientLight(0x404040) scene.add(ambientLight); //添加平衡光 light = new
THREE.DirectionalLight( 0xffffff ); light.castShadow = true;
light.shadow.camera.near = 0.1; // default light.shadow.camera.far = 1000; //
default light.shadow.camera.left= -5; // default light.shadow.camera.top= 10;
// default light.position.set(60,30,0); scene.add(light); }


另外，可以通過開啟相機(jī)輔助功能查看陰影相機(jī)的視錐，并配合dat.GUI等其他工具進(jìn)行調(diào)節(jié)：
shadowCameraHelper = new THREE.CameraHelper( light.shadow.camera );
scene.add(shadowCameraHelper);


第46節(jié)-關(guān)于將svg拉伸為實(shí)體

原文中提到的transformSVGPathExposed函數(shù)和官方代碼倉lib里的腳本已經(jīng)找不到了，新版的官方文檔中已經(jīng)聽過了SVGLoader來完成svg
到shape的轉(zhuǎn)換，具體用法可參考SVGLoader文檔
<https://threejs.org/docs/index.html#examples/zh/loaders/SVGLoader>
，官方倉庫的example中提供了webgl_loader_svg.html示例文件，我們?cè)谄渲猩宰鞲膭?dòng)，將轉(zhuǎn)換后的shape作為參數(shù)來得到拉伸體實(shí)例
THREE.ExtrudeGeometry，就可以看到讀入的svg被拉伸了：



第58節(jié)-重點(diǎn)：用THREE.Raycaster實(shí)現(xiàn)交互

這里很重要，是3D模型能響應(yīng)用戶交互行為的關(guān)鍵。后文的第101節(jié)也有這部分知識(shí)的說明

官方文檔中已經(jīng)提供了示例代碼，平面坐標(biāo)到3D坐標(biāo)轉(zhuǎn)換的部分如果不明白，可以看這篇博文ThreeJS中的點(diǎn)擊與交互——Raycaster的用法
<https://segmentfault.com/a/1190000010490845>,筆者也提供了示例demo供參考。



第85節(jié)：用morphTargetInfluences實(shí)現(xiàn)動(dòng)畫（簡(jiǎn)稱Morph動(dòng)畫）

關(guān)于Morph動(dòng)畫的基本原理摘抄如下(原文鏈接
<https://blog.csdn.net/jcq521045349/article/details/52829189>)：

The value is a scalar that determines the effect of a morph target. A morph
target is another list of verticies (same length) that go along side the
original list of verticies. Say we have a list of size 2 (a line),
var list1 = [0.1, -0.2]
and a morph target:
var list2 = [0.2, -0.3]
the scalar value is used like so:
finalVertexPosition = list1[0] + (list2[0] * scalar);

使用時(shí)需要在Geometry實(shí)例構(gòu)造函數(shù)的配置項(xiàng)中開啟morphTargets: true,目標(biāo)幾何體的點(diǎn)集vertices相當(dāng)于上面的list1
,存放在目標(biāo)集合體geometry實(shí)例morphTargets數(shù)組中的向量相當(dāng)于上面的list2（它可以存放多個(gè)），而每一個(gè)morphTargets
中的變形向量對(duì)原物體的影響系數(shù)存放在morphTargetInfluences數(shù)組中，取值為-1~1,相當(dāng)于上面的scalar，通過連續(xù)改變
morphTargetInfluences的值就可以實(shí)現(xiàn)變形動(dòng)畫，morphTargetInfluences是mesh實(shí)例的屬性而不是 geometry的屬性。

第101節(jié)：3D世界坐標(biāo)求平面坐標(biāo)

文中提及的localToWorld方法實(shí)際上繼承自O(shè)bject3D這個(gè)父類，當(dāng)前版本的方法簽名是：
Object3D.localToWorld(target:THREE.Vector3):target
也就是說調(diào)用的時(shí)候需要傳一個(gè)空的Vector3實(shí)例，然后結(jié)果會(huì)被填充在里面，文中那種無參調(diào)用的模式會(huì)報(bào)錯(cuò)。其他的按照原文的方法就可以反求二維空間的坐標(biāo)了。

• ? 上一篇：Appium+python自動(dòng)化（二十六）- 煙花一瞬，曇花一現(xiàn) -Toast提示（超詳解）
• ? 下一篇：委托與事件-委托事件案例（三）