Skip to content

Lights

Video Lecture

Lights Lights

Description

There are various kinds of lights in Threejs.

They all extend from the THREE.Light base class, which in turn also extends from the Object3D base class.

The base class properties

  • color
  • intensity
  • isLight (Read Only)

Lighting gives you many more options to change the appearance of meshes within the scene. Meshes will need materials added to them in order for the lighting adjustments to take effect.

If a scene has no lighting, most materials won't be visible. The MeshBasicMaterial, MeshNormalMaterial and the MeshMatcapMaterial are self illuminating, so they don't need lighting to be visible within a scene, but most of the other materials do, such as the MeshLambertMaterial, MeshPhongMaterial, MeshStandardMaterial, MeshPhysicalMaterial and MeshToonMaterial.

In these next examples, I will demonstrate how the different lighting affects the different materials.

Note

Since Three r155, the default of WebGLRenderer.useLegacyLights was changed from true to false and will also be deprecated in r165. This means that intensity may need to be changed when using various types of lights if you want them to match your previous versions of Threejs. In simplest terms, the intensities for ambient, hemisphere, directional, spot lights and light maps can be restored by multiplying PI with the existing light intensity values.

E.g., if your intensity was 2, use

new THREE.DirectionalLight(0xffffff, Math.PI * 2)

Comments