3dthree.jsshadows

ThreeJS shadows acting funny near walls

So I'm working with shadows in ThreeJS. I'm using a Perspective Camera with WebGLRenderer. The lighting settings are as such.

var light = new THREE.SpotLight(0xdddddd, 1);
light.castShadow = true;
light.shadow = new THREE.LightShadow(new THREE.PerspectiveCamera(60, 1, 1, 2500));
light.shadow.bias = 0.0001;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
light.position.set(100, 800, 0);

What I'm getting is a cut off shadow when I move close the wall. I played with Shadow Bias however for me it's a total stab in the dark.

What I'm getting is this odd shadow behavior. I've attached a screenshot and circled it in red along with an arrow pointing to it. Notice how the shadow is cut off almost as though the light is reflecting off the wall and canceling out the shadow. Any way to avoid this?

enter image description here

Solution

  • Most likely the shadow camera frustm is to narrow. You can check it by using the shadow camera helper: 

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

    The shadow camera is limited in size because of performance, but you can adjust every plane from it to suit your needs or just increase its angle (from 60 to 90 for example):

    light.shadow = new THREE.LightShadow(new THREE.PerspectiveCamera(90, 1, 1, 2500));