三.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')
});

我不知道为什么。。。