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和阴影

1 个答案: