Three.js Lights

Lighting in Three.js and React-Three-Fiber is essential for creating realistic and visually appealing 3D scenes. Various types of lights provide different effects and interactions with materials.

1. Light (Base Class)

The Light class is the base for all lights in Three.js. It is not used directly.

const light = new THREE.Light(0xffffff, 1)

2. AmbientLight

This light globally illuminates all objects in the scene equally.

This light cannot be used to cast shadows as it does not have a direction.

AmbientLight(Color?: 0xffffff, intensity?: 1)

Three.js Example

const light = new THREE.AmbientLight("red", 0.5)
scene.add(light)

React-Three-Fiber Example

<ambientLight args={["red", 0.5]} />

3. DirectionalLight

A light that gets emitted in a specific direction. This light will behave as though it is infinitely far away and the rays produced from it are all parallel. The common use case for this is to simulate daylight the sun is far enough away that its position can be considered to be infinite, and all light rays coming from it are parallel.

Can cast shadows and rotation has no effect.

DirectionalLight(color?: 0xffffff, intensity?: 1)

Three.js Example

const light = new THREE.DirectionalLight(0xff0000, 0.8)
light.position.set(5, 10, 5)
scene.add(light)

React-Three-Fiber Example

<directionalLight args={[0xff0000, 0.8]} position={[5, 10, 5]} />

4. HemisphereLight

A light source positioned directly above the scene, with color fading from the sky color to the ground color.

This light cannot be used to cast shadows.

HemisphereLight(skyColor?: 0xffffff, groundColor?: 0xffffff, intensity?: 1)

Three.js Example

const light = new THREE.HemisphereLight(0x4040ff, 0x80ff80, 0.6)
scene.add(light)

React-Three-Fiber Example

<hemisphereLight args={[0x4040ff, 0x80ff80, 0.6]} />

5. LightProbe

Light probes are an alternative way of adding light to a 3D scene. Unlike classical light sources (e.g. directional, point or spot lights), light probes do not emit light. Instead they store information about light passing through 3D space. During rendering, the light that hits a 3D object is approximated by using the data from the light probe. Light probes are usually created from (radiance) environment maps.

LightProbe(sh?: SphericalHarmonics3, intensity?: 1)

SphericalHarmonics3: Represents a third-order spherical harmonics (SH).

Three.js Example

import { LightProbeGenerator } from 'three/addons/lights/LightProbeGenerator.js'

const lightProbe = new THREE.LightProbe()
scene.add(lightProbe)

new THREE.CubeTextureLoader().load(urls, function (cubeTexture) {
  scene.background = cubeTexture
  lightProbe.copy(LightProbeGenerator.fromCubeTexture(cubeTexture))
  lightProbe.intensity = 0.6

  const geometry = new THREE.BoxGeometry()
  
  const material = new THREE.MeshStandardMaterial({
    color: 0xffffff,
    metalness: 0,
    roughness: 0,
    envMap: cubeTexture,
  })

  mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)
})

React-Three-Fiber Example

import { LightProbeGenerator } from "three/addons/lights/LightProbeGenerator.js"
import { useCubeTexture } from "@react-three/drei"

const cubeTexture = useCubeTexture([
  "px.png",
  "nx.png",
  "py.png",
  "ny.png",
  "pz.png",
  "nz.png"
], { path: "/images/textures/pisa/" })

useEffect(() => {
  if (probeRef.current) {
    const generated = LightProbeGenerator.fromCubeTexture(cubeTexture)
    probeRef.current.copy(generated)
  }
}, [cubeTexture])

<mesh>
  <boxGeometry />
  <meshStandardMaterial
    metalness={0}
    roughness={0}
    envMap={cubeTexture}
  />
</mesh>

<lightProbe intensity={0.6} />

6. PointLight

A light that gets emitted from a single point in all directions. A common use case for this is to replicate the light emitted from a bare lightbulb.

Can cast shadows.

PointLight(color?: 0xffffff, intensity?: 1, distance?: 0, decay?: 2)

distance - Maximum range of the light. decay - The amount the light dims along the distance of the light.

Three.js Example

const light = new THREE.PointLight(0xff0000, 1, 10)
light.position.set(2, 3, 2)
scene.add(light)

React-Three-Fiber Example

<pointLight args={[0xff0000, 1, 10]} position={[2, 3, 2]} />

7. RectAreaLight

RectAreaLight emits light uniformly across the face a rectangular plane. This light type can be used to simulate light sources such as bright windows or strip lighting.

This light cannot be used to cast shadows.

Only MeshStandardMaterial and MeshPhysicalMaterial are supported

RectAreaLight(color?: 0xffffff, intensity?: 1, width?: 10, height?: 10)

Three.js Example

const rectLight = new THREE.RectAreaLight(0xffffff, 2, 4, 2)
scene.add(rectLight)

React-Three-Fiber Example

<rectAreaLight args={[0xffffff, 2, 4, 2]} />

8. SpotLight

This light gets emitted from a single point in one direction, along a cone that increases in size the further from the light it gets.

Can cast shadows.

SpotLight(color?: 0xffffff, intensity?: 1, distance?: 0, angle?: Math.PI/3, penumbra?: 1, decay?: 2)

Three.js Example

const light = new THREE.SpotLight(0xff0000, 0.6)
light.position.set(5, 10, 5)
scene.add(light)

React-Three-Fiber Example

<spotLight args={[0xff0000, 0.6]} position={[5, 10, 5]} />

Summary

• Light: Base class, not used directly.
• AmbientLight: Provides uniform lighting across the scene.
• DirectionalLight: Mimics sunlight with parallel rays.
• HemisphereLight: Simulates sky dome lighting.
• LightProbe: Used for global illumination.
• PointLight: Emits light in all directions from a single point.
• RectAreaLight: Emits light from a rectangular area.
• SpotLight: Emits a focused beam in one direction.