Shadow is abnormally-shaped for MeshLambertMaterial in Three.js r76?

Question

Using r70, the shadow shows as expected - r70 example (Shadow it correct shape)

Using r76 however, the shadow is abnormally shaped - r76 example (Shadow is abnormally shaped)

You can see that the shadows on the MeshLambertMaterial on the ground plane are not as expected.

Why is the shadows becoming abnormally shaped? What needs to be changed to get it working in r76?

Here is the code I am using (same in both example):

var light;
light = new THREE.SpotLight(0xdfebff, 1);
light.position.set(300, 400, 50);
light.castShadow = true;
light.shadowCameraVisible = true;
scene.add(light);

var groundMaterial = new THREE.MeshLambertMaterial({
    color: 0xFF0000,
});
plane = new THREE.Mesh(new THREE.PlaneGeometry(500, 500), groundMaterial);
plane.rotation.x = -Math.PI / 2;
plane.receiveShadow = true;
plane.castShadow = false;
scene.add(plane);

var boxgeometry = new THREE.CubeGeometry(100, 100, 100);
var boxmaterial = new THREE.MeshLambertMaterial({
    color: 0x0aeedf
});
var cube = new THREE.Mesh(boxgeometry, boxmaterial);
cube.castShadow = true;
cube.position.x = 0;
cube.position.y = 100;
cube.position.z = 0;
scene.add(cube);

webglRenderer = new THREE.WebGLRenderer({ alpha: true });
webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
webglRenderer.domElement.style.position = "relative";
webglRenderer.shadowMapEnabled = true;
webglRenderer.shadowMapSoft = true;

To me, it is bad on both of them, although they look differently. (FF Nightly, 64bit, magyar) — peterh
I had a go and changed some things to get the helper displaying and the spotlight affecting the ground plane. I had to change the ground to a PhongMaterial to get the light affecting it. I could not actually get a shadow appearing though. http://jsfiddle.net/2pha/ef4r5s76/4/ — 2pha
I have edited the question and voted to reopen. I think this question deserves an answer. — 2pha

WestLangley WestLangley · Accepted Answer · 2016-06-05T17:42:37

The first thing to do is to add a shadow camera helper so you can see what is going on:

light.shadowCameraHelper = new THREE.CameraHelper( light.shadow.camera );
scene.add( light.shadowCameraHelper );

It is clear that the shadow camera frustum is clipping the shadow.

Starting in three.js r.76, the shadow camera frustum is automatically set so it more closely matches the spotLight field-of-view.

If you would like to override that, you can specify a custom shadow frustum like so:

// custom shadow frustum
light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 30, 1, 200, 700 ) );

updated fiddle: http://jsfiddle.net/ef4r5s76/5/

three.js r.76/r.77

Shadow is abnormally-shaped for MeshLambertMaterial in Three.js r76?

1 Answers