Fundamentals
Core
Master
Shaders
Lights
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
:
<ambientLight intensity={0.5} />
The color
prop defines the color of the light. The default value is #ffffff
(white):
<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.
<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:
End of lesson preview
To get access to the entire lesson, you need to purchase the course.