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

推薦：將NSDT場(chǎng)景編輯器加入你的3D工具鏈

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

三角形顏色設(shè)置和三角形法線(xiàn)方向設(shè)置類(lèi)型，可以直接設(shè)置三角形顏色，也可以設(shè)置三角形三個(gè)頂點(diǎn)的顏色。

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

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

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

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

使用頂點(diǎn)顏色數(shù)據(jù)的時(shí)候，注意設(shè)置材質(zhì)的屬性vertexColors屬性值為T(mén)HREE.VertexColors。

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

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

下一篇：Three.js教程：訪(fǎng)問(wèn)幾何體對(duì)象的數(shù)據(jù) (mvrlink.com)