Three.js中BufferGeometry 和 BoxGeometry

1. BufferGeometry

定义

BufferGeometry 是 Three.js 中所有几何体的基类。它是一个高度灵活的几何体类型，允许开发者通过自定义顶点数据、法线、UV 坐标等来创建复杂的几何形状。

特点

• 灵活性高：可以手动定义顶点、面、法线、UV 坐标等数据。
• 性能优化：使用 BufferAttribute 存储数据，适合处理大量顶点和复杂几何体。
• 底层控制：适合需要精细控制几何体数据的场景。

使用场景

• 自定义几何体（如不规则形状、复杂模型）。
• 从外部加载的 3D 模型（如 GLTF、OBJ 文件）。
• 需要高性能优化的场景。

import * as THREE from 'three';

// 创建一个简单的三角形
const geometry = new THREE.BufferGeometry();

// 定义顶点数据
const vertices = new Float32Array([
  0, 0, 0, // 顶点 1
  1, 0, 0, // 顶点 2
  0, 1, 0, // 顶点 3
]);

// 将顶点数据添加到几何体中
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

// 定义面（索引）
const indices = new Uint16Array([0, 1, 2]);
geometry.setIndex(new THREE.BufferAttribute(indices, 1));

// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 创建网格
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

2. BoxGeometry

定义

BoxGeometry 是 Three.js 提供的一个内置几何体类型，用于创建立方体（长方体）。它是 BufferGeometry 的子类，专门用于简化立方体的创建。

特点

• 简单易用：通过参数直接定义立方体的宽度、高度、深度。
• 内置属性：自动生成顶点、法线、UV 坐标等数据。
• 适合常见形状：专门用于创建立方体，无需手动定义顶点。

使用场景

• 创建立方体或长方体。
• 快速原型开发。
• 不需要自定义顶点数据的场景。

import * as THREE from 'three';

// 创建立方体几何体
const geometry = new THREE.BoxGeometry(1, 1, 1); // 宽度、高度、深度

// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 创建网格
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

特性	BufferGeometry	BoxGeometry
类型	基类，高度灵活	内置几何体，专门用于创建立方体
使用难度	较高，需要手动定义顶点数据	较低，直接通过参数创建立方体
性能	高性能，适合复杂几何体	性能较好，适合简单几何体
适用场景	自定义几何体、复杂模型、高性能优化场景	创建立方体、快速原型开发
数据存储	使用 BufferAttribute 存储顶点数据	自动生成顶点、法线、UV 坐标等数据
扩展性	可以扩展为任意复杂几何体	仅限于立方体

ps:BoxGeometry 实际上是 BufferGeometry 的一个封装。Three.js 在内部使用 BufferGeometry 的 API 来生成立方体的顶点、法线和 UV 坐标。