Three.js添加PointLight后阴影出现摩尔纹 GLTF模型受光面不平整

问题解决方案 #

一、阴影摩尔纹问题修复 #

• 首先删除不必要的属性设置：PointLight本身不需要接收阴影，light2.receiveShadow = true 属于无效配置，直接移除该行即可。
• 调整阴影贴图精度：点光源默认阴影贴图分辨率较低容易出现条纹，新增如下配置提升精度：

  light2.shadow.mapSize.set(2048, 2048)
  

• 调整阴影偏移参数：bias参数设置不当是摩尔纹出现的核心原因，新增配置修正偏移：

  light2.shadow.bias = -0.0005
  

  可根据实际显示效果在-0.001~-0.0001区间调整数值，直到条纹消失。
• 可选优化：设置阴影相机的近远裁剪面范围，减少阴影计算的误差：

  light2.shadow.camera.near = 0.1
  light2.shadow.camera.far = 200
  

二、GLTF模型表面不平整问题修复 #

该问题基本由Blender导出配置、模型法线异常导致，按以下步骤排查修复：

Blender导出阶段检查

• 导出GLTF时，在导出面板的「几何数据」分类下，确保勾选「法线」选项，不要勾选「平滑组」，避免法线数据导出异常。
• 如果是立方体这类棱角分明的模型，Blender中不要开启「自动平滑」，或者把自动平滑的角度阈值设为30度以下，避免相邻面法线被插值平滑。

Three.js导入阶段修复

• 导入GLTF后强制重新计算模型顶点法线，覆盖错误的法线数据：

  gltf.scene.traverse(child => {
    if(child.isMesh && child.material) {
      child.geometry.computeVertexNormals()
      child.material.needsUpdate = true
      // 如果需要棱角分明的效果，可开启平面着色
      // child.material.flatShading = true
    }
  })
  

• 如果材质附带法线贴图，检查法线缩放参数是否正确，可重置为默认值：

  if(child.material.normalMap) {
    child.material.normalScale.set(1, 1)
  }
  

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