Setting up the lights

Questions
1

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: https://threejs.org/examples/#webgl_lights_spotlight and its source code: https://github.com/mrdoob/three.js/blob/e0a31ea77c0242ae29ef6e951fa588216e1d247f/examples/webgl_lights_spotlight.html

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

My exercise code: https://jsfiddle.net/cqj3hzao/

Thank You for your help.

2

Looks like you are off to a good start!

There were just a few minor changes to get shadows working: Three.JS gyakorlás 001 - JSFiddle - Code Playground

// 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.

Next:

// 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.

//spotLight.shadow.camera.far = 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:

https://threejs.org/examples/#webgl_shadowmap_viewer

6 Likes
3

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