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;

照顾工件。