循环中的对象不会在Three.js的整个lopop上投射阴影

Posted 2021-04-11

为什么循环中的每个多维数据集都不会投射阴影？

我使用定向光，所有立方体均应投射阴影。但是由于某种原因，它会在5列左右停下来。

let dirLight = new THREE.DirectionalLight(0xFFFFFF, 1.5);
dirLight.position.set(300, -300, 400);
dirLight.castShadow = true;
scene.add(dirLight);

dirLight.shadow.mapSize.width = 512;
dirLight.shadow.mapSize.height = 512;
dirLight.shadow.camera.near = 0.5;
dirLight.shadow.camera.far = 1000;

let cubeGeometry = new THREE.BoxGeometry(1, 3, 1);
let cubeMaterial = new THREE.MeshLambertMaterial({
    color: 0xf54242
});

function drawCubes() {
    for (let c = 0; c < 25; c++) {
        for (let r = 0; r < 10; r++) {
            for (let t = 0; t < 2; t++) {
                let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
                cube.position.x = c * 1.3;
                cube.position.y = r * 3.02;
                cube.position.z = t * 1.01;
                cube.castShadow = true;
                cube.receiveShadow = true;
                scene.add(cube);
            }
        }
    }

}
drawCubes();

答案

由于定向阴影摄影机的默认视锥度太小，您的阴影被裁剪。像这样尝试：

const d = 50;

dirLight.shadow.camera.left = - d;
dirLight.shadow.camera.right = d;
dirLight.shadow.camera.top = d;
dirLight.shadow.camera.bottom = - d;

您也可以使用THREE.CameraHelper来调试阴影摄像机。对调整非常有帮助。请记住，阴影质量在很大程度上取决于平截头体。紧缩的视锥产生更清晰的阴影。

scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );

three.js R109