Shadows + Moving Light

Three.js + Orbit

by steveow

HTML

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

CSS

body {
    background-color: #000;
    margin: 0px;
    overflow: hidden;
}

JavaScript

//... based on a JS Fiddle by WestLangley (no good in Win7 Firefox)
var camera, scene, renderer;
var cubes = [];
var light, colorVal = '000000' //...drop the '0x' '0x000000'; //SW... to make them global
var jj = 0x000001;
var stepCount;
var rrr=0,ggg=0,bbb=0;
var lpos_x=-60,lpos_y=20, lpos_z=100;

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, 1, 10000); // CHANGED
    camera.position.x = 0; // CHANGED
    camera.position.y = 0; // CHANGED
    camera.position.z = 100; // CHANGED
    //    camera.lookAt(cubes[5].position);
    //    scene.add(camera); // not required

    var terrainGeo = new THREE.PlaneGeometry(150, 150);
    var terrainMaterial = new THREE.MeshLambertMaterial({
        color:  0x1ec876
    });
    var terrain = new THREE.Mesh(terrainGeo, terrainMaterial);
    terrain.position.set (0,0,-10); // CHANGED
    terrain.receiveShadow = true;
    scene.add(terrain);

    light = new THREE.DirectionalLight(0xffffff, 1);
    light.castShadow = true;
    light.shadowCameraVisible = true;
    light.shadowCameraNear = 20;//sw 100;
    light.shadowCameraFar = 200;
    light.shadowCameraLeft = -20; // CHANGED
    light.shadowCameraRight = 20; // CHANGED
    light.shadowCameraTop = 20; // CHANGED
    light.shadowCameraBottom = -20; // CHANGED
        
    //light.position.set(-60, 20, 100); // CHANGED
    light.position.set(lpos_x, lpos_y, lpos_z); 
    
    scene.add(light);
    scene.add(new...