How to setup lights and shadows like this


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

i have copied light, but my project looks strange:

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() {


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; = GAME_CONFIG.scale.width / GAME_CONFIG.scale.height


           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



    var ambientLight = new THREE.AmbientLight(0x111111);
    ambientLight.castShadow = true;
    var directionalLight = new THREE.DirectionalLight(0xffffff, 3);
    directionalLight.position.set(4, 18, 3);, 7, 0);
    directionalLight.castShadow = true;
    directionalLight.shadow.mapSize.width = 2048;
    directionalLight.shadow.mapSize.height = 2048; = 20; = 20; = -20; = -20; = 32;


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. = 20; = 20; = -20; = -20; = 32;

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( ) );

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

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

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

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

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

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