两个物体不会投射阴影，而另一个物体则投射阴影

Question

我有三个立方体对象，除了它们的x位置。我希望他们投下一个阴影，但不知何故，他们中的两个不投影，而另一个投影。

这是正在发生的事情的图片。 https://ibb.co/z6Vwxmf

我确信所有对象的castShadow都设置为true。而且我认为我也没有错过任何阴影设置属性（因为中间对象正确投射阴影。）

这些对象是在以下代码中的// left cube //右立方体注释下创建的。

< script >

    window.addEventListener('load', init, false);

function init(event) {
    createScene();
    createLights();
    createTile01();
    createTile02();
    createTile03();
    createBase();

    loop();
}

var scene, camera, Width, Height, renderer, container;

function createScene() {

    Width = window.innerWidth;
    Height = window.innerHeight;

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

    camera.position.x = 0;
    camera.position.y = 10;
    camera.position.z = 50;
    camera.lookAt(scene.position);

    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0x000000));
    renderer.setSize(Width, Height);
    renderer.shadowMap.enabled = true;

    container = document.getElementById('scene');
    container.appendChild(renderer.domElement);
    window.addEventListener('resize', handleWindowResize, false);

}

function handleWindowResize() {
    Height = window.InnerHeight;
    Width = window.InnerWidth;
    renderer.setSize(Width, Height);
    camera.aspect = Width / Height;
    camera.updateProjectionMatrix();
}

var ambiLight, spotLight;

function createLights() {
    ambiLight = new THREE.AmbientLight(0xffffff);
    scene.add(ambiLight);

    spotLight = new THREE.DirectionalLight(0xffffff);
    spotLight.position.set(0, 30, -0);
    spotLight.intensity = 1;
    spotLight.castShadow = true;
    scene.add(spotLight);
}

Tile01 = function() {
    var geom = new THREE.BoxGeometry(10, 10, 2);
    var mat = new THREE.MeshPhongMaterial({
        color: 0x53b0df
    });
    this.mesh = new THREE.Mesh(geom, mat);
    this.mesh.receiveShadow = true;
    this.mesh.castShadow = true;
}

var tile01;

function createTile01() {
    tile01 = new Tile01();
    tile01.mesh.position.set(0, 0, 0);
    scene.add(tile01.mesh);
}

//right cube
Tile02 = function() {
    var geom = new THREE.BoxGeometry(10, 10, 2);
    var mat = new THREE.MeshPhongMaterial({
        color: 0x25b0cf
    });
    this.mesh = new THREE.Mesh(geom, mat);
    this.mesh.receiveShadow = true;
    this.mesh.castShadow = true;
}

var tile02;

function createTile02() {
    tile02 = new Tile02();
    tile02.mesh.position.set(20, 0, 0);
    scene.add(tile02.mesh);
}

//left cube
Tile03 = function() {
    var geom = new THREE.BoxGeometry(10, 10, 2);
    var mat = new THREE.MeshPhongMaterial({
        color: 0x00b0df
    });
    this.mesh = new THREE.Mesh(geom, mat);
    this.mesh.receiveShadow = true;
    this.mesh.castShadow = true;
}

var tile03;

function createTile03() {
    tile03 = new Tile03();
    tile03.mesh.position.set(-20, 0, 0);
    scene.add(tile03.mesh);
}

Base = function() {
    var geom = new THREE.CylinderGeometry(100, 30, 5, 60);
    var mat = new THREE.MeshPhongMaterial({
        color: 0xcf34ec
    });

    this.mesh = new THREE.Mesh(geom, mat);
    this.mesh.castShadow = true;
    this.mesh.receiveShadow = true;
}

var base;

function createBase() {
    base = new Base();
    base.mesh.position.set(0, -10, -20);
    scene.add(base.mesh);
}

function loop() {
    renderer.render(scene, camera);
    requestAnimationFrame(loop);
}

< /script>

你能帮我弄清楚设置有什么问题吗？

Answer 1

我自己能够解决这个问题。

参考我在其他Q / As中发现的关于阴影问题的一些解决方案，我在灯光下添加了shadow.camera.left / right / top / bottom属性并且它有效。

以下是我更正的代码。现在我可以看到所有三个物体的阴影。

    var ambiLight, spotLight;
    function createLights() {
        ambiLight = new THREE.AmbientLight(0xffffff);
        scene.add(ambiLight);

        spotLight = new THREE.DirectionalLight(0xffffff);
        spotLight.position.set(0, 30, -0);
        spotLight.intensity = 1;
        spotLight.castShadow = true;

        spotLight.shadow.camera.left = -400;
        spotLight.shadow.camera.right = 400;
        spotLight.shadow.camera.top = 400;
        spotLight.shadow.camera.bottom = -400;
        spotLight.shadow.camera.near = 1;
        spotLight.shadow.camera.far = 1000;

        spotLight.shadow.mapSize.width = 2048;
        spotLight.shadow.mapSize.height = 2048;

        scene.add(spotLight);
    }