04.頂點概念、幾何體結構

絕大部分的三維模型，都是由無數個頂點組成三角面，無數個三角面來組成我們所看到的三維模型。

 

頂點位置數據解析渲染

下面通過一個例子，創建一個正方形

分析

一個正方形由2個三角形組成，一個三角形有3個頂點，所以創建一個正方形需要6個頂點數據

主要代碼

//1、定義頂點數據，三個爲一組（x、y、z）
var vertices = new Float32Array([
    //第1個三角形頂點數據
    0,0,0,
    0,5,0,
    5,0,0,
    
    //第2個三角形頂點數據
    5,5,0,
    0,5,0,
    5,0,0,
]);

//2、創建BufferAttribute，參數爲頂點數組，3代表3個數值組成一個頂點
var attribue = new THREE.BufferAttribute(vertices, 3);

//3、創建緩衝幾何體BufferGeometry
var geometry = new THREE.BufferGeometry();

//4、賦值頂點數據
geometry.attributes.position = attribue;

例子

自定義幾何體正方形

爲了更好的理解幾何體是由頂點構成的，可以把幾何體geometry作爲點模型Points而不是網格模型Mesh的參數，你會發現上面的六個點座標會渲染爲六個方形的點區域

點模型正方形

也可以用線模型

線模型正方形

查看下面一段代碼

var geometry = new THREE.BoxGeometry(100, 100, 100); //創建一個立方體幾何對象Geometry
var material = new THREE.MeshLambertMaterial({
  color: 0x0000ff
}); //材質對象Material
var mesh = new THREE.Mesh(geometry, material); //網格模型對象Mesh

你可以看出來立方體網格模型Mesh是由立方體幾何體geometry和材質material兩部分構成，立方體幾何體BoxGeometry本質上就是一系列的頂點構成，只是Threejs的APIBoxGeometry把頂點的生成細節封裝了，用戶可以直接使用。比如一個立方體網格模型，有6個面，每個面至少兩個三角形拼成一個矩形平面，每個三角形三個頂點構成，對於球體網格模型而言，同樣是通過三角形拼出來一個球面，三角形數量越多，網格模型表面越接近於球形。