How to avoid this ugly effect with shadow?

Hi,
i’m a newbie and i have this ugly effect

How do you avoid this to have shadow good sharp ?

let create_lights = function () {
     let material = new THREE.MeshPhongMaterial({
         color: randomInRange(0x888800, 0xffffff),
         emissive: 0xffb726,
         emissiveIntensity: 750
     });
     let geometry = new THREE.SphereGeometry(25, 120, 120);
     o.sun = new THREE.Mesh(geometry, material);
     o.sun.position.set(0, 300, 0)
     scene.add(o.sun);
     //---------------------------------------
     o.hemisphereLight = new THREE.HemisphereLight(0xf6ffb9, 0xf6ffb9, .5)

     o.ambientLight = new THREE.AmbientLight(0xf6ffb9, .2);

     o.shadowLight = new THREE.DirectionalLight(0xf6ffb9, .5);
     o.shadowLight.position.set(4000, 1500, 4000);
     o.shadowLight.castShadow = true;
     o.shadowLight.bias = 2;
     o.shadowLight.shadow.camera.left = -8000;
     o.shadowLight.shadow.camera.right = 8000;
     o.shadowLight.shadow.camera.top = 8000;
     o.shadowLight.shadow.camera.bottom = -8000;
     o.shadowLight.shadow.camera.near = 1;
     o.shadowLight.shadow.camera.far = 16000;
     o.shadowLight.shadow.mapSize.width = 8000;
     o.shadowLight.shadow.mapSize.height = 8000;
     var ch = new THREE.CameraHelper(o.shadowLight.shadow.camera);
     scene.add(ch);
     scene.add(o.hemisphereLight);
     scene.add(o.shadowLight);
     scene.add(o.ambientLight);
 }

Thanks.

To have a sharper shadow, use pointlight or spotlight.
Also the mapSize is most performant with a power of two: 8192.

You can also use renderer.shadowMap.type = THREE.PCFSoftShadowMap; which softens the shadow no matter the map size

Hi both, thanks for your advices,

my map is 8000 by 8000
with pointlight or spotlight, i don’t have a light effect on the whole map but it’s increase the border of the shadow.

with renderer.shadowMap.type = THREE.PCFSoftShadowMap, my shadow are better, not perfect see my printscreen :

@espace3d Make your shadow map size always a power of 2 so 8192, and try set your o.shadowLight.shadow.bias to -0.001

i think this isn’t right, you need to replace with…

o.shadowLight.shadow.bias = -0.001

@espace3d ohh just realised your constraints for the shadow.camera are huge…

try use…

var helper1 = new THREE.CameraHelper( directionalLight.shadow.camera );
scene.add( helper1 );

to see the shadow.camera and make sure it’s not as big as it needs to be

Thanks @forerunrun

I have already set the camera helper and get your advice so now with this :

o.shadowLight = new THREE.DirectionalLight(0xf6ffb9, .5);
 o.shadowLight.position.set(150, 1500, 350);
 o.shadowLight.castShadow = true;
 const d = 1000
 o.shadowLight.shadow.camera.left = -d;
 o.shadowLight.shadow.camera.right = d;
 o.shadowLight.shadow.camera.top = d;
 o.shadowLight.shadow.camera.bottom = -d;
 o.shadowLight.shadow.camera.near = 1;
 o.shadowLight.shadow.camera.far = 10000;
 o.shadowLight.shadow.mapSize.width = 8192;
 o.shadowLight.shadow.mapSize.height = 8192;
 o.shadowLight.castShadow = true;
 o.shadowLight.bias = -0.001;


// in animate 
      o.shadowLight.position.set(camera.position.x, 400, camera.position.z);

Thanks. No the fight is to set my joystick in my mobile view.

is it better?

i think it needs to be

o.shadowLight.shadow.bias = -0.001

instead of

o.shadowLight.bias = -0.001;

I have set this and have this effect :

@espace3d i’m not sure i know enough but from playing around for a bit i’m sure if the bounds of your shadow camera are too big in scale you get this effect, it could be that the scale of your scene is too big, each unit is equal to 1 meter, so your shadow.camera.far is 10,000 meters, that seems huge compared to any example i’ve seen but maybe i’m wrong on this