开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第21天，点击查看活动详情

前言

上一小节讲解了类型化数组，利用该数组，我们可以创建出顶点，从点到线再到面，利用面就能构造出各种几何体，可以说顶点是基础，接下来我们一起来了解下。

创建

如果把3d图形看成由点构成的面，每个点都有自己的坐标(x,y,x)，Three.js中的BufferGeoment和BufferAttribute可以让我们自定义出顶点，下面我们简单了解下这两个API：

BufferGeometry：用来描述点、线、面的各个属性，包含顶点位置、颜色等。
BufferAttribute：用来设置相关属性值，接受三个参数
TypedArray:类型化数组，用来实例化顶点；
size:组合的个数，比如表示空间坐标就需要三个一组，size就为3；
normalized:描述缓存数据与GLSL代码里数据的关系，这是可选属性。
下面我们可以创建出一个矩形，来理解API的用法：

   //利用类型化数组描述点的位置
    const vertices = new Float32Array([
    -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0,
    -1.0, -1.0, 1.0
    ]);
    //3size为一组表示顶点坐标 设置成位置的属性值
   geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
   //设置材质
   const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
   //创建网格模型 形成矩形
   const mesh = new THREE.Mesh(geometry, material);
   scene.add(mesh);

QQ图片20230223231803.png （为了显示z轴，图为转动后的效果）上面实例创建模型时我们用的是Mesh，如果我们想要看得再仔细点，可以创建点和线的模型去渲染。

THREE.Points：创建点模型。

   geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
   const material = new THREE.PointsMaterial({ color: 0xffff00});

QQ图片20230223232702.png

THREE.Line：创建线模型。

    geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
    const material = new THREE.LineBasicMaterial({ color: 0xffff00});

QQ图片20230223232919.png

这就是three中点、线、面渲染方法。

总结

在three中各类几何体就是由各个点连接构成的，因为两点连接的都是直线，所以圆形几何体边缘不是圆弧就是这个原因，当然点越多，边缘看起来也就越圆滑。

three学习(六)——顶点

前言

创建

总结