Learning about lighting in three.js

There’s a lot of different light sources available and positioning them will take experimentation. Make use of the THREE light helpers which visualise where the light source is coming from combined with dat.GUI to quickly move the light sources around.

Lights sources come at a computational cost and should be used sparingly

Minimal cost:

  AmbientLight
  HemisphereLight

Moderate cost:

  DirectionalLight
  PointLight

High cost:

  SpotLight
  RectAreaLight

Consider Baking

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.