Three.js教程：Face3對象定義Geometry的三角形面

推薦：將NSDT場景編輯器加入你的3D工具鏈

其他系列工具：NSDT簡石數(shù)字孿生

幾何體Geometry的三角面屬性geometry.faces和緩沖類型幾何體BufferGeometry頂點索引屬性BufferGeometry.index類似都是頂點位置數(shù)據(jù)的索引值,用來組織網(wǎng)格模型三角形的繪制。

學(xué)習(xí)本節(jié)課最好對照2.4 頂點索引復(fù)用頂點數(shù)據(jù)學(xué)習(xí)。

下面代碼自定義了一個由兩個三角形構(gòu)成的幾何體，兩個三角形有兩個頂點坐標(biāo)位置是重合的。

var geometry = new THREE.Geometry(); //聲明一個幾何體對象Geometry

var p1 = new THREE.Vector3(0, 0, 0); //頂點1坐標(biāo)
var p2 = new THREE.Vector3(0, 100, 0); //頂點2坐標(biāo)
var p3 = new THREE.Vector3(50, 0, 0); //頂點3坐標(biāo)
var p4 = new THREE.Vector3(0, 0, 100); //頂點4坐標(biāo)
//頂點坐標(biāo)添加到geometry對象
geometry.vertices.push(p1, p2, p3,p4);

// Face3構(gòu)造函數(shù)創(chuàng)建一個三角面
var face1 = new THREE.Face3(0, 1, 2);
//三角面每個頂點的法向量
var n1 = new THREE.Vector3(0, 0, -1); //三角面Face1頂點1的法向量
var n2 = new THREE.Vector3(0, 0, -1); //三角面2Face2頂點2的法向量
var n3 = new THREE.Vector3(0, 0, -1); //三角面3Face3頂點3的法向量
// 設(shè)置三角面Face3三個頂點的法向量
face1.vertexNormals.push(n1,n2,n3);

// 三角面2
var face2 = new THREE.Face3(0, 2, 3);
// 設(shè)置三角面法向量
face2.normal=new THREE.Vector3(0, -1, 0);

//三角面face1、face2添加到幾何體中
geometry.faces.push(face1,face2);

兩個三角形有6個頂點，但是兩個頂點位置重合的，可以設(shè)置4個頂點即可。

var p1 = new THREE.Vector3(0, 0, 0); //頂點1坐標(biāo)
var p2 = new THREE.Vector3(0, 100, 0); //頂點2坐標(biāo)
var p3 = new THREE.Vector3(50, 0, 0); //頂點3坐標(biāo)
var p4 = new THREE.Vector3(0, 0, 100); //頂點4坐標(biāo)
//頂點坐標(biāo)添加到geometry對象
geometry.vertices.push(p1, p2, p3,p4);

threejs提供了Face3對象構(gòu)建三角形，通過Face3構(gòu)建一個三角形，不要設(shè)置頂點位置坐標(biāo)數(shù)據(jù)，只需要通過數(shù)組索引值從geometry.vertices數(shù)組中獲得頂點位置坐標(biāo)數(shù)據(jù)。

geometry.vertices數(shù)組索引0, 1, 2對應(yīng)的頂點位置坐標(biāo)數(shù)據(jù)表示三角形1的三個頂點坐標(biāo)，索引0, 2, 3對應(yīng)的頂點位置坐標(biāo)數(shù)據(jù)表示三角形2的三個頂點坐標(biāo)。

// Face3構(gòu)造函數(shù)創(chuàng)建一個三角面
var face1 = new THREE.Face3(0, 1, 2);
// 三角面2
var face2 = new THREE.Face3(0, 2, 3);

前面課程將結(jié)果網(wǎng)格模型Mesh的幾何體Geometry本質(zhì)上都是一個一個三角形拼接而成，所以可以通過設(shè)置三角形的法線方向向量來表示幾何體表面各個位置的法線方向向量。

設(shè)置三角形法線方向向量有兩種方式，一種是直接定義三角形面的法線方向，另一個是定義三角形三個頂點的法線方向數(shù)據(jù)來表示三角形面法線方向。

使用三維向量THREE.Vector3表示三角形法線方向數(shù)值，然后賦值給三角形對象Face3的法線屬性Face3.normal。

// 三角面2
var face2 = new THREE.Face3(0, 2, 3);
// 設(shè)置三角面法向量
face2.normal=new THREE.Vector3(0, -1, 0);

換另一種方式，通過三角形面Face3的Face3.vertexNormals屬性給三角形的三個頂點分別設(shè)置一個頂點法線方向數(shù)據(jù)。

// Face3構(gòu)造函數(shù)創(chuàng)建一個三角面
var face1 = new THREE.Face3(0, 1, 2);
//三角面每個頂點的法向量
var n1 = new THREE.Vector3(0, 0, -1); //三角面Face1頂點1的法向量
var n2 = new THREE.Vector3(0, 0, -1); //三角面2Face2頂點2的法向量
var n3 = new THREE.Vector3(0, 0, -1); //三角面3Face3頂點3的法向量
// 設(shè)置三角面Face3三個頂點的法向量
face1.vertexNormals.push(n1,n2,n3);

三角形顏色設(shè)置和三角形法線方向設(shè)置類型，可以直接設(shè)置三角形顏色，也可以設(shè)置三角形三個頂點的顏色。

// 三角形1顏色
face1.color = new THREE.Color(0xffff00);
// 設(shè)置三角面face1三個頂點的顏色
face1.color = new THREE.Color(0xff00ff);

通過三角形面Face3的.vertexColors屬性設(shè)置三角形三個頂點顏色。

三個頂點顏色不同三角形面渲染的時候會進(jìn)行顏色插值計算，測到一個顏色漸變效果。

face1.vertexColors = [
  new THREE.Color(0xffff00),
  new THREE.Color(0xff00ff),
  new THREE.Color(0x00ffff),
]

使用頂點顏色數(shù)據(jù)的時候，注意設(shè)置材質(zhì)的屬性vertexColors屬性值為THREE.VertexColors。

注意設(shè)置三角形Face3的顏色對threejs網(wǎng)格模型Mesh有效，對于點模型Points、線模型Line是無效果，如果想設(shè)置點、線模型對應(yīng)的幾何體Geometry的頂點顏色，可以通過Geometry的頂點顏色屬性geometry.colors實現(xiàn)。

上一篇：Three.js教程：設(shè)置Geometry頂點位置、頂點顏色數(shù)據(jù) (mvrlink.com)

下一篇：Three.js教程：訪問幾何體對象的數(shù)據(jù) (mvrlink.com)