three中的BufferGeoery

该系类文章主要用于记录学习three.js的过程，包括做的一些demo，笔记，以及个人思考；主要学习的课程是神光的小册《three.js通关秘籍》，感兴趣的可以购买学习，质量还是可以的

本节主要学习BufferGerery，它是所有几何体的父类

1. BufferGeometry类

我们在之前的文章中已经通过代码和gif图片体验过了几何体，比如立方体、圆柱体等

而这些几何体的父类就是BufferGerery

文档地址：threejs.org/docs/index....

2. 几何体的本质核心

所有的几何体都是由一堆顶点数据，由顶点数据构成三角形，三角形再构成任何几何体

首先是一个个点，每三个点组成一个三角形，多个三角形组成面，面可以组成几何体，

即使是球体，放大无数倍也是一样的，是有很多细小的三角形组成，可以看下面的图

3. 具体的操作

通过gemotry.attributes.position 设置顶点数据（数组中重复的数据会删除）
通过geometry.index直接用postion种的索引，来设置三角形数据

核心代码如下

javascript 复制代码

import * as THREE from 'three';

const geometry = new THREE.BufferGeometry();
// 这是一个个点
const vertices = new Float32Array([
    0, 0, 0,
    100, 0, 0,
    0, 100, 0,

    0, 100, 0,
    100, 0, 0,
    100, 100, 0
]);
// 3个点一个面，所以这是两个三角形，组成的几何体
const attribute = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribute;
// 设置材质
const material = new THREE.MeshBasicMaterial({
    color: new THREE.Color('orange'),
    wireframe: true, // 线框模式
});

const mesh = new THREE.Mesh(geometry, material);

export default mesh;

运行如下

我们发现其中有些点的坐标是重叠的，试想一下如果是一个球体，那么会有成千上万的三角形，很多点都是位置都是一样的，是不是就会爆炸了

所以再优化一下把所有的点的坐标放到vertices中,重叠的部分就只写一个即可，再后面用的地方我们只需要引用vertices的对用的索引即可

优化如下：

ini 复制代码

// 将重复的点去除
const vertices = new Float32Array([
    0, 0, 0,
    100, 0, 0,
    0, 100, 0,
//     0, 100, 0,
//     100, 0, 0,
    100, 100, 0
]);

const attribute = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribute;

// 如果要去除重复的点，那么就需要设置一下，将坐标索引设置进去，因为很点是重复的
const indexes = new Uint16Array([
    0, 1, 2, 2, 1, 3
]);
geometry.index = new THREE.BufferAttribute(indexes, 1);

4. 总结

`BufferGerery``这个类是所有的几何体的父类
几何体本质上有无数的三角形组成，三角形由无数的点组成
掌握BufferGerery的基本用法