(click anywhere to close)

# [Three.js] Lighting

category: Games | course: Threejs | difficulty:

Just like in the real world, there are multiple types of lighting in Three.js. If you don't create one, everything in the scene renders 'flat/unlit' (that's Three.js's standard lightning). If you create one or more, those lights take over everything. The following are available: PointLight, SpotLight, DirectionalLight, HemisphereLight, AmbientLight. I've ordered these types in terms of how much of an impact they have. I'll also explain each of them with a bit of code.

## PointLight

A light source that emits light in all directions, like a light bulb.

```//PointLight(color of the light, intensity, max distance)
var light = new THREE.PointLight( 0xff0000, 1, 100 );

//Give it a better x,y,z position
light.position.set( 50, 50, 50 );

## SpotLight

A SpotLight makes its light originate from a certain specified point, and move outward in a coned direction (using the angle you specified). It is almost identical to a spotlight you see in the real world.

```//SpotLight(color, intensity, distance, angle (radians), rapidity of falloff of light)
var light = new THREE.SpotLight( 0xff0000, 1, 100,Math.PI/5,10);
```

## Directional Light

A directional light is the opposite of a spotlight: it's a light which produces parallel rays (as if the light is infinitely far away, like the sun) that shine in a certain, single direction.

```//DirectionalLight(color, intensity);
var light = new THREE.DirectionalLight(0xff0000, 1);

```

'We don't need to set a direction?' you might wonder. No, the light always points towards the absolute center (origin) of the scene, so setting it to for example x = -100 makes it shine towards the right, and setting y = 100 makes it shine from the top to the bottom.

## HemisphereLight

This light is positioned directly above the screen, and behaves like a sun at noon. Its shape is that of sphere, which means that this light emits downwards from every possible direction.

```//HemisphereLight(skyColor, groundColor, intensity);
var light = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 1);```

## AmbientLight

And last, but not least, the ambient light, which of course creates some ambience! It doesn't originate from a certain position, or move in a certain direction: it just lights the complete scene with the specified color - like a subtle color overlay for the scene.

`var light = new THREE.AmbientLight( 0x404040 ); // soft white light`

## Keep in mind the Shadows!

If you now were to create a nice light, and a cube, you would be surprised to see that no shadows appear! That's normal. Again, to save resources, we need to enable a few things that are turned off by default by Three.js. First of all, every light doesn't cast shadows automatically, we need to set that boolean to true:

```someLight.castShadow = true;
//NOTE: Ambience lights can't cast shadows```

Second of all, for every object, you can set whether it casts shadows or not, and also if it receives shadows from other objects or not.

```//Casting and receiving

//Optionally, you can set the darkness of an objects' shadows

And last of all, the renderer needs to know if we're using shadows at all in our game:

```renderer.shadowMapEnabled = true;
//If you want soft shadow maps (which is almost always the preferred type)