Adding Lights to a Three.js Scene

Demonstrate the process of adding different types of lights to a Three.js scene, such as ambient light, point light, and directional light, to illuminate the objects.

// Create a scene
const scene = new THREE.Scene();

An instance of the Three.js Scene where all the objects, cameras, and lights will be added.

// Create an ambient light
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

Add an AmbientLight to the scene, which illuminates all objects equally. The color is set to white and intensity to 0.5.

// Create a point light
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

Add a PointLight to the scene to give the impression of a light bulb. Set its color to white, intensity to 1, and the distance at which the light fades to 100. The position is set to 10 units along XYZ axes.

// Create a directional light
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(0, 1, 0);
scene.add(directionalLight);

Add a DirectionalLight representing sunlight. Set its color to white and intensity to 1. The position is such that the light is shining from the top of the scene.