React-Three-Fiber 中的阴影正常工作但无缘无故地裁剪在矩形区域

Question

您好，我的问题如下： 我成功地在我的视口中添加了阴影，但这些阴影似乎在某个区域内被裁剪了。感谢您的帮助:-)

• with crop
• region

<Canvas colorManagement shadows>
        <ambientLight intensity={0.1} />
        <directionalLight intensity={0.5} position={[80, 80, 30]} castShadow />
        <OrbitControls />
        <Box castShadow receiveShadow args={[1, 3, 30]} position={[0, 0.2, 0]}>
          <meshStandardMaterial attach="material" color="gray" />
        </Box>
        <Box
          castShadow
          rotation={[0, -Math.PI / 2, 0]}
          receiveShadow
          args={[1, 3, 30]}
          position={[0, 0.2, 0]}
        >
          <meshStandardMaterial attach="material" color="gray" />
        </Box>
        <Plane
          receiveShadow
          rotation={[-Math.PI / 2, 0, 0]}
          position={[0, -1, 0]}
          args={[100, 100]}
        >
          <meshStandardMaterial attach="material" color="white" />
        </Plane>
      </Canvas>

Answer 1

默认情况下，DirectionalLight 阴影使用正交相机来计算它投射阴影的区域。此相机的 left, right, top, bottom 属性默认设置为 [-5, 5] 单位。您的 Box 物体比这个大，所以它们只会在光线 shadow-camera 内的区域投射阴影。您需要将光影的相机尺寸修改为足够大以适合您的对象。例如：

light.shadow.camera.left = -20;

您可以阅读更多关于灯光相机尺寸的信息in the docs

此外，您 could add a DirectionalLightHelper 到您的 DirectionalLight 以更好地可视化此 shadow-camera 的区域。