Lighting

Sometimes you'll have you scene and objects loaded, but you will see nothing. It's because there's no lighting in your scene. Without lights any MeshStandardMaterial and MeshPhysicalMaterial will appear completely black.

The different light types are as follows:

• AmbientLight - Uniform light from all directions. No shadows. Used to fill dark areas.
• DirectionalLight - Parallel rays (like the sun). Produces sharp shadows.
• PointLight: Emits from a single point in all directions (like a bulb). Fades with distance.
• SpotLight: Cone-shaped light (like a flashlight). Supports shadows.
• HemisphereLight: Gradient from sky to ground color – great for outdoor environments.

Here's the basic setup for each kind of light:

// ambient light
const ambient = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambient);

// directional
const sun = new THREE.DirectionalLight(0xffaa44, 1);
sun.position.set(5, 10, 7);
scene.add(sun);

// point light
const point = new THREE.PointLight(0xffffff, 1.5, 20);
point.position.set(2, 5, 3);
point.castShadow = true;
scene.add(point);

// spot light
const spot = new THREE.SpotLight(0xffffff, 2);
spot.position.set(3, 6, 4);
spot.angle = 0.3;
spot.penumbra = 0.2;
spot.decay = 1;
spot.distance = 20;
spot.castShadow = true;
spot.target.position.set(0, 0, 0);
scene.add(spot);
scene.add(spot.target);

// hemisphere light
const hemi = new THREE.HemisphereLight(0x87ceeb, 0x3a3a3a, 1);
scene.add(hemi);