How to increase shadow size without losing quality

Hi there,

So i have this light and now i try to increase the size (coverage) of this light and shadow.

This is my code for the light:

const dirLight = new THREE.DirectionalLight( 0xffffff, 1.0);
dirLight.position.set( 3, 10, 10 );
dirLight.castShadow = true;
dirLight.shadow.mapSize = new THREE.Vector2(1024 * 2, 1024 * 2);
dirLight.shadow.camera.top = 4;
dirLight.shadow.camera.bottom = - 4;
dirLight.shadow.camera.left = - 4;
dirLight.shadow.camera.right = 4;
dirLight.shadow.camera.near = 0.1;
dirLight.shadow.camera.far = 40;
dirLight.shadow.bias= -0.002;
scene.add( dirLight );

// Shadow Helper
var shadowHelper = new THREE.CameraHelper( dirLight.shadow.camera );
scene.add( shadowHelper );

When i change left, right to make the size (coverage) bigger, the shadow becomes ugly and less detailed.

Try set

dirLight.position.set( 30, 100, 100 );
dirLight.shadow.camera.far = 400;

Thank you ! Its not perfect jet, but still better than nothing.
Is there a way to make the light so big, that it always cover the full canvas (floor).

The more i increase the values like:

const dirLight = new THREE.DirectionalLight( 0xffffff, 1.0);
dirLight.position.set( 6, 20, 20 );
dirLight.castShadow = true;
dirLight.shadow.mapSize = new THREE.Vector2(1024 * 2, 1024 * 2);
dirLight.shadow.camera.top = 8;
dirLight.shadow.camera.bottom = - 8;
dirLight.shadow.camera.left = - 8;
dirLight.shadow.camera.right = 8;
dirLight.shadow.camera.near = 0.1;
dirLight.shadow.camera.far = 80;
dirLight.shadow.bias= -0.002;
scene.add( dirLight );

The more i increase this values, the more quality is lost in the shadow. Maybe more than just one DirectionalLight? Like 4 more to the left and right ?

Also maybe you can move light ang light target with model.
Or again:

const dirLight = new THREE.DirectionalLight( 0xffffff, 1.0);
dirLight.position.set( 6, 20, 20 );
dirLight.castShadow = true;
dirLight.shadow.mapSize = new THREE.Vector2(8192, 8192);
dirLight.shadow.camera.top = 400;
dirLight.shadow.camera.bottom = - 400;
dirLight.shadow.camera.left = - 400;
dirLight.shadow.camera.right = 400;
dirLight.shadow.camera.near = 0.1;
dirLight.shadow.camera.far = 800;
dirLight.shadow.bias= -0.002;
scene.add( dirLight );

Shadow like mesh geometry: three.js examples

Shadow like mesh geometry: three.js examples

Thank you for that tip :wink:
Will try that.