three.js DirectionalLight and shadow cut off

Question

As per the screenshot, shadows cast onto the THREE.PlaneGeometry(250, 380, 1, 1) below are cut off.

Steps I've taken to enable shadows

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

..

camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 1000);

..

mainLight = new THREE.DirectionalLight(0xffffff, 0.5);
mainLight.position.set(50, 50, 50);
mainLight.castShadow = true;
mainLight.shadow.mapSize.width = width * window.devicePixelRatio;
mainLight.shadow.mapSize.height = width * window.devicePixelRatio;
mainLight.shadow.camera.near = 1;
mainLight.shadow.camera.far = 1000;
mainLight.shadow.camera.fov = 100;
scene.add(mainLight);

..

plane.receiveShadow = true;

..

model.castShadow = true;
model.receiveShadow = true;

---

I've played with different values like the shadow camera FOV and far plane values...

Is this a caveat with using DirectionalLight? I need even lighting across all of my models, as opposed to SpotLight.

I found three.js shadow cutoff but it simply suggested using a SpotLight instead and gave no explanation as to why that changes anything.

When I do use a SpotLight, I suddenly lose shadows on ground plane altogether.

-- Thanks

Answer 1

See the three.js documentation for DirectionalLightShadow :

This is used internally by DirectionalLights for calculating shadows.

Unlike the other shadow classes, this uses an OrthographicCamera to calculate the shadows, rather than a PerspectiveCamera . This is because light rays from a DirectionalLights are parallel.

See further DirectionalLight

A common point of confusion for directional lights is that setting the rotation has no effect. This is because three.js's DirectionalLight is the equivalent to what is often called a 'Target Direct Light' in other applications.

This means that its direction is calculated as pointing from the light's position to the target's position (as opposed to a 'Free Direct Light' that just has a rotation component).

The reason for this is to allow the light to cast shadows - the shadow camera needs a position to calculate shadows from .

This means that the area affected by the shadow is defined by the position and the camera of the light source ( DirectionalLight ).

Set up the camera for the mainLight and define its orthographic projection for your needs:

mainLight.shadow.camera = new THREE.OrthographicCamera( -100, 100, 100, -100, 0.5, 1000 );