ThreeJS中无法修改三角形朝向问题排查

我手动计算顶点坐标，用BufferGeometry和MeshStandardMaterial构建了一个八面体，但最终生成的对象有4个面的法向量明显指向内部。我通过计算对象中心到三角形中心的向量与三角形法向量的点积，识别出了这些朝向错误的三角形。尝试了三种修改策略都没效果，始终是下半部分三个暗面、上半部分一个暗面，问题出在哪？

用户提供的代码：

const material = new MeshStandardMaterial({
    side: DoubleSide,
    roughness: 0.5,
    metalness: 0.6,
    color: "#00FF00"
});

const geometry = new BufferGeometry();
geometry.setAttribute("position", new Float32BufferAttribute(vertices, 3));

// First strategy: compute the vertex normals and change their sign for the "wrong" triangles
geometry.setAttribute("normal", new Float32BufferAttribute(normals, 3));
const index = [];
for(let i=0; i < 24; ++i) index.push(i);
geometry.setIndex(index);

// Second strategy: let ThreeJS compute the vertex normals but swap two of the triangles vertices index entries
geometry.computeVertexNormals();
const index = [];
for(let i=0; i < 24; i+=3) {
    if(triangle is correct)
        index.push(i, i+1, i+2);
    else
        index.push(i, i+2, i+1);
geometry.setIndex(index);

// Third strategy: like the 2nd one but removed the geometry.computeVertexNormals() call.

const shape = new Mesh(geometry, material);

// To test these are the vertices of the triangles
const vertices = [
    0.08, 0, 0,
    0, 0.08, 0,
    0, 0, 0.08,
    0, 0, 0.08,
    -0.08, 0, 0,
    0, 0.08, 0,
    0, 0, 0.08,
    0, -0.08, 0,
    0.08, 0, 0,
    -0.08, 0, 0,
    0, 0, 0.08,
    0, -0.08, 0,
    -0.08, 0, 0,
    0, 0, -0.08,
    0, -0.08, 0,
    0, -0.08, 0,
    0.08, 0, 0,
    0, 0, -0.08,
    -0.08, 0, 0,
    0, 0.08, 0,
    0, 0, -0.08,
    0, 0.08, 0,
    0, 0, -0.08,
    0.08, 0, 0
];

核心问题分析 #

你的问题根源在于顶点数组重复冗余+索引逻辑混乱，导致Three.js无法正确计算或识别面的朝向，手动修改法线或索引的操作也因为基础数据错误而失效。

具体修复方案 #

1. 重构顶点数据：使用唯一顶点 #

八面体本质只有6个独特顶点（前、后、左、右、上、下），你的顶点数组存在大量重复值，这会让computeVertexNormals()无法正确共享顶点法线，反而计算出混乱的结果。

// 定义6个唯一顶点：前、后、左、右、上、下
const uniqueVertices = [
  0, 0, 0.08,   // 前
  0, 0, -0.08,  // 后
  -0.08, 0, 0,  // 左
  0.08, 0, 0,   // 右
  0, 0.08, 0,   // 上
  0, -0.08, 0   // 下
];

2. 用索引定义面：严格遵循右手螺旋定则 #

右手螺旋定则：从几何体外部看向面时，顶点顺序为逆时针，这样Three.js会自动让法向量指向外部。八面体的8个面索引按规则定义如下：

// 8个三角形面的索引，完全符合右手螺旋定则
const faceIndices = [
  // 上半部分4个面（以上顶点为中心）
  4, 0, 3,  // 上-前-右
  4, 3, 1,  // 上-右-后
  4, 1, 2,  // 上-后-左
  4, 2, 0,  // 上-左-前
  // 下半部分4个面（以下顶点为中心）
  5, 3, 0,  // 下-右-前
  5, 1, 3,  // 下-后-右
  5, 2, 1,  // 下-左-后
  5, 0, 2   // 下-前-左
];

3. 正确构建几何体并计算法线 #

用唯一顶点和合规索引构建几何体，再让Three.js自动计算法线，就能保证所有面的法向量朝向正确：

const material = new MeshStandardMaterial({
  side: DoubleSide,
  roughness: 0.5,
  metalness: 0.6,
  color: "#00FF00"
});

const geometry = new BufferGeometry();
// 设置唯一顶点数据
geometry.setAttribute("position", new Float32BufferAttribute(uniqueVertices, 3));
// 设置正确的面索引
geometry.setIndex(faceIndices);
// 自动计算顶点法线（此时会根据面的顶点顺序生成正确的外部朝向法线）
geometry.computeVertexNormals();

const shape = new Mesh(geometry, material);

4. 原策略失效的原因 #

• 第一种策略：手动设置法线但未对应正确的索引关系，重复顶点导致法线无法匹配到正确的面，修改符号也无法解决根本问题。
• 第二种/第三种策略：代码存在语法错误（for循环未闭合），且重复顶点的情况下，交换索引无法改变共享顶点的法线平均结果，computeVertexNormals()会把重复顶点的法线混合，导致朝向混乱。

内容的提问来源于stack exchange，提问作者SiliconValley