1. 程式人生 > >three.js頂點概念

three.js頂點概念

為什麼會有頂點的存在

在three中有個物體元素的基類,通過設定頂點的個數來呈現不同的幾何體,一個頂點一般是三個引數即xyz的座標點,如果設定兩個引數,則z軸預設為0 

基類中有個attributes的位置屬性屬性,(定義的頂點位置型別是陣列,表示幾個位置引數為一個頂點num型別)

var geometry = new THREE.BufferGeometry(); //建立一個Buffer型別幾何體物件  即基類

var vertices = new Float32Array([

0, 0, 0, //頂點1座標

50, 0, 0, //頂點2座標

0, 100, 0, //頂點3座標

0, 0, 10, //頂點4座標

0, 0, 100, //頂點5座標

50, 0, 10, //頂點6座標

]);

// 建立屬性緩衝區物件

var attribue = new THREE.BufferAttribute(vertices, 3); //3個為一組,表示一個頂點的xyz座標

// 設定幾何體attributes屬性的位置屬性

geometry.attributes.position = attribue;

在設定頂點後,要設定材質物件,可以是點渲染,即座標點,線渲染,即按照點的順序連線,或面渲染。

在點渲染裡面設定點的顏色,則此點為當前設定的顏色,如果是線或者面,則在設定頂點不同顏色時會產生插值顏色,

即漸變效果

// 三角面(網格)渲染模式

var material = new THREE.MeshBasicMaterial({

color: 0x0000ff, //三角面顏色

side: THREE.DoubleSide //兩面可見

}); //材質物件

var mesh = new THREE.Mesh(geometry, material); //網格模型物件Mesh

scene.add(mesh); //網格模型新增到場景中

 

// 點渲染模式

// var material = new THREE.PointsMaterial({

// color: 0xff0000,

// size: 5.0 //點物件畫素尺寸

// }); //材質物件

// var points = new THREE.Points(geometry, material); //點模型物件

// scene.add(points); //點物件新增到場景中

 

// 線條渲染模式

// var material=new THREE.LineBasicMaterial({

// color:0xff0000 //線條顏色

// });//材質物件

// var line=new THREE.Line(geometry,material);//線條模型物件

// scene.add(line);//線條物件新增到場景中