Three.js奇怪的条纹阴影

Question

问题以下列方式表现出来：

这些是我的灯光设置：

const LIGHT_POSITION = 50;

    let light = new THREE.DirectionalLight(0xddffdd, 1);
    light.position.z = LIGHT_POSITION;
    light.position.y = -LIGHT_POSITION * 2;
    light.position.x = -LIGHT_POSITION;
    light.shadowCameraFov = 60;
    light.shadow.mapSize.x = 1024;
    light.shadow.mapSize.y = 1024;
    scene.add(light);

    let light2 = new THREE.DirectionalLight(0xffdddd, 1);
    light2.position.z = LIGHT_POSITION;
    light2.position.x = -LIGHT_POSITION;
    light2.position.y = LIGHT_POSITION * 2;
    light2.shadow.mapSize.x = 1024;
    light2.shadow.mapSize.y = 1024;
    scene.add(light2);

    let light4 = new THREE.AmbientLight(0xBBBBBB, 0.3);
    scene.add(light4);

我的网格设置：

this.material = new THREE.MeshStandardMaterial({color: 0xffffff,
            morphTargets: true,
            morphNormals: true,
            roughness: 0.8,
            metalness: 0.3
        });

        this.model = new THREE.Mesh(this.geometry, this.material);
        this.model.castShadow = true;
        this.model.receiveShadow = true;

为什么阴影会以这种方式表现出来？

Answer 1

由于mesh.castShadow和mesh.receiveShadow被设置为true.

，您看到的是自阴影工件

您需要调整light.shadow.bias参数 - 接近零的正值或负值，例如- 0.01。

改变阴影偏差会导致“peter-panning”和自阴影伪影之间的权衡。

three.js r.90