I am currently working on a threeJS scene with multiple spheres (multimaterial) and a directional light. The code snippet for adding the directional light is as follows:
this.light = new THREE.DirectionalLight( 0xFFFFFF, 1 );
this.light.position.set( 2, 10, 2 );
this.light.castShadow = true;
this.light.shadowMapSoft = true;
this.light.shadowCameraVisible = true;
this.light.shadowCameraNear = 1;
this.light.shadowCameraFar = 10;
this.light.shadowBias = 0.0009;
this.light.shadowDarkness = 0.3;
this.light.shadowMapWidth = 1024;
this.light.shadowMapHeight = 1024;
this.light.shadowCameraLeft = -8;
this.light.shadowCameraRight = 8;
this.light.shadowCameraTop = 8;
this.light.shadowCameraBottom = -8;
When spheres are added or removed by the user, a function called "reforms" adjusts the shadow camera frustum dynamically as illustrated in this diagram: https://i.sstatic.net/xWPee.png
this.light.position.set( posV.x, posV.y, posV.z);
this.light.shadowCamera.far = l2*3;
this.light.shadowCamera.left = -l2;
this.light.shadowCamera.right = l2;
this.light.shadowCamera.bottom = -l2;
this.light.shadowCamera.top = l2;
this.light.shadowCamera.updateProjectionMatrix();
The result of implementing the above code can be seen below:
Another view of the same scenario shown above can be found here: https://i.sstatic.net/OMtvf.png
I have enabled the visibility of the camera frustum, but I am facing issues with unnecessary shadowing as highlighted by the red arrows. Despite no additional objects in the scene and the spheres being completely within the camera frustum.
Such shadowing problems often arise after sphere updates (add/remove), has anyone encountered a similar issue before?
I am using three.js r72, any insights would be greatly appreciated! thanks!