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;

有什么想法，为什么阴影会以这种方式显现？

- EldarGranulo

Answer 1

您所看到的是自阴影伪像，由于设置了mesh.castShadow和 mesh.receiveShadow 为true。

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

改变阴影偏移会导致"彼得潘现象"和自阴影伪像之间的权衡。

three.js r.90

- WestLangley