Three.js тень делает все черное

Question

Сцена правильно делает перед тем renderer.shadowMapEnabled = true; устанавливается: http://jsfiddle.net/NtSv9/

Когда renderer.shadowMapEnabled = true; устанавливается вместе с литьем и получающего тень, используя MeshLambertMaterial, сцена визуализируется быть все черное.

Код:

var scene = null; 
var camera = null; 
var renderer = null; 

init(); 

function init() { 
    renderer = new THREE.WebGLRenderer({ 
     canvas: document.getElementById('mainCanvas') 
    }); 

    renderer.shadowMapEnabled = true; 
    renderer.shadowMapSoft = true; 
    renderer.shadowCameraNear = 0.5; 
    renderer.shadowCameraFar = 100; 
    renderer.shadowCameraFov = 50; 

    renderer.shadowMapBias = 0.0039; 
    renderer.shadowMapDarkness = 0.5; 
    renderer.shadowMapWidth = 1024; 
    renderer.shadowMapHeight = 1024; 

    scene = new THREE.Scene(); 

    camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100); 
    camera.position.set(5, 15, 25); 
    camera.lookAt(new THREE.Vector3(0, 0, 0)); 
    scene.add(camera); 

    var light = new THREE.DirectionalLight(0xffffff); 
    light.castShadow = true; 
    light.shadowCameraVisible = true; 
    light.position.set(-2.0, 5.0, 3.0); 
    scene.add(light); 

    var greenCube = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 2), 
            new THREE.MeshLambertMaterial({color: 0x00ff00})); 
    greenCube.castShadow = true; 
    scene.add(greenCube); 

    var plane = new THREE.Mesh(new THREE.PlaneGeometry(8, 8), 
           new THREE.MeshLambertMaterial({color: 0xcccccc})); 
    plane.rotation.x = -Math.PI/2; 
    plane.position.y = -1; 
    plane.receiveShadow = true; 
    scene.add(plane); 

    renderer.render(scene, camera); 
} 

Я не знаю, что пошло не так, пожалуйста, посмотрите на полный код на http://jsfiddle.net/NtSv9/1/

Answer 1

Оказывается, что я должен написать

renderer = new THREE.WebGLRenderer(); 
var container = document.getElementById('canvas'); 
container.appendChild(renderer.domElement); 

вместо от

renderer = new THREE.WebGLRenderer({ 
    canvas: document.getElementById('mainCanvas') 
}); 

Я не знаю, почему ...