Three.js阴影无法在全部物体上正常显示的问题求助

核心原因 #

当前代码仅开启了Canvas的阴影和方向光的投影，但导入的GLTF模型默认未启用阴影接收/投射属性，同时方向光的阴影默认配置可能无法覆盖场景中所有物体，导致阴影显示不全。

具体解决方案 #

1. 为所有Room组件的Mesh开启阴影属性 #

每个Room组件基于GLTF模型，需要遍历模型中的所有Mesh，手动开启castShadow和receiveShadow：

// 以RoomOne组件为例，其他Room组件同理修改
import { useGLTF } from '@react-three/drei'

export function RoomOne() {
  const { nodes } = useGLTF('/Room1.glb')
  // 遍历所有节点，为Mesh开启阴影
  Object.values(nodes).forEach(node => {
    if (node.isMesh) {
      node.castShadow = true
      node.receiveShadow = true
    }
  })
  return <primitive object={nodes.Room1} />
}

2. 优化方向光的阴影配置 #

方向光默认阴影分辨率低，且相机视锥体可能未覆盖全部场景，调整参数提升阴影质量和覆盖范围：

<directionalLight 
  castShadow 
  intensity={2} 
  position={[80,80,80]}
  // 提升阴影分辨率
  shadow-mapSize-width={2048}
  shadow-mapSize-height={2048}
  // 调整阴影相机范围，适配场景大小
  shadow-camera-left={-50}
  shadow-camera-right={50}
  shadow-camera-top={50}
  shadow-camera-bottom={-50}
  shadow-camera-near={0.1}
  shadow-camera-far={200}
/>

3. 调整ContactShadows参数（可选） #

若依赖ContactShadows显示地面阴影，可调整参数确保它能捕捉到所有物体：

<ContactShadows far={40} blur={2} opacity={0.5} />

额外检查点 #

• 确保场景中没有遮挡阴影的透明物体或未正确设置材质的物体
• 若切换使用SpotLight，同样需要配置其阴影相机参数，逻辑与DirectionalLight一致

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