(click anywhere to close)
OPEN MENU

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

//Add it to the scene
scene.add( light );

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
someObject.castShadow = true;
someObject.receiveShadow = false;

//Optionally, you can set the darkness of an objects' shadows
someObject.shadowDarkness = 0.5;

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)
renderer.shadowMapType = THREE.PCFSoftShadowMap;
CONTINUE WITH THIS COURSE
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)