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

我不知道为什么......

Three.js阴影使一切变黑

1 个答案: