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);//线条对象添加到场景中

猜你喜欢

转载自blog.csdn.net/jiuweiyaoy/article/details/85257739