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 abnormall

Answer 1

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