Three.js에서 Light(조명)은 3D 씬(Scene) 내에서 객체의 조명과 그림자를 결정하는 중요한 요소입니다. 조명을 사용하면 입체감, 반사, 그림자, 분위기 효과를 조정할 수 있습니다.

AmbientLight (주변광)

씬 전체를 균일하게 밝히는 조명 (모든 방향에서 빛이 들어오는 효과)
그림자가 없음 (모든 객체가 동일한 밝기로 표시됨)
주로 다른 조명과 함께 사용하여 기본적인 밝기를 추가하는 용도로 활용

// uniform
const ambientLight = new THREE.AmbientLight(0xffffff, 1)
ambientLight.color = new THREE.Color(0xffffff)
scene.add(ambientLight)

DirectionalLight (태양광)

한 방향에서 오는 평행광 (햇빛과 비슷한 효과)
그림자 생성 가능 (매우 현실적인 조명 효과)
특정 위치에서 빛이 퍼지는 것이 아니라, 한 방향으로 균일하게 쏘여짐

// directional
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.9)
directionalLight.position.set(1, 0.25, 0)
scene.add(directionalLight)

HemisphereLight (반구 조명)

하늘과 땅에서 서로 다른 색의 빛을 제공 (예: 하늘은 파란색, 땅은 노란색)
자연스러운 실외 조명 효과를 줄 때 사용됨

const hemisphereLight = new THREE.HemisphereLight(0xff0000, 0x0000ff, 0.9)
scene.add(hemisphereLight)

PointLight (점광원)

한 점에서 사방으로 퍼지는 빛 (전구 같은 조명 효과)
거리(distance)에 따라 감쇠 (거리가 멀어질수록 어두워짐)
그림자 생성 가능

const pointLight = new THREE.PointLight(0xff9000, 1.5, 10, 2)
pointLight.position.set(1, -0.5, 1)
scene.add(pointLight)

🌟 거리 효과 추가 (decay)

pointLight.decay = 2; // 빛이 점점 약해지는 정도

RectAreaLight (사각형 조명)

넓은 면적에서 빛을 내는 조명 (창문이나 네온사인 효과)
물체의 표면을 자연스럽게 비추는 효과 제공
MeshStandardMaterial 또는 MeshPhysicalMaterial과 함께 사용해야 함
개인적으론 화보 찍을때 보조 조명같은 느낌..

const rectAreaLight = new THREE.RectAreaLight(0x4e00ff, 6, 1, 1)
rectAreaLight.position.set(-0.5, 0, 0.5)
rectAreaLight.lookAt(new THREE.Vector3()) // 빛의 위치를 가운데로 둠
scene.add(rectAreaLight)

다른 빛을 제거하면?

SpotLight (스포트라이트)

원뿔 모양으로 빛을 집중시키는 조명 (무대 조명과 유사)
거리 감쇠 및 그림자 생성 가능
빛이 퍼지는 각도를 조정할 수 있음 (angle 값 사용)

const spotLight = new THREE.SpotLight(0x78ff00, 6, 10, Math.PI * 0.1, 0.25, 1)
spotLight.position.set(0, 2, 3)
scene.add(spotLight)

spotLight.target.position.x = -1.5
scene.add(spotLight.target)

🌟 그림자 활성화

spotLight.castShadow = true;

성능

Light는 성능에 많은 영향을 준다. 따라서 가능한 최소한의 조명을 사용하는 것이 좋다.

• AmbientLight, HemisphereLight 적은 비용
• DirectionalLight, PointLight 중간 비용
• SpotLight, RectAreaLight 많은 비용

Baking

• bake a light into the texture -> 텍스쳐에 조명을 입혀버린다는 의미같음
• 빛을 실시간으로 옮길 수 없다는 단점이 있다.

Helpers

조명의 위치를 잡는데 도움이 되는 기능

const hemisphereLightHelper = new THREE.HemisphereLightHelper(hemisphereLight, 0.2)
scene.add(hemisphereLightHelper)

const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 0.2)
scene.add(directionalLightHelper)

const pointLightHelper = new THREE.PointLightHelper(pointLight, 0.2)
scene.add(pointLightHelper)

const spotLightHelper = new THREE.SpotLightHelper(spotLight)
scene.add(spotLightHelper)

window.requestAnimationFrame(() => {
	spotLightHelper.update()
})

const rectAreaLightHelper = new RectAreaLightHelper(rectAreaLight)
scene.add(rectAreaLightHelper)