THREE.js spotlight casting shadow with no object between the near plane and the receiver

问题

I'm having troubles with getting shadows to work in three.js . On the image below you can see a spotlight casting a shadow on an object with plane geometries. There is no object in between the spotlight near plane and the plane geometries of the wall.

What can cause such behavior?

The light is configured this way:

var spotLight = new THREE.SpotLight(0xFFFFFF, 1);
spotLight.position.set(0, -20, 100);
spotLight.target.position.set(0,0,0);
spotLight.shadowDarkness = 0.5;
spotLight.shadowCameraVisible = true;
spotLight.castShadow = true;
spotLight.shadowMapWidth = 1024;
spotLight.shadowMapHeight = 1024;

spotLight.shadowCameraNear = 10;
spotLight.shadowCameraFar = 200;
spotLight.shadowCameraFov = 10;
spotLight.shadowBias = 0.1;
scene.add(spotLight);

The rectangular meshes are BufferGeometries converted from PlaneGeometries with an png uv mapped image as the texture with .receiveShadow set to true.

THREE.js version r71.

Any help will be very much appreciated.

回答1:

Maybe it is self-shadowing, try to play with spotLight.shadowBias. Usually, a value of 0.05 is used for avoid self-shadowing.

来源：https://stackoverflow.com/questions/31514344/three-js-spotlight-casting-shadow-with-no-object-between-the-near-plane-and-the