ThreeJS关于点与面片----(9)

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情 >

本文实现通过循环随机生成多个三角面片展示在是三维场景中;

// 存储三角面片顶点数组
let elements = [];
// 控制三角面片顶点坐标x,y,z的取值范围
let num =5;
// 指定三角面片的个数
let count = 50;
// 因为每一个三角面片都有三个顶点,所以需要循环次数*3
for (let i = 0; i <= count * 3; i++) {
    // 因为每一个顶点都具有x,y,z三个轴方向的坐标,所以需要在数组中塞3个
    // 也可以直接乘在外部循环中,为了方便理解我写里面了 
    let random = [(Math.random() - 0.5) * num, (Math.random() - 0.5) * num, (Math.random() - 0.5) * num]
    elements.push(...random)
}
// 使用Float32Array存储顶点信息
const verArr = new Float32Array(elements);
// 存储顶点信息属性
const BufferAttribute = new THREE.BufferAttribute(verArr, 3);

// 设置几何体的顶点位置数据
geometry.attributes.position = BufferAttribute;
// 创建mesh
const mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
    color: colors[arr.length],
    // 打开模型的线框(不打开的情况下是面片)
    wireframe: true
}));
// 定位于坐标原点
mesh.position.copy(new THREE.Vector3(0, 0, 0))
// 将模型添加至坐标原点
scene.add(mesh)

关于(Math.random()-0.5)*count,因为我希望我的坐标点在原点附近,有正有负,通过随机生成的0-1的数字,减去0.5使得范围卡在了-0.5-0.5之间,在乘以想要放的范围,就可以使得我的顶点都聚焦在原点周围内;

Float32Array

该数组代表的是平台字节顺序为32位的浮点数型数组,也就表示该数组中只能存储数字;

BufferAttribute

用于存储与BufferGeometry相关联的 attribut ,如顶点位置向量，面片索引，法向量，颜色值，UV坐标以及任何自定义的attribute

BufferGeometry与Geometry的区别

在之前的threejs版本中,boxGemetry等各种形状的模型都是基于Gemeotry的,现在也都变成了BufferGeometry了,他们都是存储顶点、面索引、法线、颜色、纹理坐标和自定义的一些几何体数据,只是他们底层的存放方式不同,buffer相当于被放入了高速缓存中,他的执行效率更高效; 最终效果如下图(一个随机生成的50个三角面片):

如果有哪里描述不准确或者有问题,欢迎大佬指正!
(≖ᴗ≖)✧