When you create a 3D scene in Three.js within a React app, the way your objects appear depends heavily on both lighting and materials. Lighting determines how objects are illuminated, while materials define how surfaces interact with that light, affecting color, shininess, transparency, and other visual qualities.

Light Types in Three.js

Three.js offers several types of lights, each serving a specific purpose:

• Ambient light: provides a base level of light that uniformly illuminates all objects in the scene, regardless of their position or orientation;
• Directional light: mimics sunlight, casting parallel rays in a specific direction. Useful for creating shadows and highlighting details;
• Point light: emits light in all directions from a single point, similar to a bare lightbulb. The intensity decreases with distance;
• Spot light: projects a cone of light in a specific direction, like a flashlight. You can control the angle and range of the cone;
• Hemisphere light: simulates light from the sky and the ground, blending two different colors based on the direction of the surface.

To add a light to your scene in React, you typically create a light object and add it to your Three.js scene within your component. For example, to add an ambient light:

import * as THREE from 'three';

const scene = new THREE.Scene();
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // white light, half intensity
scene.add(ambientLight);

You can combine different light types to achieve more nuanced, realistic effects. For instance, pairing an ambient light with a directional light can create both overall illumination and defined shadows.

Material Types and Application

Materials in Three.js control how surfaces look by interacting with light. Some common material types include:

• MeshBasicMaterial: does not react to light; displays only the material's color or texture;
• MeshLambertMaterial: responds to light, producing a matte, non-shiny surface;
• MeshPhongMaterial: adds specular highlights for shiny surfaces, supporting smooth shading and reflections;
• MeshStandardMaterial: physically-based, offering realistic metal and roughness effects for more lifelike results.

To apply a material to a mesh, you create the material and pass it to the mesh constructor. For example, to give a cube a shiny red appearance:

import * as THREE from 'three';

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshPhongMaterial({ color: 0xff0000, shininess: 100 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

By choosing different materials and tweaking their properties, you can achieve a wide range of visual effects, from flat cartoon-like colors to realistic metallic surfaces. The choice of material also determines how your objects will look under different lighting conditions.