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

1 Answer 1

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