顶点概念 - 掘金

前言

上一章的demo写的是一个简单的立方体的情况,使用的是一个Three通过的方法生成的,只传入了长宽高等参数，当实际场景中的几何体复杂多样,不可能样样都有现成的方法，所以就需要通过几何体最原始的组成部分来建立物体，也就是一个个顶点。

最少情况下，三个点可以形成一个面,四个面可以形成一个几何体（这里曲面除外）

通过一段代码看看顶点发挥的作用。这里Float32Array为类型化数组，为js知识，不懂的百度下。

面

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);

最终效果：

点

为了更好的理解几何体是由顶点构成的，可以把几何体geometry作为点模型Points而不是网格模型Mesh的参数，你会发现上面的六个点坐标会渲染为六个方形的点区域，可以用下面代码代替上面的网格模型部分代码测试效果。

// 点渲染模式
var material = new THREE.PointsMaterial({
  color: 0xff0000,
  size: 10.0 //点对象像素尺寸
}); //材质对象
var points = new THREE.Points(geometry, material); //点模型对象
scene.add(points); //点对象添加到场景中

对于网格模型Mesh而言，几何体geometry三个顶点为一组渲染出来一个三角形，对于点模型Points而言，几何体的每个顶点对应位置都会渲染出来一个方形的点区域，该区域可以设置大小。最终效果：

线

上面两个案例适用点模型和网格模型去渲染几何体的顶点数据，下面代码是把几何体作为线模型Line参数，你会发现渲染效果是从第一个点开始到最后一个点，依次连成线。

// 线条渲染模式
var material=new THREE.LineBasicMaterial({
    color:0xff0000 //线条颜色
});//材质对象
var line=new THREE.Line(geometry,material);//线条模型对象
scene.add(line);//线条对象添加到场景中

最终效果：

总结

通过上个三个demo可以看出使用three不同的方法可以将顶点渲染成点线面，所以可以看出几何体的顶点是非常重要的部分，通过它你可以任意组成你想要的几何图形。