three.js directional light shadows

Question

http://jsfiddle.net/wp6E3/3/

var camera, scene, renderer;
var cubes = [];

init();
animate();

function init() {

    scene = new THREE.Scene();
    scene.add(new THREE.AmbientLight(0x212223));

    for (var i = 0; i < 10; i++) {
        var cubeGeometry = new THREE.CubeGeometry(1, 1.5, 1);
        var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0x1ec876 });
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.position.set(i*1.2, 0, 0.5);
        cube.castShadow = true;
        scene.add(cube);

        cubes.push(cube);
    }

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
    camera.position.x = -4;
    camera.position.y = -4;
    camera.position.z = 20;
    camera.lookAt(cubes[5].position);
    scene.add(camera);

    var terrainGeo = new THREE.PlaneGeometry(50, 50);
    var terrainMaterial = new THREE.MeshLambertMaterial({ color: 0xc0c0a0 });
    var terrain = new THREE.Mesh(terrainGeo, terrainMaterial);
    terrain.receiveShadow = true;
    scene.add(terrain);

    var light = new THREE.DirectionalLight(0xffffff, 1);
    light.castShadow = true;
    light.shadowCameraVisible = true;
    light.position.set(-3, 1, 5);
    scene.add(light);
    scene.add( new THREE.DirectionalLightHelper(light, 0.2) );

    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMapEnabled = true;
    renderer.shadowMapSoft = false;
    document.body.appendChild(renderer.domElement);
}

function animate() {
    requestAnimationFrame(animate);
    for (var i = 0; i < cubes.length; i++) {
        cubes[i].rotation.x += 0.01 * i;
        cubes[i].rotation.y += 0.02 * i;
    }

    renderer.render(scene, camera);
}

Why shadows doesn't work?

I've looked related questions and three.js references but don't understand what I do wrong.

Three.js shadows not working properly

How to create directional light shadow in Three.JS?

ThreeJS shadow not rendering

http://threejs.org/docs/#Reference/Lights/DirectionalLight

http://learningthreejs.com/blog/2012/01/20/casting-shadows/

Answer 1

First of all, add a camera controller to your scene so you can see what you are doing. Now you can rotate the camera for different views.

controls = new THREE.OrbitControls( camera, renderer.domElement );

Second, when using a jsfiddle, be sure to link to the recent version of the three.js library.

<script src="http://threejs.org/build/three.min.js"></script>

For proper resolution, is important that your shadow camera is positioned tight around your scene. You do that by setting the following:

light.shadowCameraLeft = -20; // or whatever value works for the scale of your scene
light.shadowCameraRight = 20;
light.shadowCameraTop = 20;
light.shadowCameraBottom = -20;

For directional lights, only the "direction to" the light's position matters. However, when shadow maps are involved, the actual position of the light is important, since it controls the shadow camera, too.

light.position.set( -60, 20, 100 );

Here is an updated fiddle. Rotate the camera with the mouse.

http://jsfiddle.net/wp6E3/4/

three.js r.66

Answer 2

Add these to your light definition:

light.shadowMapWidth = 
light.shadowMapHeight = 1024;
light.shadowCameraNear = 1;
light.shadowCameraFar = 100;