ThreeJS r150自定义加载器生成Mesh黑色渲染问题排查

1. 无索引几何体与顶点法线不匹配引发光照异常 #

你的Mesh采用无索引BufferGeometry，每个三角形的顶点都是独立存储的——哪怕空间位置完全重合，它们也属于不同的BufferAttribute条目。结合MeshPhongMaterial的特性：

• 当材质使用默认的flatShading=false（平滑着色）时，ThreeJS需要通过共享顶点的法线插值实现平滑光照。但你的自定义加载器生成的顶点法线应该是按单个面计算的面法线（即每个三角形的三个顶点法线都等于该面的法线方向），同一空间位置的顶点法线方向不一致，导致渲染器无法正确插值法线，部分区域光照计算结果为0，最终显示黑色。
• 当你设置flatShading=true（平面着色）时，渲染器直接用每个面的法线计算光照，跳过了顶点法线插值，因此不会出现黑色区域。但无索引几何体的顶点数量是索引几何体的3倍左右，渲染压力陡增，导致画面卡顿（也就是你说的“显示效果不流畅”）。

2. 多材质组的潜在影响 #

如果多材质组中部分材质的光照参数（比如shininess、specular）设置不合理，或者材质与几何体的属性绑定出错，可能会加重光照异常，但核心问题还是无索引几何体与顶点法线的匹配问题。

• 转为索引几何体：在自定义加载器中合并重复顶点，生成index属性。这样既能减少顶点数量，又能让相同位置的顶点共享法线，平滑着色可以正常工作，同时大幅提升渲染性能。
• 修正顶点法线计算：如果必须保留无索引结构，要对同一空间位置的顶点法线做平滑处理——取相邻面法线的平均值并归一化，确保相同位置的顶点法线方向一致，让平滑着色的插值计算正常进行。
• 统一材质参数：针对多材质组，确保每个材质的flatShading、side等属性与几何体拓扑匹配，避免参数冲突引发的光照问题。

内容的提问来源于stack exchange，提问作者d.mercanti