Shadows in React-Three-Fiber working but cropped in rectangular region for no reason

Question

Hi my problem is the following: I successfully added shadows to my viewport but those seemed to be cropped inside a certain region. Thank you for your help :-)

• 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

By default, a DirectionalLight shadow uses an orthographic camera to calculate the region where it casts shadows. This camera has left, right, top, bottom attributes set to [-5, 5] units by default. Your Box objects are larger than this, so they only cast shadows in the region within the light's shadow-camera. You need to modify your light shadow's camera dimensions to be big enough to fit your objects. For example:

light.shadow.camera.left = -20;

In react-three-fiber, you would achieve the same, by accessing the required property via a kebab-case prop.

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

You can read more about the light's camera dimensions in the docs

Additionally, you could add a DirectionalLightHelper to your DirectionalLight to better visualize the region of this shadow-camera.