0

场景在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/上查看完整代码

4

1 回答 1

0

原来我应该写

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

代替

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

我不知道为什么...

于 2013-09-25T02:02:53.707 回答