三维图形基础：几何体顶点数据与点模型

建议先阅读完文章，再查看 实例代码

在深入探索 Three.js 的世界之前，理解几何体的顶点数据是至关重要的。本篇文章将引导您了解如何使用 Three.js 的 BufferGeometry 类来创建自定义形状，并展示如何使用点模型 Points 来渲染这些形状。

缓冲类型几何体 BufferGeometry

Three.js 中的大多数几何体，如长方体 BoxGeometry 和球体 SphereGeometry，都是基于 BufferGeometry 类构建的。BufferGeometry 本身是一个没有形状的空框架，它允许我们通过定义顶点数据来自定义任何几何形状。

创建缓冲几何体

const geometry = new THREE.BufferGeometry();

定义顶点数据

使用 JavaScript 的类型化数组 Float32Array 来创建一组 xyz 坐标数据，这些数据将表示几何体的顶点坐标。

const vertices = new Float32Array([
    0, 0, 0,  // 顶点1坐标
    50, 0, 0, // 顶点2坐标
    0, 100, 0, // 顶点3坐标
    // ... 其他顶点坐标
]);

属性缓冲区对象 BufferAttribute

通过 Three.js 的属性缓冲区对象 BufferAttribute 来表示几何体的顶点数据。

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

设置几何体顶点

将 BufferAttribute 设置为几何体的 .attributes.position 属性，以定义几何体的顶点位置。

geometry.attributes.position = attribute;

实例：使用 BufferGeometry 创建自定义几何体并渲染网格模型

// 初始化场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建一个空的 BufferGeometry 对象
const geometry = new THREE.BufferGeometry();

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

// 定义面数据（每个面由3个顶点索引组成）
const indices = new Uint16Array([
    0, 1, 2   // 面1，由顶点1, 顶点2, 顶点3组成
]);

// 创建顶点属性缓冲区对象
const positionAttribute = new THREE.BufferAttribute(vertices, 3);

// 创建索引缓冲区对象
const indexAttribute = new THREE.BufferAttribute(indices, 1);

// 将属性添加到几何体中
geometry.setAttribute('position', positionAttribute);
geometry.setIndex(indexAttribute);

// 创建网格材质
const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00, // 绿色
    wireframe: true   // 以线框模式渲染
});

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

// 将网格模型添加到场景中
scene.add(mesh);

// 设置相机位置
camera.position.z = 5;

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

这个实例创建了一个简单的三角形网格模型。我们首先定义了顶点数据，然后创建了一个索引数组来定义三角形的面。接着，我们使用 BufferAttribute 将顶点数据和索引数据添加到 BufferGeometry 对象中。然后，我们创建了一个 MeshBasicMaterial 材质，并将其与几何体一起用来创建一个 Mesh 对象。最后，我们将网格模型添加到场景中，并设置了一个渲染循环来不断渲染场景。