He mirado a través de una serie de otros S.O. Las preguntas siguieron todos los consejos, pero sigo sin tener idea de por qué no puedo obtener sombras para renderizar en esta escena tan básica.

http://jsfiddle.net/4Txgp/

[Actualizado] Código:

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);
}

Tengo una escena con un plano, un objeto (cubo), un foco (copiado directamente dehttp://threejs.org/docs/58/#Reference/Lights/SpotLight para propósitos de prueba), y una cámara. Se procesa bien, excepto que el cubo no proyecta una sombra en el "suelo" (plano), y el sombreado parece que todo se ha hecho en un material básico. Estoy usando un combo de Phongs y Lamberts.

Mi luz direccional está configurada en castShadow = true; y mi plano está configurado con receiveShadow = true, junto con la configuración del mapa de sombras. El renderizador en sí tiene shadowMapEnabled = true.

He intentado varias soluciones, recuerdo que con versiones anteriores de ThreeJS habría llamadas a la biblioteca externa dependiendo de lo que quisieras hacer, pero también he visto otros ejemplos en JSFiddle que solo llaman ThreeJS, así como ejemplos del Sitio oficial, que funciona bien.

¿Alguna sugerencia / información / comentarios constructivos sobre pasar por alto algo simple y pequeño?