Introduction

This beginner-friendly course teaches you how to create realistic lighting and shadows in your Three.js projects. Learn the differences between unlit and lit materials, master the four main light types (ambient, directional, point, and spotlight), and understand their performance implications. Through practical demonstrations, you'll discover how to implement and debug shadows, resolve common shadow artifacts, and optimize shadow quality for different devices. By the end of the course, you'll be able to create professional lighting setups that ground your 3D objects in the scene and enhance the visual appeal of your web applications.

Unlit vs. Lit Materials

Before diving into lighting, it is important you are using the right materials on your objects. Certain materials are "unlit" materials, meaning the object appearance and color is independent of any lighting in the scene.

A common beginner mistake is assigning an unlit material to an object and wondering why nothing is changing when you add lights!

Unlit Materials

• MeshBasicMaterial - Always appears uniformly lit regardless of scene lighting

Lit Materials

• MeshLambertMaterial - Diffuse lighting (no specular highlights)
• MeshPhongMaterial - Diffuse and specular lighting
• MeshStandardMaterial - PBR material with realistic lighting behavior

// Switching from unlit to lit material
const basicMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });  // Unlit
const lambertMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 });  // Lit