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

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

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

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

學(xué)習本節課最好對照2.4 頂點(diǎn)索引復用頂點(diǎn)數據學(xué)習。

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

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

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

// Face3構造函數創(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的法向量
// 設置三角面Face3三個(gè)頂點(diǎn)的法向量
face1.vertexNormals.push(n1,n2,n3);

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

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

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

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

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

geometry.vertices數組索引0, 1, 2對應的頂點(diǎn)位置坐標數據表示三角形1的三個(gè)頂點(diǎn)坐標，索引0, 2, 3對應的頂點(diǎn)位置坐標數據表示三角形2的三個(gè)頂點(diǎn)坐標。

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

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

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

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

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

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

// Face3構造函數創(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的法向量
// 設置三角面Face3三個(gè)頂點(diǎn)的法向量
face1.vertexNormals.push(n1,n2,n3);

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

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

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

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

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

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

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

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

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