How to setup lights and shadows like this

Questions
1

Hello,

im sory for stupid question, but i would like to setup whole light system like in this case:

https://vanruesc.github.io/postprocessing/public/demo/#antialiasing

i have copied light, but my project looks strange:

screen1
screen1964×629 225 KB
screen2
screen2974×636 880 KB

the objects have enable receiveShadow, and castShadow, and the light has enabled castShadow - so why i don’t see the shadows on map?

this is my code (i have changed the API, so don’t worry about names):

export default class MainScene extends Scene3D {
constructor() {
    super('SpaceScene');

}

create() {


    this.third.warpSpeed('sky', '-ground')
    this.cameras.main.setViewport(0, 0, GAME_CONFIG.scale.width, GAME_CONFIG.scale.height);
    this.third.renderer.setSize(GAME_CONFIG.scale.width, GAME_CONFIG.scale.height)
    this.third.renderer.shadowMap.enabled= true;
	
    this.third.camera.aspect = GAME_CONFIG.scale.width / GAME_CONFIG.scale.height 
    this.third.camera.updateProjectionMatrix()
    this.third.camera.position.set(...this.SCENE_CONFIG.CAMERA_POSITION)
    this.third.camera.lookAt(...this.SCENE_CONFIG.CAMERA_LOOK_AT)

    this.createLight();

           let loader = new THREE.GLTFLoader();
           loader.load("/assets/sponza/Sponza.gltf", (model)=> {
                let mesh = model.scene.children[0]
                mesh.scale.set(1, 1, 1)
                mesh.traverse(child => {
                    if (child.isMesh) 
                        child.castShadow = child.receiveShadow = true
                  })

                this.third.add.existing(mesh)
           })
}

createLight(){

    var ambientLight = new THREE.AmbientLight(0x111111);
    ambientLight.castShadow = true;
    this.third.add.existing(ambientLight) 
    var directionalLight = new THREE.DirectionalLight(0xffffff, 3);
    
    directionalLight.position.set(4, 18, 3);
    directionalLight.target.position.set(0, 7, 0);
    directionalLight.castShadow = true;
    directionalLight.shadow.mapSize.width = 2048;
    directionalLight.shadow.mapSize.height = 2048;
    directionalLight.shadow.camera.top = 20;
    directionalLight.shadow.camera.right = 20;
    directionalLight.shadow.camera.bottom = -20;
    directionalLight.shadow.camera.left = -20;
    directionalLight.shadow.camera.far = 32;
    this.third.add.existing(directionalLight) 
   
}

}

2

Ambient light doesn’t cast shadows, you need to set castShadow on the directional light. You also need to enable shadows on the renderer first.

renderer.shadowMap.enabled = true;

In case you still don’t see shadows or it appears cropped, you need to adjust the shadow camera frustum to fully cover your scene. You can use a DirectionalLightHelper to see what’s going on.

The following lines define the frustum (like a box basically), i’m not sure what scale the scene has, if it’s very small you might also have to shrink the frustum.

directionalLight.shadow.camera.top = 20;
directionalLight.shadow.camera.right = 20;
directionalLight.shadow.camera.bottom = -20;
directionalLight.shadow.camera.left = -20;
directionalLight.shadow.camera.far = 32;
3

It seems the OP already does this.

Instead of using DirectionalLightHelper, CameraHelper is the better helper for debugging the shadow frustum. Use this code:

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

i did what you want, and it shows me little square:

2w
2w905×638 667 KB

btw. why foliage looks that strange? (i marked it by red arrow)

5

That’s a cube :smile_cat:

Yes it shows the frustum, being way too small, try something like 1000 and make sure either the camera position is far enough away or set near to -1000.

I can barely see the foliage on the screenshot but it seems like the material of it needs alphaTest: 0.5, alpha transparency wouldn’t work well in such a case.

1 Like
6

Oh, im sory - agree with you, that’s cube. :sweat_smile:
so, i changed values into:

        directionalLight.shadow.camera.top = 1000;
    directionalLight.shadow.camera.right = 1000;
    directionalLight.shadow.camera.bottom = -1000;
    directionalLight.shadow.camera.left = -1000;
    directionalLight.shadow.camera.near = -1000;
    directionalLight.shadow.camera.far = 20;

and this is how it works now - shadow still wont appear :frowning_face:

ss3
ss3967×606 253 KB

7

Okay, i have the solution:

Im using enable3d API, because my project is using phaser.js and three.js
The problem was in library enable3d - i had to create new empty “ground”.

1 Like