React Three Fiber中平行光与点光源阴影异常问题排查

一、解决多余点光源阴影问题 #

1. 彻底隔离碰撞盒的阴影影响
   如果你只是用GLTF中的碰撞盒获取变换/几何体数据来创建Cannon物理体，完全不需要将这个碰撞盒Mesh保留在Three.js场景中。直接提取它的位置、旋转、缩放以及几何体数据后，就可以丢弃这个Mesh，避免它参与任何渲染或阴影计算流程。
   如果必须保留碰撞盒Mesh，除了设置visible={false}，还要强制关闭它的阴影相关属性：

   // 在Apartment组件中处理碰撞盒对象
   mesh.castShadow = false;
   mesh.receiveShadow = false;
   mesh.material.visible = false; // 额外确保材质不可见
   

2. 检查点光源实例是否重复
   复制GLTF对象时，可能不小心创建了多个未被正确管控的点光源实例。排查你的代码，确保只有预期的点光源在场景中启用castShadow，其余冗余实例要么移除，要么关闭阴影投射。

二、阴影属性废弃后的正确设置方式 #

Three.js确实废弃了shadowBias、shadowMapWidth这类顶层属性，改用shadow对象下的嵌套属性。在Three Fiber中，有两种正确的设置方式：

方式1：使用连字符分隔的props #

<pointLight
  castShadow={true}
  shadow-mapSize-width={2048}
  shadow-mapSize-height={2048}
  shadow-bias={-0.0001}
  shadow-radius={3}
/>

方式2：直接传递shadow配置对象 #

import { Vector2 } from 'three';

// ...

<pointLight
  castShadow={true}
  shadow={{
    mapSize: new Vector2(2048, 2048),
    bias: -0.0001,
    radius: 3
  }}
/>

注意：必须先开启castShadow，否则所有阴影相关配置都不会生效。如果还是无效，检查你的渲染器是否开启了阴影支持：

<Canvas shadows>
  {/* 你的场景内容 */}
</Canvas>

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