Three.js 奇数条纹阴影 [英] Three.js odd striped shadows

问题描述

问题表现在以下方面:

这些是我的灯光设置:

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;

知道为什么阴影会以这种方式显现吗?

Any ideas why would the shadows manifest this way?

推荐答案

您所看到的是由于 mesh.castShadow 和 mesh.receiveShadow设置为 true.

What you are seeing are self-shadowing artifacts due to mesh.castShadow and mesh.receiveShadow being set to true.

需要调整light.shadow.bias参数——接近零的正负值，比如- 0.01.

You need to adjust light.shadow.bias parameter -- a positive or negative value near zero, such as - 0.01.

改变阴影偏差会导致彼得平移"和自阴影伪像之间的权衡.

Varying the shadow bias results in a trade-off between "peter-panning" and self-shadowing artifacts.

three.js r.90

three.js r.90

这篇关于Three.js 奇数条纹阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！