THREE.js修改BufferGeometry索引：点云转实体网格问题求助

你的问题出在索引生成逻辑完全错误：你当前的代码按每3个顶点为一组生成面，但玫瑰的参数化顶点是按二维网格（u/v参数）排列的，这种粗暴分组既无法构成正确三角面，还会导致大量索引越界，最终渲染黑屏。

正确的索引生成逻辑 #

参数化玫瑰的顶点是按u（花瓣径向参数）和v（花瓣轴向参数）的网格排列的，假设你生成了numU个u分段、numV个v分段，顶点总数为(numU + 1) * (numV + 1)。我们需要遍历每个网格单元，将四个顶点拆分成两个三角面：

// 替换成你实际生成顶点时的u/v分段数
const numU = 30; 
const numV = 20;

let faces = [];

for (let u = 0; u < numU; u++) {
  for (let v = 0; v < numV; v++) {
    // 计算当前网格单元的四个顶点索引
    const idx0 = u * (numV + 1) + v;
    const idx1 = u * (numV + 1) + v + 1;
    const idx2 = (u + 1) * (numV + 1) + v;
    const idx3 = (u + 1) * (numV + 1) + v + 1;

    // 添加两个三角面（保持逆时针顺序，确保法线方向正确）
    faces.push(idx0, idx2, idx1);
    faces.push(idx1, idx2, idx3);
  }
}

// 设置索引
const indices = new Uint16Array(faces);
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
// 重新计算法线，让实体材质显示正确光影
geometry.computeVertexNormals();

关键注意事项 #

• 必须匹配你实际生成顶点时的numU和numV数值：如果你的参数化代码中u循环是for (let u=0; u<=numU; u++)，顶点数就是(numU+1)*(numV+1)，上述索引逻辑才成立。
• 如果渲染后面反向（看不到实体只有背面），可以调整三角面顶点顺序，比如把faces.push(idx0, idx2, idx1)改成faces.push(idx0, idx1, idx2)修正面的朝向。
• 实体材质依赖正确法线，设置索引后调用computeVertexNormals()，才能让MeshStandardMaterial这类材质显示正常光影。

替换错误代码 #

把你原来的索引生成代码完全替换成上述逻辑，确保numU和numV与顶点生成参数一致，就能正确生成实体网格。

内容的提问来源于stack exchange，提问作者R-yurew