Three.js 连接平面处阴影伪影问题求助

嘿，我懂这种阴影伪影有多闹心——明明不该有阴影的拼接处偏偏出现了，尤其在家具这类多平面组合的模型上，特别影响质感。既然调shadow.bias没搞定，咱们试试下面这些实用的方法：

• 试试shadow.normalBias参数
  单调bias有时候不够，normalBias是沿着物体法线方向偏移阴影，专门对付平面贴合处的伪影。你可以这样设置：

  light.shadow.normalBias = 0.05; // 建议从0.01开始慢慢试，找到最适配的数值
  

  可以把它和bias配合着调，比如把bias设小一点，用normalBias来补充修正。

• 检查模型的面法线方向
  很多时候伪影是因为拼接平面的法线方向不一致——比如一个面法线朝内，另一个朝外，阴影计算就会混乱。你可以用Three.js重新计算法线：

  yourFurnitureGeometry.computeVertexNormals();
  

  如果是导入的外部模型，也可以在Blender这类建模软件里先统一法线方向再导出。

• 优化阴影相机参数
  阴影相机的near和far值不合理也会导致伪影。尽量让near贴近模型，far不要设得过大，减少阴影贴图的拉伸变形：

  light.shadow.camera.near = 0.1;
  light.shadow.camera.far = 100;
  // 同时可以适当调大阴影贴图分辨率，提升阴影清晰度
  light.shadow.mapSize.width = 2048;
  light.shadow.mapSize.height = 2048;
  

  注意分辨率太高会影响性能，根据项目需求平衡就行。

• 让平面稍微错开一点点
  如果两个平面完全贴合（坐标完全重合），阴影计算容易出现歧义。可以让其中一个平面做极小的偏移，比如Z方向移0.001：

  planeMesh.position.z += 0.001;
  

  这个偏移肉眼几乎察觉不到，但能彻底解决阴影的冲突问题。

• 更换阴影映射类型
  你当前用的是THREE.PCFSoftShadowMap，可以试试THREE.VSMShadowMap或者THREE.PCFShadowMap，不同类型的阴影算法对伪影的处理效果有差异。不过VSM可能需要额外调整light.shadow.blurSamples这类参数。

内容的提问来源于stack exchange，提问作者Björn68