學(xué)習(xí)ThreeJS的捷徑

本段內(nèi)容會(huì)寫(xiě)在0篇以外所有的，本人所編寫(xiě)的Threejs教程中

對(duì)，學(xué)習(xí)ThreeJS有捷徑
當(dāng)你有哪個(gè)函數(shù)不懂的時(shí)候，第一時(shí)間去翻一翻文檔
當(dāng)你有哪個(gè)效果不會(huì)做的時(shí)候，第一時(shí)間去翻一翻所有的案例，也許就能找到你想要的效果
最重要的一點(diǎn)，就是，絕對(duì)不要怕問(wèn)問(wèn)題，越怕找找別人問(wèn)題，你的問(wèn)題就會(huì)被拖的越久

如果你確定要走WebGL/ThreeJS的開(kāi)發(fā)者路線的話，以下行為可以讓你更快的學(xué)習(xí)ThreeJS

1. 沒(méi)事就把所有的文檔翻一遍，哪怕看不懂，也要留個(gè)印象，至少要知道Threejs有什么
2. 沒(méi)事多看看案例效果，當(dāng)你記憶的案例效果足夠多時(shí)，下次再遇到相似問(wèn)題時(shí)，你就有可能第一時(shí)間來(lái)找對(duì)應(yīng)的案例，能更快解決你自己的問(wèn)題
3. 上述案例不只是官網(wǎng)的案例，郭隆邦技術(shù)博客，躍焱邵隼，暮志未晚等站點(diǎn)均有不少優(yōu)質(zhì)案例，記得一并收藏
   http://www.yanhuangxueyuan.com/ 郭隆邦技術(shù)博客
   https://www.wellyyss.cn/ 躍焱邵隼
   http://www.wjceo.com/ 暮志未晚
   這三個(gè)站點(diǎn)是我最常逛的站點(diǎn)，推薦各位有事沒(méi)事逛一下，看看他們的案例和寫(xiě)法思路，絕對(duì)沒(méi)壞處

常用內(nèi)置幾何體介紹

在ThreeJS中，官方提供了大量的內(nèi)置幾何體，比如說(shuō)我們前面的教程中使用到的，BoxGeometry，PlaneGeometry
今天就著重對(duì)這些幾何體做一個(gè)基本介紹

所有幾何體均在官網(wǎng)中有對(duì)應(yīng)的文檔，在官網(wǎng)左上角的搜索框內(nèi)，搜索geometry即可

立方緩沖幾何體文檔

接下來(lái)，我們就按順序，來(lái)介紹每一個(gè)幾何體

立方緩沖幾何體BoxGeometry

前面都已經(jīng)都用過(guò)很多次了，但是這一次會(huì)詳細(xì)講解

立方緩沖幾何體屬于比較常用的案例幾何體

    function addMesh(){
        let geometry = new THREE.BoxGeometry(1,1,1,2,2,2);
        let material = new THREE.MeshBasicMaterial({
            color:"#ff0000",
            wireframe:true
        });
        mesh = new THREE.Mesh(geometry,material);
        scene.add(mesh);
    }

我們這次在材質(zhì)中添加了一個(gè)屬性：wireframe:true，這個(gè)屬性可以讓geometry以點(diǎn)線面的形式被渲染出來(lái)

這里我們的boxGeometry增加了后三個(gè)參數(shù)，這三個(gè)參數(shù)用于決定在 width，height,depth三個(gè)面的boxGeometry分段數(shù)，分段數(shù)越高，構(gòu)成這個(gè)box使用的點(diǎn)線面數(shù)量越多

如果和之前一樣，不寫(xiě)后面三個(gè)參數(shù)的話，后面三個(gè)參數(shù)的默認(rèn)值均為1的情況下，我們渲染出來(lái)的效果是這樣的

分段數(shù)的意義（該部分僅建議了解即可，無(wú)需深入）

分段數(shù)這個(gè)概念更多的是用于建模軟件，當(dāng)你擁有更多的點(diǎn)線面時(shí)，你就可以通過(guò)操作點(diǎn)線面來(lái)實(shí)現(xiàn)模型的變形操作，早期的threejs中，還使用著geometry的概念，geometry的概念中，就允許用戶(hù)操作點(diǎn)線面來(lái)對(duì)圖形進(jìn)行變形操作

	//該操作在最新版已失效
	geometry.vecties[0].set(x,y,z);

新版本對(duì)應(yīng)的操作：

	geometry.attributes.position.array[0] = x;
	geometry.attributes.position.array[1] = y;
	geometry.attributes.position.array[2] = z;

兩種操作方式的不同，是因?yàn)?，在早期，threejs中存在一個(gè)類(lèi)為 geometry，也同時(shí)存在一個(gè)類(lèi)為bufferGeomtry，但是因?yàn)間eometry會(huì)存在過(guò)多占用內(nèi)存和算力的問(wèn)題，這個(gè)類(lèi)最終被廢除了

而變形操作，無(wú)論是對(duì)新人還是老手來(lái)說(shuō)，都是一個(gè)比較麻煩的操作，這種問(wèn)題，一般交給建模師去處理就好，只有極少數(shù)情況下，需要你去將通用圖形變形的時(shí)候，也許你能用到這種概念

分段數(shù)的其他用途，暫時(shí)筆者在開(kāi)發(fā)中沒(méi)有發(fā)現(xiàn)，所以這里不做太多討論，如果在看博客的你有相關(guān)的想法的話，可以在本文下留言討論

構(gòu)造器：new BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)

上述構(gòu)造器只需要知道前三個(gè)屬性長(zhǎng)寬高即可，后面三個(gè)為分段數(shù)，分段數(shù)必須為整數(shù)

圓形緩沖幾何體CircleGeometry

圓形緩沖幾何體官方介紹

	let geometry = new THREE.CircleGeometry( 1, 32 );

構(gòu)造器：CircleGeometry(radius : Float, segments : Integer, thetaStart : Float, thetaLength : Float)
radius — 圓形的半徑，默認(rèn)值為1
segments — 分段（三角面）的數(shù)量，最小值為3，默認(rèn)值為8。
thetaStart — 第一個(gè)分段的起始角度，默認(rèn)為0。（three o’clock position）
thetaLength — 圓形扇區(qū)的中心角，通常被稱(chēng)為“θ”（西塔）。默認(rèn)值是2*Pi，這使其成為一個(gè)完整的圓。

官方的這段介紹可能比較專(zhuān)業(yè)，以下為個(gè)人解釋?zhuān)?/p>

比如說(shuō)想要?jiǎng)?chuàng)建一個(gè)半圓，我們從0開(kāi)始畫(huà)，然后讓畫(huà)筆畫(huà)到180度的位置停下

        let geometry = new THREE.CircleGeometry(1, 24,0,Math.PI);

比如說(shuō)想要?jiǎng)?chuàng)建一個(gè)倒半圓，我們從180度的位置開(kāi)始畫(huà)，然后畫(huà)到360度（180 + 180）停下，這樣就是一個(gè)下半圓

	let geometry = new THREE.CircleGeometry(1, 24,Math.PI,Math.PI);

這種圓形適合做基礎(chǔ)的餅狀圖，但是僅僅適合2D的餅狀圖，如果想要做3D的餅狀圖，可以選用下面的圓柱緩沖幾何體

圓柱緩沖幾何體CylinderGeometry

這里我們和官方的順序做了調(diào)換，第四個(gè)再講ConeGeometry(圓錐緩沖幾何體)

	let geometry = new THREE.CylinderGeometry(1, 1, 2, 32);

圓柱幾乎和上面的圓柱一樣，僅比圓形多兩個(gè)參數(shù)

構(gòu)造器：CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
radiusTop — 圓柱的頂部半徑，默認(rèn)值是1。
radiusBottom — 圓柱的底部半徑，默認(rèn)值是1。
height — 圓柱的高度，默認(rèn)值是1。
radialSegments — 圓柱側(cè)面周?chē)姆侄螖?shù)，默認(rèn)為8。
heightSegments — 圓柱側(cè)面沿著其高度的分段數(shù)，默認(rèn)值為1。
openEnded — 一個(gè)Boolean值，指明該圓錐的底面是開(kāi)放的還是封頂?shù)?。默認(rèn)值為false，即其底面默認(rèn)是封頂?shù)摹?br> thetaStart — 第一個(gè)分段的起始角度，默認(rèn)為0。（three o’clock position）
thetaLength — 圓柱底面圓扇區(qū)的中心角，通常被稱(chēng)為“θ”（西塔）。默認(rèn)值是2*Pi，這使其成為一個(gè)完整的圓柱。

圓柱高度就不解釋了
openEnded設(shè)置為true時(shí)，會(huì)創(chuàng)建一個(gè)圓型管而不是一個(gè)圓柱

比起圓來(lái)說(shuō)，圓柱更適合用于做餅狀圖，下面是一種餅狀圖演示
function addMesh(){

    let geometry1 = new THREE.CylinderGeometry(1, 1, 1, 32,1,false,0,Math.PI * 0.2);
    let material1 = new THREE.MeshStandardMaterial({color:"#ff0000"});
    let mesh1 = new THREE.Mesh(geometry1,material1);
    scene.add(mesh1);

    let geometry2 = new THREE.CylinderGeometry(1, 1, 1, 32,1,false,Math.PI * 0.2,Math.PI * 0.4);
    let material2 = new THREE.MeshStandardMaterial({color:"#8eff63"});
    let mesh2 = new THREE.Mesh(geometry2,material2);
    scene.add(mesh2);

    let geometry3 = new THREE.CylinderGeometry(1, 1, 1, 32,1,false,Math.PI * 0.6,Math.PI * 0.6);
    let material3 = new THREE.MeshStandardMaterial({color:"#1f99ff"});
    let mesh3 = new THREE.Mesh(geometry3,material3);
    scene.add(mesh3);

    let geometry4 = new THREE.CylinderGeometry(1, 1, 1, 32,1,false,Math.PI * 1.2,Math.PI * 0.8);
    let material4 = new THREE.MeshStandardMaterial({color:"#ff00e5"});
    let mesh4 = new THREE.Mesh(geometry4,material4);
    scene.add(mesh4);
}

這里對(duì)代碼就不做詳細(xì)解釋了，只要搞明白繪制起點(diǎn)，繪制多少角度的概念后，理解這個(gè)餅狀圖應(yīng)該不會(huì)太難

三角面相關(guān)（建議了解即可）

當(dāng)我們看了3個(gè)Wireframe效果下的模型后，我們發(fā)現(xiàn)，圖形上有很多個(gè)三角形，這個(gè)就是我們的三角面，在threejs中，所有的幾何體，都是由一個(gè)個(gè)三角面構(gòu)成，市面上常見(jiàn)的兩種構(gòu)成模型的方式，一種是使用三角面，一種是使用平行四邊形

具體的三角面構(gòu)成模型的原理，將在后續(xù)的BufferGeometry中提到

如果已經(jīng)提前學(xué)習(xí)了WebGL的話，后續(xù)在學(xué)習(xí)BufferGeometry原理時(shí)，學(xué)習(xí)難度會(huì)相應(yīng)降低很多

圓錐緩沖幾何體ConeGeometry

圓錐緩沖幾何體幾乎和上面圓柱的構(gòu)造器一致，唯一區(qū)別就是這里只需要傳入下底面的半徑即可

構(gòu)造器
ConeGeometry(radius : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
radius — 圓錐底部的半徑，默認(rèn)值為1。
height — 圓錐的高度，默認(rèn)值為1。
radialSegments — 圓錐側(cè)面周?chē)姆侄螖?shù)，默認(rèn)為8。
heightSegments — 圓錐側(cè)面沿著其高度的分段數(shù)，默認(rèn)值為1。
openEnded — 一個(gè)Boolean值，指明該圓錐的底面是開(kāi)放的還是封頂?shù)摹ＤJ(rèn)值為false，即其底面默認(rèn)是封頂?shù)摹?br> thetaStart — 第一個(gè)分段的起始角度，默認(rèn)為0。（three o’clock position）
thetaLength — 圓錐底面圓扇區(qū)的中心角，通常被稱(chēng)為“θ”（西塔）。默認(rèn)值是2*Pi，這使其成為一個(gè)完整的圓錐。

	let geometry = new THREE.ConeGeometry(0.5,2,16,1);

圓錐可以單獨(dú)使用做成3D箭頭，也可以搭配一個(gè)圓柱體做成一個(gè)高級(jí)3D箭頭

    function addMesh(){

        let geometry = new THREE.ConeGeometry(0.5,2,16,1);
        let material = new THREE.MeshStandardMaterial({color:"#ff0000"});
        let mesh = new THREE.Mesh(geometry,material);
        scene.add(mesh);

        let geometry2 = new THREE.CylinderGeometry(0.35,0.35,2,16,1).translate(0,-2,0);
        let material2 = new THREE.MeshStandardMaterial({color:"#ff0000"});
        let mesh2 = new THREE.Mesh(geometry2,material2);
        scene.add(mesh2);
    }

箭頭這里就僅做一個(gè)介紹，后續(xù)將會(huì)單獨(dú)開(kāi)一篇博客來(lái)講解如何制作一個(gè)可以指向目標(biāo)的箭頭

邊緣幾何體EdgesGeometry

邊緣幾何體本質(zhì)上是一個(gè)輔助對(duì)象，用于查看geometry的邊緣
構(gòu)造器
EdgesGeometry( geometry : BufferGeometry, thresholdAngle : Integer )
geometry — 任何一個(gè)幾何體對(duì)象。
thresholdAngle — 僅當(dāng)相鄰面的法線之間的角度（單位為角度）超過(guò)這個(gè)值時(shí)，才會(huì)渲染邊緣。默認(rèn)值為1。
該幾何體在后續(xù)加載模型的章節(jié)中會(huì)提到

形狀緩沖幾何體ShapeGeometry

講這個(gè)之前，就要先講Shape
shape的官方文檔

你可以使用Shape繪制出任何你想要的圖形，但是，需要你一個(gè)坐標(biāo)點(diǎn)一個(gè)坐標(biāo)點(diǎn)的去輸入你的繪制路徑

然后使用創(chuàng)建好的Shape，來(lái)創(chuàng)建ShapeGeometry

	let x = 0, y = 0;
	let heartShape = new THREE.Shape();
	heartShape.moveTo( x + 5, y + 5 );
	heartShape.bezierCurveTo( x + 5, y + 5, x + 4, y, x, y );
	heartShape.bezierCurveTo( x - 6, y, x - 6, y + 7,x - 6, y + 7 );
	heartShape.bezierCurveTo( x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19 );
	heartShape.bezierCurveTo( x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7 );
	heartShape.bezierCurveTo( x + 16, y + 7, x + 16, y, x + 10, y );
	heartShape.bezierCurveTo( x + 7, y, x + 5, y + 5, x + 5, y + 5 );
	
	let geometry = new THREE.ShapeGeometry( heartShape );
	let material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
	let mesh = new THREE.Mesh( geometry, material ) ;
	scene.add( mesh );

使用上面的代碼，可以創(chuàng)建出這樣的一個(gè)2D心形

shape相當(dāng)于繪制好的圖形，shapeGeometry才是能顯示出來(lái)的幾何體

shapeGeometry用于創(chuàng)建一些比較容易創(chuàng)建的簡(jiǎn)單幾何體，比如上面的心形，當(dāng)你使用其他的geometry無(wú)法創(chuàng)建那些圖形時(shí)，可以考慮使用ShapeGeometry

擠壓幾何體ExtrudeGeometry

擠壓幾何體可以理解為3D的ShapeGeometry，也是需要使用Shape來(lái)創(chuàng)建

將上面new ShapeGeometry，換成new ExtrudeGeometry，就出現(xiàn)了下面的效果

擠壓幾何體常用于使用Shape生成3D的柱狀體

文本緩沖幾何體TextGeometry

該幾何體為extrudeGeometry的子類(lèi)，后續(xù)在講添加3D文字時(shí)會(huì)講到

球緩沖幾何體SphereGeometry

構(gòu)造器：SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)
radius — 球體半徑，默認(rèn)為1。
widthSegments — 水平分段數(shù)（沿著經(jīng)線分段），最小值為3，默認(rèn)值為32。
heightSegments — 垂直分段數(shù)（沿著緯線分段），最小值為2，默認(rèn)值為16。
phiStart — 指定水平（經(jīng)線）起始角度，默認(rèn)值為0。。
phiLength — 指定水平（經(jīng)線）掃描角度的大小，默認(rèn)值為 Math.PI * 2。
thetaStart — 指定垂直（緯線）起始角度，默認(rèn)值為0。
thetaLength — 指定垂直（緯線）掃描角度大小，默認(rèn)值為 Math.PI。
該幾何體是通過(guò)掃描并計(jì)算圍繞著Y軸（水平掃描）和X軸（垂直掃描）的頂點(diǎn)來(lái)創(chuàng)建的。 因此，不完整的球體（類(lèi)似球形切片）可以通過(guò)為phiStart，phiLength，thetaStart和thetaLength設(shè)置不同的值來(lái)創(chuàng)建， 以定義我們開(kāi)始（或結(jié)束）計(jì)算這些頂點(diǎn)的起點(diǎn)（或終點(diǎn)）。

當(dāng)你能理解上面圓形的構(gòu)造器時(shí)，球的構(gòu)造器也無(wú)需過(guò)多的解釋?zhuān)侄螖?shù)越高，球體圓滑程度越高，想要制作半球的話，可以通過(guò)改變經(jīng)線緯線的初始位置，與繪制角度來(lái)制作

球體能做的東西可就太多了，比如說(shuō)我們常見(jiàn)的地球，太陽(yáng)，燈泡等，只要是個(gè)球體或者半球體的物體，均可以使用它來(lái)做

后續(xù)會(huì)有專(zhuān)門(mén)一篇博客來(lái)介紹如何制作一個(gè)地球

管道緩沖幾何體TubeGeometry

關(guān)于這個(gè)幾何體，將在后續(xù)寫(xiě)曲線與路徑的時(shí)候會(huì)做講解，本篇僅提一下名字

網(wǎng)格幾何體WireframeGeometry

構(gòu)造器：WireframeGeometry( geometry : BufferGeometry )
geometry — 任意幾何體對(duì)象。

網(wǎng)格幾何體其實(shí)是制作線框效果的另一種方式

網(wǎng)格幾何體實(shí)際上是一種線構(gòu)成的圖形，它與材質(zhì)中的wireframe的區(qū)別是，一種是使用geometry的方式，就是演員本身就是線條裝，而wireframe則是讓演員披上了透明到你只能看到線條的衣服，如果你在之前學(xué)習(xí)過(guò)WebGL底層，對(duì)這個(gè)理解起來(lái)會(huì)更容易

不常用幾何體簡(jiǎn)介

以下幾何體均在筆者的開(kāi)發(fā)與學(xué)習(xí)中從未使用過(guò)，僅建議去官網(wǎng)了解一下即可，有興趣的可以寫(xiě)幾個(gè)案例試試看

多面緩沖幾何體PolyhedronGeometry

官方解釋為：多面體在三維空間中具有一些平面的立體圖形。這個(gè)類(lèi)將一個(gè)頂點(diǎn)數(shù)組投射到一個(gè)球面上，之后將它們細(xì)分為所需的細(xì)節(jié)級(jí)別。 這個(gè)類(lèi)由DodecahedronGeometry、IcosahedronGeometry、OctahedronGeometry和TetrahedronGeometry 所使用，以生成它們各自的幾何結(jié)構(gòu)。

該幾何體是下面幾個(gè)幾何體的超類(lèi)，不建議直接使用

各種多面幾何體

十二面緩沖幾何體DodecahedronGeometry
二十面緩沖幾何體IcosahedronGeometry
八面緩沖幾何體OctahedronGeometry
四面緩沖幾何體TetrahedronGeometry

上述四種幾何體均可以通過(guò)調(diào)整參數(shù)讓它無(wú)限接近于球體，其他用途暫時(shí)筆者在開(kāi)發(fā)中未發(fā)現(xiàn)

車(chē)削緩沖幾何體LatheGeometry

車(chē)削緩沖幾何體更適合在建模軟件中使用，用于快速創(chuàng)建花瓶，碗碟之類(lèi)的，中心對(duì)稱(chēng)的物體，上面提到的箭頭也可以使用車(chē)削緩沖幾何體來(lái)創(chuàng)建

二維圓環(huán)緩沖幾何體RingGeometry

二維圓環(huán)筆者也沒(méi)有找到實(shí)際用途

圓環(huán)緩沖幾何體TorusGeometry

三位圓環(huán)可以用于制作輪胎，手鐲等物體，但是筆者在開(kāi)發(fā)中從未使用

圓環(huán)緩沖紐結(jié)幾何體TorusKnotGeometry

這個(gè)幾何體是官方案例中登場(chǎng)最多的幾何體，筆者認(rèn)為它是一種最適合寫(xiě)案例的幾何體文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-472479.html

到了這里，關(guān)于【ThreeJS基礎(chǔ)教程-初識(shí)Threejs】1.6各種各樣的幾何體的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！