为什么会有顶点的存在
在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);//线条对象添加到场景中