Setting up the lights

I started to learn the Three.JS a couple of days ago, and i have made a little stuff from many examples and tutorials. i made sliders to change camera positions and the cube. i even made a checkbox to set the lookAt points to the cube and a button to change color of the cube. i got stuck at the lights when i tried to add one to the scene and i setted it up by an example from this site: and its source code:

I prepared the meshes to recevice the shadows, but i can’t ses the shadows of objetcts and the circle of light. What is ‘’ exactly and what is it doing?

My exercise code:

Thank You for your help.

Looks like you are off to a good start!

There were just a few minor changes to get shadows working:

// the cube needs to cast a shadow
cube.castShadow = true;

MeshBasicMaterial doesn’t react to lights or shadows. It can cast shadows, but not receive them. Change to MeshStandardMaterial.


// this is set in radians
spotLight.angle = Math.PI / 4;

Finally, you need to increase the shadow far distance. You can see that the CameraHelper doesn’t stretch as far as the plane. Setting the shadow far distance with SpotLight is a bit tricky.

If you set this:

spotLight.distance = 10;

Then this is ignored.

// = 15;

Use one or the other, not both.

To create shadows, three.js places a camera at the position of the light and draws a second, black and white copy of the scene from that angle. This is saved to a texture and then overlayed on the scene to darken it and add shadows. This example show the shadow texture (AKA map) in the top left:


Dear looeee,

Thank you for your help and your excellent explanation, today i learnt a new think about this :slight_smile:
I’ll keep these in my mind :slight_smile:

Best Regards.

1 Like