ExoGeN
February 7, 2022, 1:32pm
1
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;
ExoGeN
February 7, 2022, 1:54pm
3
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
ExoGeN
February 7, 2022, 2:16pm
6
Shadow like mesh geometry: three.js examples
Thank you for that tip
Will try that.