ThreeJS shadow not rendering

Question

I've looked through a number of other S.O. questions, followed all of the advice, but I'm still clueless as to why I can't get shadows to render on this very basic scene.

http://jsfiddle.net/4Txgp/

[Updated] Code:

var SCREEN_WIDTH = window.innerWidth - 25;
var SCREEN_HEIGHT = window.innerHeight - 25;

var camera, scene;
var canvasRenderer, webglRenderer;

var container, mesh, geometry, plane;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {

    container = document.createElement('div');
    document.body.appendChild(container);

    camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.x = 1200;
    camera.position.y = 1000;
    camera.lookAt({
        x: 0,
        y: 0,
        z: 0
    });

    scene = new THREE.Scene();

    var groundMaterial = new THREE.MeshLambertMaterial({
        color: 0x6C6C6C
    });
    plane = new THREE.Mesh(new THREE.PlaneGeometry(10000, 10000, 100, 100), groundMaterial);
    plane.rotation.x = -Math.PI / 2;
    plane.receiveShadow = true;

    scene.add(plane);

    // LIGHTS
    // scene.add(new THREE.AmbientLight(0x666666));

    /*
    var light;

    light = new THREE.DirectionalLight(0xdfebff, 1.75);
    light.position.set(600, 800, 100);
    //light.position.multiplyScalar(1.3);

    light.castShadow = true;
    light.shadowCameraVisible = true;

    light.shadowMapWidth = light.shadowMapHeight = 2048;

    var d = 50;

    light.shadowCameraLeft = -d;
    light.shadowCameraRight = d;
    light.shadowCameraTop = d;
    light.shadowCameraBottom = -d;

    light.shadowCameraFar = 500;
    light.shadowDarkness = 0.5;

    scene.add(light);
    */

    var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 700, 1000, 100 );

spotLight.castShadow = true;
    spotLight.shadowCameraVisible = true;

spotLight.shadowMapWidth = 2048;
spotLight.shadowMapHeight = 2048;

spotLight.shadowCameraNear = 100;
spotLight.shadowCameraFar = 2000;
spotLight.shadowCameraFov = 30;

scene.add( spotLight );

    var boxgeometry = new THREE.CubeGeometry(100, 200, 100);
    var boxmaterial = new THREE.MeshLambertMaterial({
        color: 0x0aeedf
    });
    var cube = new THREE.Mesh(boxgeometry, boxmaterial);

    cube.position.x = 0;
    cube.position.y = 100;
    cube.position.z = 0;

    scene.add(cube);

    // RENDERER
    webglRenderer = new THREE.WebGLRenderer();
    webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    //webglRenderer.domElement.style.position = "relative";
    webglRenderer.shadowMapEnabled = true;
    webglRenderer.shadowMapSoft = true;

    container.appendChild(webglRenderer.domElement);
}

function animate() {
    var timer = Date.now() * 0.0002;
    camera.position.x = Math.cos(timer) * 1000;
    camera.position.z = Math.sin(timer) * 1000;
    requestAnimationFrame(animate);
    render();
}

function render() {
    camera.lookAt(scene.position);
    webglRenderer.render(scene, camera);
}

I have a scene with a plane, an object (cube), a spotlight (copied directly from http://threejs.org/docs/58/#Reference/Lights/SpotLight for testing purposes) , and a camera. It renders fine, except that the cube is not casting a shadow on the "ground" (plane), and the shading looks like everything has been done in a basic material. I'm using a combo of Phongs and Lamberts.

My directional light is set to castShadow = true;, and my plane is set with receiveShadow = true, along with shadow map settings. The renderer itself has shadowMapEnabled = true.

I've tried various solutions, I remember with previous versions of ThreeJS there would be external library calls depending on what you wanted to do, but I've also seen other examples on JSFiddle just calling ThreeJS by itself, as well as examples from the official site, that work fine.

Any hints/info/constructive remarks about overlooking something simple and small?

Answer 1

You need to set

cube.castShadow = true;

and make sure the shadow camera far plane reaches the cube.

Fiddle: http://jsfiddle.net/4Txgp/13/

three.js r.58