# How to setup lights and shadows like this
**URL:** https://discourse.threejs.org/t/how-to-setup-lights-and-shadows-like-this/18162
**Category:** Questions
**Tags:** shadows
**Created:** [August 26, 2020, 10:23am UTC](https://discourse.threejs.org/t/how-to-setup-lights-and-shadows-like-this/18162 "2020-08-26T10:23:33Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@Trusiak](https://discourse.threejs.org/u/Trusiak)
#### Post date: [August 26, 2020, 10:23am UTC](https://discourse.threejs.org/t/how-to-setup-lights-and-shadows-like-this/18162/1 "2020-08-26T10:23:33Z")
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](https://vanruesc.github.io/postprocessing/public/demo/#antialiasing)
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() {
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)
}
```
}
---
### Author:  [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)
#### Post date: [August 26, 2020, 10:33am UTC](https://discourse.threejs.org/t/how-to-setup-lights-and-shadows-like-this/18162/2 "2020-08-26T10:33:02Z")
> [@Trusiak](#):
>
> `ambientLight.castShadow = true;`
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;
```
---
### Author:  [@Mugen87](https://discourse.threejs.org/u/Mugen87)
#### Post date: [August 26, 2020, 10:37am UTC](https://discourse.threejs.org/t/how-to-setup-lights-and-shadows-like-this/18162/3 "2020-08-26T10:37:00Z")
> [@Fyrestar](#):
>
> renderer.shadowMap.enabled = true;
It seems the OP already does this.
Instead of using `DirectionalLightHelper`, `CameraHelper` is the better helper for debugging the shadow frustum. Use this code:
```js
scene.add( new THREE.CameraHelper( directionalLight.shadow.camera ) );
```
---
### Author:  [@Trusiak](https://discourse.threejs.org/u/Trusiak)
#### Post date: [August 26, 2020, 11:04am UTC](https://discourse.threejs.org/t/how-to-setup-lights-and-shadows-like-this/18162/4 "2020-08-26T11:04:08Z")
i did what you want, and it shows me little square:
btw. why foliage looks that strange? (i marked it by red arrow)
---
### Author:  [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)
#### Post date: [August 26, 2020, 12:21pm UTC](https://discourse.threejs.org/t/how-to-setup-lights-and-shadows-like-this/18162/5 "2020-08-26T12:21:38Z")
That’s a cube 😸
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.
---
### Author:  [@Trusiak](https://discourse.threejs.org/u/Trusiak)
#### Post date: [August 26, 2020, 6:37pm UTC](https://discourse.threejs.org/t/how-to-setup-lights-and-shadows-like-this/18162/6 "2020-08-26T18:37:15Z")
Oh, im sory - agree with you, that’s cube. 😅
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 ☹
---
### Author:  [@Trusiak](https://discourse.threejs.org/u/Trusiak)
#### Post date: [August 27, 2020, 5:02pm UTC](https://discourse.threejs.org/t/how-to-setup-lights-and-shadows-like-this/18162/7 "2020-08-27T17:02:25Z")
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”.