Lights and lit materials in Three.js

Lights and lit materials give a 3D scene shading; this example pairs MeshStandardMaterial with an ambient and a directional light.

All Three.js examples Three.js: usage and stats

Lights and lit materials in Three.js: screenshot of the example below running — The code below, running in Chromium on our server (Oct 12, 2026). Press Run to see it live and change it.

How it works

Use a lit material. The meshes use MeshStandardMaterial with a color, roughness and metalness. This material is one of the classes listed under Materials in the docs. [1]
Add lights to the scene. The code creates an AmbientLight at low intensity and a DirectionalLight placed up and to the side. Both are added with scene.add, like any mesh. [1]
Move the light. In the animate callback the code turns the meshes and swings the directional light around them, so you can watch the shading change. [2]

Run and edit it

It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.

import * as THREE from 'three';

const root = document.getElementById('root');
const width = root.clientWidth || 600, height = root.clientHeight || 380;

const camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 100);
camera.position.z = 5;

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x111111);

const blue = new THREE.MeshStandardMaterial({ color: 0x4f8cff, roughness: 0.35, metalness: 0.2 });
const gold = new THREE.MeshStandardMaterial({ color: 0xf2b134, roughness: 0.6, metalness: 0.5 });

const sphere = new THREE.Mesh(new THREE.SphereGeometry(0.9, 48, 24), blue);
sphere.position.x = -1.3;
const knot = new THREE.Mesh(new THREE.TorusKnotGeometry(0.6, 0.2, 128, 16), gold);
knot.position.x = 1.3;
scene.add(sphere, knot);

// lights
const ambient = new THREE.AmbientLight(0xffffff, 0.3);
const sun = new THREE.DirectionalLight(0xffffff, 2.5);
sun.position.set(3, 3, 4);
scene.add(ambient, sun);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
renderer.setAnimationLoop(animate);
root.appendChild(renderer.domElement);

function animate(time) {
  knot.rotation.x = time / 2000;
  knot.rotation.y = time / 1000;
  const a = time / 1500;
  sun.position.set(Math.cos(a) * 4, 3, Math.sin(a) * 4 + 2);
  renderer.render(scene, camera);
}

Ctrl/⌘ + Enter runs

Change the light colour or the material roughness and metalness to see the surface change. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with three 0.186.1. Needs WebGL.

More Three.js examples

Rotating cube in Three.js Animation loop in Three.js Built-in geometries in Three.js Grouping objects in Three.js

Sources

Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.

Building something with Three.js? Ask AgentGid →