Three.js光照异常：STL模型凹陷区域比表面更亮如何解决

对应解决方法 #

• 1. 修正模型法向量
  STL导入时可能携带错误的法向量数据，或法向量未按渲染要求正确计算，导致光照计算时凹陷区域的法线朝向光源，出现比平面更亮的问题。
  操作步骤：
  加载STL得到几何体后，先执行法向量重计算方法：

  geometry.computeVertexNormals()
  // 如果重计算后还有局部面异常，可尝试翻转整个模型法向量：
  geometry.attributes.normal.array.forEach((val, i) => geometry.attributes.normal.array[i] = val * -1)
  geometry.attributes.normal.needsUpdate = true
  

  验证方法：临时将材质替换为THREE.MeshNormalMaterial，观察颜色分布是否符合外表面法线朝向逻辑，凹陷区域的法线颜色应与同朝向的外表面颜色一致。

• 2. 调整材质面渲染属性
  如果材质设置了side: THREE.DoubleSide，Three.js会根据面朝向相机的方向动态选取法向量计算光照，会导致凹面的光照计算逻辑异常。
  操作步骤：
  显式将材质的side属性设置为THREE.FrontSide，仅渲染正面：

  const material = new THREE.MeshStandardMaterial({
    // 其余属性不变
    side: THREE.FrontSide
  })
  

• 3. 校准平行光配置
  6个方向的平行光如果方向、target配置错误，会出现光线从模型内部向外照射的情况，导致凹陷区域接收到更多光照。
  操作步骤：
  每个平行光设置完成后，确认方向正确，且将平行光的target绑定到魔方中心位置，同时将target对象添加到场景中：

  // 以+Z方向平行光为例
  const dirLight = new THREE.DirectionalLight(0xffffff, 1)
  dirLight.position.set(0, 0, 10) // 光从+Z方向射向原点
  dirLight.target.position.set(0,0,0) // 目标指向魔方中心
  scene.add(dirLight)
  scene.add(dirLight.target) // 必须将target加入场景，方向配置才会生效
  

• 4. 修正阴影参数配置
  如果你开启了阴影但未正确配置阴影相机的裁剪范围，会导致阴影无法正确投射到凹陷区域，看起来凹陷区域更亮。
  操作步骤：
  调整平行光的阴影相机参数，确保覆盖整个魔方的范围：

  dirLight.castShadow = true
  dirLight.shadow.camera.left = -2
  dirLight.shadow.camera.right = 2
  dirLight.shadow.camera.top = 2
  dirLight.shadow.camera.bottom = -2
  dirLight.shadow.camera.near = 0.1
  dirLight.shadow.camera.far = 20
  dirLight.shadow.mapSize.set(1024, 1024) // 提高阴影分辨率
  

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