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

@Rabbid76 why? how will this help? won't my shadows then be orthographic and not match my scene? — Tom Chapman
Okay, so that was magical @Rabbid76. If you post it as the answer I'll tick it off. — Tom Chapman

Rabbid76 Rabbid76 · Accepted Answer · 2018-01-20T11:58:49

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 );

three.js DirectionalLight and shadow cut off

Steps I've taken to enable shadows

1 Answers