Three.js 阴影让一切变黑答案

【问题标题】：Three.js shadow makes everything blackThree.js 阴影让一切变黑
【发布时间】：2013-09-18 02:58:18
【问题描述】：

在设置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/查看完整代码

【问题讨论】：

标签： javascript three.js shadow

【解决方案1】：

原来我应该写

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

而不是

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

不知道为什么……

【讨论】：