Directional Light Shadow not as expected(VSMShadowMap)

Hello, I’m working onadding directional light and its shadows after loading gltf model. Here’s my demo link: In the scene, there’s always a unexpected shadow mask. Below are some code snippets I used:

this.renderer.outputEncoding = THREE.sRGBEncoding;
this.renderer.shadowMap.enabled = true;
this.renderer.shadowMap.autoUpdate = true;
this.renderer.gammaFactor = 2.2;

const directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1000, 1000, 1000);
directionalLight.castShadow = true; = new THREE.OrthographicCamera(

this.loader = new GLTFLoader();
this.loader.load("../models/office/scene.gltf", gltf => {
      gltf.scene.traverse((o: any) => {
        if (o.isMesh) {
          o.castShadow = true;
          o.receiveShadow = true;

Maybe I missed some key points when setting up directional light?

Did you check your model?

1 Like

yes, checked. It looks fine when no shadow enabled.

Shadow has a frustum, what you’re seeing is that frustum being too small to cover your entire scene. I suggest reading documentation on directional light.


@Usnul Thanks for your suggestion! I actually make the frustum small intentionally, which let the issue to look more clearly. I have played around the example, and try to change the shadow frustum small in the example but not see a similar issue. Pls correct me if some of my understanding is wrong.

A CameraHelper for might be useful here.

One issue is - your near and far planes are quite far apart, this reduces your depth resolution, and results in inaccurate shading. I suggest you get them closer together.

Another thing is to try VSM shadows.

Lastly, it’s possible you have some weird double-layered geometry and that results in shadow artifacts on the surface.


Another thing is to try VSM shadows.

I tried this one and it solves the problem!

this.renderer.shadowMap.type = THREE.VSMShadowMap;

Thanks so much! Now I’m trying to figure out why…