three.js3dlightshadows

Three JS shadow bug?


I was trying to create shadows using a simple directional light & a shadow material, the problem is that the shadows seem to work properly, in a box and when model outside that zone it just disappear ???

image of the shadow at the bounds

here's the code :

var light = new THREE.DirectionalLight(0xffffff, 0);
renderer.shadowMap.enabled = true;
light.position.x = 100;
light.position.y = 150;
light.position.z = 0;
light.castShadow = true;
scene.add(light);

plane.receiveShadow = true;
plane.material = new THREE.ShadowMaterial({color: 0, opacity:1});

Solution

  • You have to configure the internal shadow camera of DirectionalLight in order to get proper shadows. Use the following example as a template for your own code. The important part is:

    var d = 5;
    directionalLight.castShadow = true;
    directionalLight.shadow.camera.left = - d;
    directionalLight.shadow.camera.right = d;
    directionalLight.shadow.camera.top = d;
    directionalLight.shadow.camera.bottom = - d;
    
    directionalLight.shadow.camera.near = 1;
    directionalLight.shadow.camera.far = 20;
    

    This configuration determines which part of your scene will create and receive shadows by the directional light. Be aware to setup the frustum as tight as possible in order to get sharp results.