[Three] 05. Light

Three.js에서 제공하는 광원의 종류에 대해 정리했습니다.

Light

아래 객체들은 공통적으로 Light 객체를 상속 받으며, Light 객체는 아래 속성값들을 가집니다.

속성값	기능	입력값	기본값
color	빛의 색상	string	'0xffffff'
intensity	빛의 세기	number	1

AmbientLight

모든 방향에서 반사되어 발생하는 기본광입니다.

const ambientLight = new THREE.AmbientLight(color, intensity);

// const ambientLight = new THREE.AmbientLight('white', 1);

DirectionalLight

모든 위치에서 같은 방향으로 들어오는 빛입니다. 태양광 등이 포함됩니다.

directionalLight의 경우 rotation이 적용되지 않는데, 이는 광원 위치에서 target 위치까지 자동으로 방향을 계산하여 적용되기 때문입니다.

const directionalLight = new THREE.DirectionalLight(color, intensity);

// const directionalLight = new THREE.DirectionalLight('white', 10);

속성값	기능	입력값	기본값
castShadow	빛이 그림자를 만드는지 여부	boolean	false
position	광원 위치	Vector3	(0, 1, 0)
target	광원이 position에서 바라볼 위치	Object3D	object.position = (0, 0, 0)

HemisphereLight

위 방향에서 내려오는 빛으로, 하늘색(sky color)에서 대지색(ground color)으로 색상이 변합니다.

const hemisphereLight = new THREE.HemisphereLight(skyColor, groundColor, intensity);

// const hemisphereLight = new THREE.HemisphereLight(0xff0000, 0x0000ff, 1);

속성값	기능	입력값	기본값
color	하늘색	float	0xffffff
groundColor	대지색	float	0xffffff
position	광원 위치	Vector3	(0, 1, 0)

PointLight

어느 한 지점에서 사방으로 퍼져 나가는 빛입니다. 빛이 도달하는 최대 거리(distance)와 거리에 따라 감소하는 정도(decay)를 설정할 수 있습니다.

const pointLight = new THREE.PointLight(color, intensity, distance=0, decay=2);

// const spotLight = new THREE.SpotLight('white', 1, 10, Math.PI/4, 0.1);
// spotLight.position.set(1, 3, 0);

RectAreaLight

사각형 평면 형태의 광원에서 나오는 빛입니다. 창문에서 들어오는 빛 등이 포함됩니다.

RectAreaLight 같은 경우 비추려고 하는 물체의 Material이 MeshStandardMaterial 또는 MeshPhysicalMaterial일 때만 제대로 동작합니다.

const rectLight = new THREE.RectAreaLight(color, intensity,  width=10, height=10);

// const rectLight = new THREE.RectAreaLight('white', 1, 2, 2);
// rectLight.castShadow = true;
// rectLight.position.set(1, 2, 0);
// rectLight.lookAt(0, 0, 0);

const rectLightHelper = new RectAreaLightHelper(rectLight);
rectLight.add(rectLightHelper);

SpotLight

원뿔 형태로 내려오는 빛입니다. PointLight와 마찬가지로 빛이 도달하는 최대 거리(distance)와 거리에 따라 감소하는 정도(decay)를 설정할 수 있으며, 추가로 원뿔이 퍼지는 각도(angle, 최대 PI/2)와 가장자리의 번짐 정도(penumbra, 0~1)도 설정할 수 있습니다.

const spotLight = new THREE.SpotLight(color, intensity, distance=0, angle, penumbra=0, decay);

// const spotLight = new THREE.SpotLight('white', 1, 10, Math.PI/4, 0.1);
// spotLight.position.set(1, 3, 0);