CODEWITHSUNDEEP
three.jsshadowreact-three-fiberreact-three-dreidirectional-light
flol3622
flol3622

Reputation: 23

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

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 :-)

<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>

Upvotes: 2

Views: 3276

Answers (2)

sattu
sattu

Reputation: 1

In my point of view, just add a class to the canvas and apply CSS. Give it a width of 100vw and height of 100vh. This show start working and you will be able to see the whole.

Upvotes: -2

M -
M -

Reputation: 28462

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.

Upvotes: 2

Related Questions