Three.js - Lights

ThreeJS - Snippets

Fehler beim Erstellen des Vorschaubildes: Datei fehlt

AmbientLight

The AmbientLight applies omnidirectional lighting on all geometries of the scene. Therefore no shadows thrown.

// AmbientLight - color, intensity
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
scene.add(ambientLight)
gui.add(ambientLight,'intensity',0,1).name('AmbientLight')

DirectionalLight

The DirectionalLight will have a sun-like effect as if the sun rays were traveling in parallel.

// DirectionalLight - color, intensity
const directionalLight = new THREE.DirectionalLight(0x00fffc, 0.3)
directionalLight.position.set(1, 0.25, 0)
scene.add(directionalLight)
gui.add(directionalLight,'intensity',0,1).name('DirectionalLight')

HemisphereLight

The HemisphereLight is similar to the AmbientLight but with a different color from the sky than the color coming from the ground. Faces facing the sky will be lit by one color while another color will lit faces facing the ground.

// HemisphereLight - color top, color bottom, intensity
const hemisphereLight = new THREE.HemisphereLight(0xff0000, 0x0000ff, 0.3)
scene.add(hemisphereLight)
gui.add(hemisphereLight,'intensity',0,1).name('HemisphereLight')

PointLight

The PointLight is almost like a lighter. The light source is infinitely small, and the light spreads uniformly in every direction. You can control that fade distance and how fast it is fading using the distance and decay properties.

// PointLight - color, intensity, distance, decay
const pointLight = new THREE.PointLight(0xff9000, 0.5, 10, 2)
pointLight.position.set(1, - 0.5, 1)
scene.add(pointLight)
gui.add(pointLight,'intensity',0,1).name('PointLight')

RectAreaLight

The RectAreaLight works like the big rectangle lights you can see on the photoshoot set. It's a mix between a directional light and a diffuse light. You can then move the light and rotate it. To ease the rotation, you can use the lookAt(...) method

// RectAreaLight - color, intensity, width, height
const rectAreaLight = new THREE.RectAreaLight(0x4e00ff, 2, 1, 1)
rectAreaLight.position.set(- 1.5, 0, 1.5)
rectAreaLight.lookAt(new THREE.Vector3())
scene.add(rectAreaLight)
gui.add(rectAreaLight,'intensity',0,5).name('RectAreaLight')

SpotLight

The SpotLight works like a flashlight. It's a cone of light starting at a point and oriented in a direction.

Rotating our SpotLight is a little harder. The instance has a property named target, which is an Object3D. The SpotLight is always looking at that target object. Simply create the target and do not forget to add it to the scene, and it should work:

// SpotLight - color, intensity, distance, angle (of beam), penumbra (contour diffusion),decay
const spotLight = new THREE.SpotLight(0x78ff00, 0.5, 10, Math.PI * 0.1, 0.25, 1)
spotLight.position.set(0, 2, 3)
spotLight.target.position.x = - 0.75 
scene.add(spotLight.target)
scene.add(spotLight)
gui.add(spotLight,'intensity',0,1).name('SpotLight')

Light Helpers

Positioning and orienting the lights is hard. To assist us, we can use helpers. Only the following helpers are supported:

• HemisphereLightHelper
• DirectionalLightHelper
• PointLightHelper
• RectAreaLightHelper
• SpotLightHelper

To use them, simply instantiate those classes. Use the corresponding light as a parameter, and add them to the scene. The second parameter enables you to change the helper's size:

const hemisphereLightHelper = new THREE.HemisphereLightHelper(hemisphereLight, 0.2)
scene.add(hemisphereLightHelper)

const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 0.2)
scene.add(directionalLightHelper)

const pointLightHelper = new THREE.PointLightHelper(pointLight, 0.2)
scene.add(pointLightHelper)

For the SpotLightHelper, there is no size parameter. Also, after moving the target, you need to call the update(...) method but on the next frame:

For the SpotLightHelper, there is no size parameter. Also, after moving the target, you need to call the update(...) method but on the next frame:

const spotLightHelper = new THREE.SpotLightHelper(spotLight)
scene.add(spotLightHelper)
window.requestAnimationFrame(() =>
{
    spotLightHelper.update()
})

The RectAreaLightHelper is even harder to use. Right now, the class isn't part of the THREE variable. You must import it from the examples dependencies as we did with OrbitControls:

import { RectAreaLightHelper } from 'three/examples/jsm/helpers/RectAreaLightHelper.js'
//...
const rectAreaLightHelper = new RectAreaLightHelper(rectAreaLight)
scene.add(rectAreaLightHelper)

Performance

Lights can cost a lot when it comes to performance.

Try to add as few lights as possible and try to use the lights that cost less.

Minimal cost:

• AmbientLight
• HemisphereLight

Moderate cost:

• DirectionalLight
• PointLight

High cost:

• SpotLight
• RectAreaLight

Baking Light

A good technique for lighting is called baking. The idea is that you bake the light into the texture. This can be done in a 3D software. Unfortunately, you won't be able to move the lights, because there are none and you'll probably need a lot of textures.