Issue with three.js and shadows

Question

I am trying to make an opaque box with three.js, but the light is still going thought the box:

I have one "THREE.SpotLight" and 2 objects in my scene: the sphere is projecting the shadow onto the box.

There are 2 shadows (I think there should be only one):

the first, at the top of the box seems correct,
the second is weird (as if the box where transparent).

Illustration here: http://i.stack.imgur.com/ZNmI3.png

    var scene, camera, renderer;
    var material;

    init();

    function init() {

    //Renderer
    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.shadowMapEnabled = true;
    renderer.setSize(window.innerWidth, window.innerHeight);

    scene = new THREE.Scene();
    //Camera
    camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0, 20, 20);
    camera.lookAt(new THREE.Vector3(0, 15, 0));
    //Material
    material = new THREE.MeshLambertMaterial({
        color: 0xffffff
    });
    //Box
    var box = new THREE.Mesh(new THREE.BoxGeometry(7, 16, 7), material);
    box.position.y = 8;
    box.castShadow = true;
    box.receiveShadow = true;
    scene.add(box);
    //Sphere
    geometry = new THREE.SphereGeometry(.8, 48, 48);
    var sphere = new THREE.Mesh(geometry, material);
    sphere.position.set(-5, 17, -3);
    sphere.castShadow = true;
    sphere.receiveShadow = true;
    scene.add(sphere);

    // Lights

    var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-50, 40, -50);
    spotLight.target.position.set(-5, 17, -3);
    spotLight.castShadow = true;
    spotLight.shadowMapWidth = 2048;
    spotLight.shadowMapHeight = 2048;
    spotLight.shadowCameraVisible = true;
    scene.add(spotLight);

    var ambientLight = new THREE.AmbientLight(0x444444);
    scene.add(ambientLight);

    document.body.appendChild(renderer.domElement);

    }
    renderer.render(scene, camera);

My question is:

How can i make the box opaque?

Jsfiddle here: http://jsfiddle.net/v81gs6u1/4/

gaitat gaitat · Accepted Answer · 2015-01-28T15:03:32

It is not the light that is going through the box but the shadow. Try playing with the shadow bias. In your case adding:

spotLight.shadowBias = 0.001;

takes care of the artifact.

Issue with three.js and shadows

1 Answers