CODEWITHSUNDEEP
javascriptthree.js
Tom Chapman
Tom Chapman

Reputation: 432

three.js DirectionalLight and shadow cut off

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

scene

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

Upvotes: 6

Views: 3722

Answers (2)

TheNightwalker
TheNightwalker

Reputation: 671

Note that performance versus quality is the big issue. Take this as a base to achieve optimum results,

const directionalLight1 = new THREE.DirectionalLight(0xffffff , 5); // Adjust intensity to a NICE VALUE through trial and error.
directionalLight1.position.set(0, 0, 20);
directionalLight1.castShadow = true;
// Shadow map width and height must be set to a value as low as possible without losing too much crispness. Experiment and adjust.
directionalLight1.shadow.mapSize.width = 1200; // Better readjust after changing directionalLight1.shadow.camera » top bottom left right
directionalLight1.shadow.mapSize.height = 1200; // Better readjust after changing directionalLight1.shadow.camera » top bottom left right
directionalLight1.shadow.camera.near = 0.1; // Near shadow casting distance
directionalLight1.shadow.camera.far = 100; // Far shadow casting distance
// Default shadow casting area is too small (T:5,L:-5,R:5,B:-5)
// Make it bigger but remember that we have to keep it at minimum to prevent the loss of visual prettiness!
directionalLight1.shadow.camera.top = 11;
directionalLight1.shadow.camera.bottom = -11;
directionalLight1.shadow.camera.left = -11;
directionalLight1.shadow.camera.right = 11;
scene.add( directionalLight1 );

Upvotes: 0

Rabbid76
Rabbid76

Reputation: 211166

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

Upvotes: 12

Related Questions