Three.js · 2 / 6

Dashboard
Module 2 · Lights & materials

Light the scene, feel the surface

Meshes stay dark until lights hit them. Combine ambient + directional lights for readability. For realistic-ish shading use MeshStandardMaterial: tune roughness (matte vs glossy) and metalness — still real-time friendly on phones when you keep geometry modest. 

// Lights + standard material
scene.add(new THREE.AmbientLight(0xffffff, 0.35));
const dir = new THREE.DirectionalLight(0xffeedd, 1.2);
dir.position.set(3, 5, 4);
scene.add(dir);

const mat = new THREE.MeshStandardMaterial({
  color: 0x6f4e37,
  roughness: 0.45,
  metalness: 0.35
});
Pro tip

Move directional lights like the sun — angle matters more than intensity alone.

Next

Module 3 groups objects so transforms cascade.