javascript - Shadow is abnormally-shaped for MeshLambertMaterial in Three.js r76? -
using r70, shadow shows expected - r70 example (shadow correct shape)
using r76 however, shadow abnormally shaped - r76 example (shadow abnormally shaped)
you can see shadows on meshlambertmaterial on ground plane not expected.
why shadows becoming abnormally shaped? needs changed working in r76?
here code 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;
the first thing add shadow camera helper can see going on:
light.shadowcamerahelper = new three.camerahelper( light.shadow.camera ); scene.add( light.shadowcamerahelper ); 
it clear shadow camera frustum clipping shadow.
starting in three.js r.76, shadow camera frustum automatically set more closely matches spotlight field-of-view.
if override that, can specify custom shadow frustum 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
