[Three.js] Exploring Various Lights

Basic concepts of lighting in Three.js

lighting is a very important element in 3D that gives a sense of realism and dimensionality. In Three.js, lighting is implemented as a subclass of THREE.Light. Every light object has basic properties such as position, color, and intensity. Three.js provides a variety of different types of lighting, which we'll discuss below.

🫢 Not all Materials support lighting. for example, you can use lights on MeshPhongMaterial and MeshStandardMaterial.

• see: https://threejs.org/manual/#en/material-table

AmbientLight

The AmbientLight is a basic light that illuminates the entire scene uniformly with no specific direction. it does not cast shadows and is typically used in conjunction with other lights to light up areas that are too dark. it takes in the light color and intensity as arguments.

const ambientLight = new THREE.AmbientLight(ambientColor, ambientIntensity);
scene.add(ambientLight);

DirectionalLight

A DirectionalLight is a light where all of the light shines in parallel in the same direction, like sunlight. it is great for simulating a strong light source in the distance (usually the sun) and can create sharp shadows.

Setting the direction of a DirectionalLight is a little different than other lights. while a normal light source (such as a PointLight) can be directed by rotation, a DirectionalLight moves light from the light source's position toward the target.

• this means that changing the rotation value does not affect the direction of the light. think of the light as the sun.
• to change the direction of the light, you need to change the position of the target.

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 10, 5);
directionalLight.castShadow = true;

// 그림자 설정
directionalLight.shadow.mapSize.width = 1024;
directionalLight.shadow.mapSize.height = 1024;
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 50;
directionalLight.shadow.camera.left = -10;
directionalLight.shadow.camera.right = 10;
directionalLight.shadow.camera.top = 10;
directionalLight.shadow.camera.bottom = -10;

scene.add(directionalLight);

PointLight

A PointLight is a light that emits light from a single point in all directions, like a light bulb. the intensity of the light decreases with distance, and the decay rate can be adjusted to control the rate at which the light intensity decreases with distance. you can also place multiple PointLights to create complex lighting environments. this is useful for creating effects such as interior lighting.

const pointLight = new THREE.PointLight(0xff0000, 1, 100); // 색상, 강도, 최대 거리
pointLight.position.set(10, 5, 5);
pointLight.castShadow = true;
scene.add(pointLight);

SpotLight

a SpotLight is a light that spreads out in a cone from a single point. Like DirectionalLight, SpotLight allows you to set a target for the light to be directed at. you can create effects like stage lighting or flashlights.

const light = new THREE.SpotLight(0xffffff, 1);
light.position.set(5, 10, 5); // 광원의 위치 설정
light.target.position.set(0, 0, 0); // 타겟의 위치 설정
scene.add(light);
scene.add(light.target);

HemisphereLight

A HemisphereLight is a bi-directional lightthat illuminates a scene with a mixture of two colors: sky and ground. unlike other lights (DirectionalLight, SpotLight) where the light only comes from a specific direction, it provides soft illumination throughout the surroundings. it is useful for simulating natural light.

const light = new THREE.HemisphereLight(0x4488ff, 0x222222, 1);

RectAreaLight

A RectAreaLight is a light that emits light from a rectangular area, which can create the effect of light coming through a window or fluorescent lighting. It does not emit light from a single point like a PointLight or SpotLight, but rather from a large area. it does not support shadows.

it can only be used in conjunction with MeshStandardMaterialor MeshPhysicalMaterial.

const rectLight = new THREE.RectAreaLight(0xffffff, 5, 4, 10); // 색상, 강도, 너비, 높이
rectLight.position.set(5, 5, 0);
rectLight.lookAt(0, 0, 0);
scene.add(rectLight);

wrapping up

The lighting system in Three.js offers a wide range of options, from simple environmental lighting to complex light sources. when properly combined and optimized, these lights can be used to create realistic 3D web graphics.

in real-world projects, it's important to find a balance between performance and quality when setting up lighting, as lighting has a huge impact on the actual rendering performance. Also, different material properties will affect the effectiveness of lighting differently, so it's important to consider lighting and materials together.