three.js 和阴影问题

Question

我正在尝试用 three.js 制作一个不透明的盒子，但光线仍然穿过盒子：

我的场景中有一个 "THREE.SpotLight" 和 2 个物体：球体将阴影投射到盒子上。

有2个影子（我觉得应该只有一个）：

框顶部的第一个似乎是正确的，
第二个很奇怪（好像透明的盒子）。

插图在这里：http://i.stack.imgur.com/ZNmI3.png

    var scene, camera, renderer;
    var material;

    init();

    function init() {

    //Renderer
    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.shadowMapEnabled = true;
    renderer.setSize(window.innerWidth, window.innerHeight);

    scene = new THREE.Scene();
    //Camera
    camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0, 20, 20);
    camera.lookAt(new THREE.Vector3(0, 15, 0));
    //Material
    material = new THREE.MeshLambertMaterial({
        color: 0xffffff
    });
    //Box
    var box = new THREE.Mesh(new THREE.BoxGeometry(7, 16, 7), material);
    box.position.y = 8;
    box.castShadow = true;
    box.receiveShadow = true;
    scene.add(box);
    //Sphere
    geometry = new THREE.SphereGeometry(.8, 48, 48);
    var sphere = new THREE.Mesh(geometry, material);
    sphere.position.set(-5, 17, -3);
    sphere.castShadow = true;
    sphere.receiveShadow = true;
    scene.add(sphere);

    // Lights

    var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-50, 40, -50);
    spotLight.target.position.set(-5, 17, -3);
    spotLight.castShadow = true;
    spotLight.shadowMapWidth = 2048;
    spotLight.shadowMapHeight = 2048;
    spotLight.shadowCameraVisible = true;
    scene.add(spotLight);

    var ambientLight = new THREE.AmbientLight(0x444444);
    scene.add(ambientLight);

    document.body.appendChild(renderer.domElement);

    }
    renderer.render(scene, camera);

我的问题是：

如何使盒子不透明？

Jsfiddle 在这里：http://jsfiddle.net/v81gs6u1/4/

Answer 1

穿过盒子的不是光而是影子。尝试使用阴影偏差。在你的情况下添加：

spotLight.shadowBias = 0.001;

负责神器。

three.js 和阴影问题

Issue with three.js and shadows

javascript

three.js