Shadows: incorrect shape and transparency ignored

Your shadows is clipped since the default frustum of the directional shadow camera is too small. Try it like so:

const d = 10;

directionalLight.shadow.camera.left = - d;
directionalLight.shadow.camera.right = d;
directionalLight.shadow.camera.top = d;
directionalLight.shadow.camera.bottom = - d;

You can also use THREE.CameraHelper in order to debug the shadow camera. Very helpful to adjust the frustum. Keep in mind that the shadow quality highly depends on this feature. Tighter frustums produce sharper shadows.

scene.add( new THREE.CameraHelper( directionalLight.shadow.camera ) );
4 Likes