Three.js journey 14 - Lights

크롱·2024년 12월 21일

Three.js

목록 보기

10/12

AmbientLight

AmbientLight는 scene 내부의 모든 object들에 모든 방향에서 조명을 적용한다.
모든 면에 uniform하게, 즉 동일하게 빛이 적용

// Ambient light
const ambientLight = new THREE.AmbientLight(0xffffff, 1)
scene.add(ambientLight)


또는
const ambientLight = new THREE.AmbientLight()
ambientLight.color = new THREE.Color(0xffffff)
ambientLight.intensity = 1

ambientLight은 light bouncing을 위해 미미하게 쓰이곤 한다.
실제 현실에서는 어떤 오브젝트에 빛을 적용하면 빛이 반사되기 때문에 뒤쪽 면을 볼 수 있는 것이 바로 Light Bouncing 덕분이다.
THree.js 에선 light bouncing 지원이 잘 안되기때문에 이때 ambientLight을 사용해 가짜로 구현할 수 있다.

DirectionalLight

태양과 같은 효과를 제공하여 태양의 광선이 평행하게 진행하는 것처럼 보이게 함

// Directional light
const directionalLight = new THREE.DirectionalLight(0x00fffc, 0.9)
scene.add(directionalLight)

이 light의 position을 조금 오른쪽으로 옮겨보자. 주황색 x가 directionalLight이라고 한다면, 이 빛은 자신의 위치에서 scene 중점을 향한 평행 태양 빛을 내뿜는다고 이해하면 되겠다.

directionalLight.position.set(-1, 0.25, 0) // 빛이 왼쪽에서 비춰짐
directionalLight.position.set(1, 0.25, 0)  // 빛이 오른쪽에서 비춰짐

HemisphereLight

HemisphereLight는 AmbientLight처럼 모든 면에 적용되는 빛이지만 2가지 색상을 매개변수로 받는다. 첫 번째 매개변수는 위쪽 면을 비추는 색상, 두 번째 매개변수는 바닥을 향하는 면에 비춰지는 색상이다.

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

PointLight

마치 라이터가 가운데에서 불을 밝혀주지만 모든 방향으로 균일하게 퍼지는 빛이다.

// PointLight
const pointLight = new THREE.PointLight(0xff9000, 1.5)
scene.add(pointLight)

PointLight에는 3,4번째 인자도 넣을 수 있는데,

3번째: distance
4번째: decay(얼마나 빠르게 빛이 희미해져가는가)

distance를 설정하지않으면 위 그림처럼 물체가 가까이에있든 멀리있든 동일한 intensity로 빛이 적용되는데
distance를 설정하면, 해당 범위 내 까지만 빛이 적용된다.

RectAreaLight

RectAreaLight는 MeshStandardMaterial 및 MeshPhysicalMaterial에만 반응한다. 사진관 네모 조명과 같고, 4가지의 파라미터를 갖는다

color
intensity
width
height

// RectAreaLight
const rectAreaLight = new THREE.RectAreaLight(0x4e00ff, 6, 3, 3)
rectAreaLight.position.set(0, 0, 2)
scene.add(rectAreaLight)

다른 light를 다 삭제한뒤 rectAreaLight만 적용시켜줌.
라이트 z값이 2, 즉 오브젝트 앞쪽에 위치하면 밑 사진처럼 결과가 나옴.

lookAt 메소드를 통해 rectAreaLight의 방향도 바꿀 수 있따

SpotLight

점에서 시작해 원뿔모양으로 퍼져나가는 손전등같은 빛이다. 원형의 빛이 생김

매개변수

color
intensity
distance
angle

만약 Math.PI 면 원 반지름이니까

거의 모든 방향에 빛이 적용되므로 밑에선 0.1을 곱해줌
penumbram(fading)
빛 경계선이 blurry하게끔 만들어줌. 0일 경우 경계선이 선명
decay
멀리갈수록 빛이 희미해지는 intensity..? 보통 1이 적당함.

spotLight의 방향을 바꾸고 싶다면 target에 접근해서 position을 변경해야한다.그리고 scene에도 add해야함

const spotLight = new THREE.SpotLight(0x78ff00, 4.5, 10, Math.PI * 0.1, 0.25, 1)
scene.add(spotLight)

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