Strange behaviour of shadowing in ThreeJS

Question

so I have a threeJS scene, and I have some spheres (multimaterial) added. I have also a directional light added :

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;

So when the user adds or removes spheres, a function which executes "reforms" the shadow camera frustum like this :

    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(); 

and a possible result of the above code is this :

an other aspect of the exact situation of above :

I have set the camera's frustum visibility to on, so there it is. The problem is the shadowing that is generated for no reason (pointed out by the red arrows). No other objects are in the scene at that moment and the spheres are fully inside the camera frustum.

Problems in shadowing like these are common after updating the spheres (add/remove), does anybody have any idea about it?

I use three.js r72 , thanks!

Answer 1

Based on your comments, what you are seeing is self-shadowing artifacts.

You need to adjust the shadowBias ( now called shadow.bias ) parameter.

Varying the shadow bias results in a trade-off between "peter-panning" (too much positive bias) and self-shadowing artifacts (too much negative bias).

three.js r.73