In Three.js, objects don't just exist in space; they interact with light. This interaction is governed by materials. Materials define how a surface reflects, absorbs, and refracts light, ultimately determining the object's appearance. Without materials, objects would be invisible or appear as simple, undifferentiated shapes. Think of materials as the 'skin' of your 3D objects, dictating their texture, color, shininess, and how they react to the world around them.
The most fundamental aspect of a material concerning lighting is its ability to reflect light. Different materials reflect light differently. A polished metal surface, for instance, will have specular highlights – bright, sharp reflections of the light source. A rough, matte surface, like concrete, will scatter light diffusely, resulting in a more uniform appearance without sharp reflections. This behavior is crucial for creating realistic and visually appealing 3D scenes.
Three.js offers various material types, each designed to simulate different surface properties. The choice of material significantly impacts how lighting affects your scene. Some of the most common and important materials for lighting include:
MeshStandardMaterial: This is a physically-based rendering (PBR) material that simulates real-world materials more accurately. It's highly versatile and responds well to various light types, offering realistic reflections and diffuse lighting. It's generally the go-to material for modern, realistic 3D graphics.
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00, roughness: 0.5, metalness: 0.2 });MeshLambertMaterial: This material simulates diffuse reflection without specular highlights. It's simpler than MeshStandardMaterial and doesn't account for specular reflections. It's useful for creating matte surfaces where sharp highlights aren't desired.
const material = new THREE.MeshLambertMaterial({ color: 0xff0000 });MeshPhongMaterial: This material simulates diffuse reflection and specular highlights. It provides a good balance between realism and performance, offering more visual interest than Lambertian surfaces by including shininess and specular reflections.
const material = new THREE.MeshPhongMaterial({ color: 0x0000ff, specular: 0xffffff, shininess: 50 });MeshBasicMaterial: This material is not affected by lights. It renders the object with a solid color or texture, regardless of the lighting in the scene. It's useful for things like UI elements, debugging, or creating unlit objects.
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });When you apply a material to a mesh, you're telling Three.js how that mesh should react to light. For example, setting the roughness property on a MeshStandardMaterial to a low value will make the surface appear more polished and reflective, leading to sharper specular highlights. Conversely, a high roughness value will scatter light more, resulting in a matte finish.
Similarly, properties like metalness (on MeshStandardMaterial) control how metallic a surface appears. A high metalness value will make the surface reflect light like metal, often with less diffuse reflection. Understanding these material properties is key to achieving the desired look and feel for your 3D objects in response to lighting.
graph TD; A(Light Source) --> B{Material Properties}; B --> C(How Light Interacts); C --> D(Surface Appearance); A --> D;