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
많은 비용조명의 위치를 잡는데 도움이 되는 기능
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)