Shadows are cut off

Hi,

I am experiencing weird behaviour of casted shadow on the plane. The result I am getting is like this:

As you can see, the shadow of the model (dog) is being cut off in front and at the back. Also there is no shadow being cast from the back left foot.
The object has only one mesh, which is in one group and all of them are set to cast shadow.

I am adding the lights to the scene like so:

const directional = new THREE.DirectionalLight(0xFFFFFF, 0.4, 100);
const light = new THREE.HemisphereLight(0xffffff, 0xb3858c, 0.9);
directional.position.set( 8, 8, 2 );
directional.castShadow = true;

this.scene.add(directional);
this.scene.add(light);

And then I am adding the object and the plane to the scene like so:

scene.loadModel('model/untitled.gltf', (model) => {
    // Iterator through the model's children
    model.traverse((child) => {
        if (child instanceof THREE.Mesh) {
            // reset original material
            child.material.map = null;
            // cast shadow
            child.castShadow = true;
            child.receiveShadow = true;
        }
    });

    model.castShadow = true;
    model.receiveShadow = true;

    scene.add(model);

    const modelBox = new THREE.Box3().setFromObject(model);
    const modelSize = modelBox.getSize(new THREE.Vector3());
    const modelcenter = modelBox.getCenter(new THREE.Vector3());
    const planeMaterial = new THREE.MeshStandardMaterial({ color: 0xc0c0c0 });
    const planeGeo = new THREE.PlaneBufferGeometry(40, 40, 32, 32);
    const plane = new THREE.Mesh(planeGeo, planeMaterial);
    plane.receiveShadow = true;
    plane.rotation.x = -Math.PI / 2;
    plane.position.set(0, -((modelSize.y / 2) - modelcenter.y), 0);

    scene.add(plane)
});

Why is the shadow being cut off like that? Thanks for any help.

shadow property of directional light not set ?

three.js docs
directional.shadow.camera.top = ;
directional.shadow.camera.bottom = ;

directional.shadow.camera.left = ;
directional.shadow.camera.right = ;
directional.shadow.camera.near = ;

directional.shadow.camera.far =;

2 Likes

As mentioned by @elysium11, it’s most likely that the shadow camera’s frustum is not properly configured. Try to use increase the default values until the entire shadow is visible. You can visually debug the frustum with CameraHelper:

scene.add( new THREE.CameraHelper( directional.shadow.camera ) );
2 Likes

That seems to do the trick:

Thanks for the help!

These helpers are really a neat feature and really do help.
As a beginner I still don’t know all the tools that Three.js offers.

Thanks!