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

Question

为什么我循环中的每个立方体都没有投射阴影？

我使用定向光工作，所有立方体都应该投射阴影。但由于某种原因，它在 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();

Answer 1

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

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

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

Object in loop won't cast shadow over whole lopop with Three.js

javascript

loops

shadow

light

three.js