It seems that with three.js, a face facing away from a spotlight still receives shadows caused by other meshes between this face and the spotlight. How can we avoid such shadows?
See this jsfiddle for example. In this example, we have a simple scene with a spotlight, an ambient light, a cube, a sphere, and a camera. The frustum of the shadow camera of the spotlight is set to visible.
As we can see, the sphere casts shadow on the farthest face of the cube from the sphere, but this looks wrong because this face is facing away from the spotlight and is not lit by it. I would like to avoid this.
Please note that this jsfiddle is a simplified version of what I would like to achieve. In the actual code, the mesh shape is more complicated and the camera is moved around, and because of these, neither turning off the shadow nor reducing shadowCameraFar is an option for me.
Here is what I think is the most relevant part of the code. See the link to jsfiddle above for the full code.
sphereMesh.castShadow = true;
...
cubeMesh.receiveShadow = true;
...
light.castShadow = true;
light.shadowCameraVisible = true;
light.shadowCameraNear = 200;
light.shadowCameraFar = 1000;
light.shadowCameraFov = 30;
light.shadowBias = 0;
light.shadowDarkness = 0.5;
light.shadowMapWidth = 2048;
light.shadowMapHeight = 2048;
...
scene.add(new THREE.AmbientLight(0x404040));
...
var renderer = new THREE.WebGLRenderer();
...
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFShadowMap;
The third figure in question “really weird ghosty shadows using three.js” by Eno seems to illustrate the same issue, but it is not the main point of that question, and I do not find the answer to my question in the answer to that question.
