javascript - Three.js odd striped shadows - Stack Overflow

admin管理员组

文章数量:1356056

Problem manifests in the following way:

These are my light settings:

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);

And my mesh settings:

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?

Problem manifests in the following way:

These are my light settings:

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);

And my mesh settings:

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?

• javascript
• three.js

Share Improve this question Follow edited Feb 23, 2018 at 0:13 WestLangley 105k1111 gold badges287287 silver badges283283 bronze badges asked Feb 22, 2018 at 22:21 EldarGranuloEldarGranulo 1,62511 gold badge1515 silver badges3939 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

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

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

本文标签： javascriptThreejs odd striped shadowsStack Overflow