shadows getting clipped on shadowMaterial

[saurabhiam]

I am very new to three js and was just going through some tutorials. I am facing 2 problems at the moment:

1. The shadow on the shadowMaterial is getting clipped (check shadows of pink cubes).
2. I am also trying to use softShadows() from @react-three/drei however its resulting in a weird shadow.

It'd be really great if someone can provide detailed documentation of @react-three

Here's the demo I've created https://codesandbox.io/s/cocky-jennings-n31mv

<group>
    <mesh
      receiveShadow
      rotation={[-Math.PI / 2, 0, 0]}
      position={[0, -3, 0]}
    >
        <planeBufferGeometry attach="geometry" args={[100, 100]} />
        <shadowMaterial attach="material" />
    </mesh>
</group>

[drcmda]

thats normal, this has to do with the light,

<directionalLight
  shadow-camera-right={10}
  shadow-camera-top={10}
  shadow-camera-left={-10}
  shadow-camera-bottom={-10}
  ... />

increase/decrease as you need it, it could also be related to the planeGeometry being too small. softlights are very expensive thought, you might get better results with contact shadows https://codesandbox.io/s/baked-ao-f5sgi or lightmaps https://codesandbox.io/s/v6-adaptive-regression-forked-wsg13 and the fastest would be to bake in blender, but that only works for static scenes.

[saurabhiam]

That works! I was wondering <directionalLight /> accepts a shadow prop

<directionalLight shadow={{ camera: { top: 10, left: -10, bottom: -10, right: 10 } }} position={[0, 10, 0]} intensity={1.5} castShadow />

Isn't this a correct configuration? Writing like ^ breaks the app though.

three.module.js:641 Uncaught TypeError: Cannot read property 'x' of undefined
    at Vector2.copy (three.module.js:641)
    at WebGLShadowMap.render (three.module.js:18894)
    at WebGLRenderer.render (three.module.js:24230)
    at render$1 (react-three-fiber.esm.js:1207)
    at react-three-fiber.esm.js:1226
    at Map.forEach (<anonymous>)
    at loop (react-three-fiber.esm.js:1223)

[drcmda]

no, shadow is another class they use for internals. i mean, the best thing would be just being able to do

<DirectionalLight size={10} />

could be worth it to include that abstraction into drei. i run into it all the time and can never remember this shadow-camera-... stuff

[saurabhiam]

Hey @drcmda,

<directionalLight
    // shadow-mapSize-width={1024}
    // shadow-mapSize-height={1024}
    shadow-camera-left={-40}
    shadow-camera-right={40}
    shadow-camera-top={40}
    shadow-camera-bottom={-40}
    position={[0, 10, 0]}
    intensity={1.5}
    castShadow 
/>

After passing adding shadow-camera-* props, the shadows have softened but shadow animation is really choppy.
Also, is shadow-mapSize-<width/height> a valid prop?

[drcmda]

not sure, you have to consult three docs. its jsx but these are not our classes or wrappers even, they're pure threejs objects. mapsize would counteract the softness. i believe directionallight is quite unique since since other lights dont need to go through this hassle.