如何从THREE.Face3将THREE.Geometry转换为THREE.BufferGeometry？

架构老林

2026-8-9

THREE.Geometry（基于Face3）升级到BufferGeometry方案

原代码通过循环创建顶点数组，再用THREE.Face3构建三角面，现在需要升级到THREE.BufferGeometry，已能生成Vector3顶点数组，但不清楚如何替代Face3定义面结构。

核心思路

BufferGeometry通过**索引数组（index）**定义三角面，每个三角面对应3个顶点索引，逻辑和Face3完全匹配：只需把原Face3中的三个顶点索引按顺序存入一维数组，转为Uint32Array后赋值给BufferGeometry的index属性即可。

完整升级代码

// 初始化BufferGeometry
DepthKit.geo = new THREE.BufferGeometry();

// 生成顶点数据（直接存储x/y/z分量，无需Vector3，更高效）
const vertices = [];
for (let y = 0; y < VERTS_TALL; y++) {
    for (let x = 0; x < VERTS_WIDE; x++) {
        vertices.push(x, y, 0);
    }
}
// 设置顶点位置属性
DepthKit.geo.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

// 生成三角面索引数组（和原Face3的索引逻辑完全一致）
const indices = [];
for (let y = 0; y < VERTS_TALL - 1; y++) {
    for (let x = 0; x < VERTS_WIDE - 1; x++) {
        // 第一个三角面
        indices.push(
            x + y * VERTS_WIDE,
            x + (y + 1) * VERTS_WIDE,
            (x + 1) + y * VERTS_WIDE
        );
        // 第二个三角面
        indices.push(
            x + 1 + y * VERTS_WIDE,
            x + (y + 1) * VERTS_WIDE,
            (x + 1) + (y + 1) * VERTS_WIDE
        );
    }
}
// 设置索引属性
DepthKit.geo.setIndex(new THREE.Uint32BufferAttribute(indices, 1));

// 若需要自动计算法向量，添加此行：
// DepthKit.geo.computeVertexNormals();