[Three.js] Light

Light

Three.js에서 Light는 씬(Scene) 내 객체가 어떻게 보일지를 결정하는 조명 요소입니다.
각 Light는 빛의 색상, 세기, 위치, 방향 등에 따라 씬에 다양한 조명 효과를 만듭니다.

Three.js 광원(Light) 종류별 정리

1. 전역 조명 (Global Light)

씬 전체를 균일하게 밝히는 광원 (방향성, 그림자 없음)

종류	주요 속성	그림자 지원	감쇠 여부
AmbientLight	color, intensity	없음	없음
HemisphereLight	skyColor, groundColor, intensity	없음	없음

---

2. 방향성 조명 (Directional Light)

특정 방향에서 빛을 쏘는 광원 (그림자 지원)

종류	주요 속성	그림자 지원	감쇠 여부
DirectionalLight	color, intensity, position, castShadow	있음	없음

---

3. 점/원뿔 조명 (Point & Spot Light)

점 또는 원뿔 모양으로 빛을 발산하는 광원 (그림자, 감쇠 지원)

종류	주요 속성	그림자 지원	감쇠 여부
PointLight	color, intensity, distance, decay	있음	있음
SpotLight	color, intensity, distance, angle, penumbra, decay	있음	있음

---

4. 면 광원 (Rect Area Light)

직사각형 면에서 빛을 발산하는 광원 (특정 재질에만 효과적)

종류	주요 속성	그림자 지원	감쇠 여부
RectAreaLight	color, intensity, width, height	없음	없음

RectAreaLight 사용 시 RectAreaLightUniformsLib.init() 호출 필요

예제코드

_setupLight() {
    RectAreaLightUniformsLib.init();

    const light = new THREE.RectAreaLight(0xffffff, 10, 6, 1);
    light.position.set(0, 5, 0);
    light.rotation.x = THREE.MathUtils.degToRad(-90);

    const helper = new RectAreaLightHelper(light);
    light.add(helper);

    this._scene.add(light);
    this._light = light;
  }


update(time) {
    time *= 0.001;

    const smallSpherePivot = this._scene.getObjectByName("smallSpherePivot");
    if (smallSpherePivot) {
      smallSpherePivot.rotation.y = THREE.MathUtils.degToRad(time * 50);

      if (this._light.target) {
        const smallSphere = smallSpherePivot.children[0];
        smallSphere.getWorldPosition(this._light.target.position);

        if (this._lightHelper) this._lightHelper.update();
      }
    }
  }

결과