Cień ThreeJS nie renderujący

Question

Przeszukałem wiele innych S.O. pytania, a następnie wszystkie porady, ale wciąż nie mam pojęcia, dlaczego nie mogę uzyskać cienia do renderowania na tej bardzo podstawowej scenie.

http://jsfiddle.net/4Txgp/

[Aktualizacja] Kod:

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

mam scenę z samolotu, obiekt (kostka), reflektor (skopiowane bezpośrednio z http://threejs.org/docs/58/#Reference/Lights/SpotLight dla celów testowych) oraz aparat fotograficzny. Jest w porządku, poza tym, że kostka nie rzuca cienia na "ziemię" (płaszczyznę), a cieniowanie wygląda tak, jakby wszystko zostało zrobione w podstawowym materiale. Używam kombinacji Phongów i Lambertów.

Moje światło kierunkowe jest ustawione na rzucanieShadow = true ;, a mój samolot jest ustawiony z receiveShadow = true, wraz z ustawieniami mapy cienia. Sam renderer ma shadowMapEnabled = true.

Próbowałem różnych rozwiązań, pamiętam z poprzedniej wersji ThreeJS byłyby wywołania biblioteki zewnętrznej w zależności od tego, co chcesz zrobić, ale widziałem również inne przykłady na JSFiddle po prostu nazywając ThreeJS sam, jak również jako przykład z oficjalnej strony, to działa dobrze.

Jakieś wskazówki/informacje/konstruktywne uwagi na temat przeoczenia czegoś prostego i małego?

Answer 1

Musisz ustawić

cube.castShadow = true; 

i upewnij się, że kamera cień daleko samolot osiągnie sześcian.

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

Three.js r.58