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

Question

嗨，我的问题如下： 我成功地将阴影添加到视口中，但这些阴影似乎在特定区域内被裁剪。谢谢您的帮助:-)

• 
• 

<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

对象比这个大，因此它们仅在灯光的阴影相机内的区域投射阴影。您需要将光影的相机尺寸修改为足够大以适合您的对象。例如：

light.shadow.camera.left = -20;

在 React-Three-Fiber 中，您可以通过 kebab-case 属性访问所需的属性来实现相同的目的。

<directionalLight castShadow shadow-camera-left={-20} />

您可以在文档中阅读有关灯光相机尺寸的更多信息

此外，您可以将

DirectionalLightHelper

添加到您的

DirectionalLight

以更好地可视化此阴影相机的区域。

Answer 2

在我看来，只需向画布添加一个类并应用 CSS 即可。将其宽度设置为 100vw，高度设置为 100vh。这个节目开始工作，你将能够看到整体。