In 3D graphics, lights are used to illuminate objects in the scene. They can be used to simulate the light coming from the sun, a lamp, or any other light source.

Run the starter code:

As you can see, the scene is completely dark.

This is because we haven't added any light to it yet and the materials used are <meshStandardMaterial />.

Let's discover the different types of lights available in Three.js.

Ambient light

The simplest type of light is the ambient light. It illuminates all objects in the scene equally, regardless of their position or orientation.

The intensity prop defines the brightness of the light. The default value is 1:

Copy
<ambientLight intensity={0.5} />

The color prop defines the color of the light. The default value is #ffffff (white):

Copy
<ambientLight intensity={0.5} color={"royalblue"} />

Directional light

A directional light is a light that is infinitely far away.

It illuminates all objects in the scene from a specific direction.

The direction of the light is defined by its position and target props.

As the target default value is (0, 0, 0) we can just use the position prop to define the direction of the light.

Copy
<directionalLight position={[3, 3, 3]} intensity={0.5} />

Like the ambient light, it has a color and an intensity props.

Try to switch the cube to white and add multiple directional lights with different colors to see how they interact with it: