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);//線條物件新增到場景中