Three.js自定义Mesh显示黑色问题排查求助

以下是针对性的排查步骤：

• 修正法线计算的时机
  你当前代码先调用geometry.computeVertexNormals()，再设置顶点位置和索引属性——这会导致法线基于空数据计算，等于没有生成有效法线。MeshPhongMaterial依赖法线计算光照，没有正确法线就会显示黑色。正确顺序应该是先设置所有几何体属性，再计算法线：

  const geometry = new BufferGeometry();
  // 先设置顶点位置和索引
  const positionAttribute = new Float32BufferAttribute(data.coordinates, 3);
  const indexAttribute = new Uint16BufferAttribute(data.indices, 1);
  geometry.setAttribute("position", positionAttribute);
  geometry.setIndex(indexAttribute);
  // 最后计算顶点法线
  geometry.computeVertexNormals();
  

• 验证顶点索引的合法性
  检查data.indices数组是否符合要求：

  • 索引值不能超过顶点数组的最大索引（比如顶点总数为N，索引必须小于N）
  • 索引必须是3的倍数（每个三角面由3个索引组成），不能有奇数个元素
    索引错误会导致几何体构建异常，进而让法线计算失效。

• 检查顶点数据的有效性

  • 确认data.coordinates的数值范围，避免模型尺寸异常（比如顶点坐标极小或极大）导致光照计算异常
  • 检查顶点的缠绕顺序是否合理，虽然开启了DoubleSide，但异常的缠绕顺序仍可能影响法线方向

• 用基础材质快速定位问题
  临时将MeshPhongMaterial替换为MeshBasicMaterial：

  const testMaterial = new MeshBasicMaterial({ color: 0xff0000, side: DoubleSide });
  let newMesh = new Mesh(geometry, testMaterial);
  

  如果模型显示红色，说明问题出在光照/法线环节；如果还是黑色，说明顶点或索引数据本身存在错误。

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