three.js, 대규모 장면에서의 그림자 적용을 위한 SunLight

SunLight는 태양광인데, 흔히 알고 있고 있는 DirectionalLight와 비슷합니다. 다만 그림자로써의 DirectionLight와 다르게 처리되는데 훨씬 큰 범위의 장면에 대한 그림자를 Cascade 방식으로 처리하여 표현합니다. SunLight을 적용하기 위한 코드를 순서대로 정리하면 다음과 같습니다.

먼저 필요한 클래스를 import 합니다.

import { SunLight } from 'three/addons/lights/SunLight.js';
import { SunLightNode } from 'three/addons/lights/SunLightNode.js';

SunLight는 그림자 표현을 위해 SunLightNode라는 TSL 노드를 사용합니다. 이 TSL 노드는 기본 노드가 아닌 확장 노드이므로 등록이 필요합니다. 다음처럼 등록할 수 있습니다.

this.renderer.library.addLight(SunLightNode, SunLight);

실제 SunLight를 생성하는 코드는 다음과 같습니다.

private sunLight!: SunLight;

private setupSunLight() {
  this.renderer.library.addLight(SunLightNode, SunLight);

  const sunLight = new SunLight();
  sunLight.position.setFromSphericalCoords(1, THREE.MathUtils.degToRad(90 - params.elevation), THREE.MathUtils.degToRad(params.azimuth));

  sunLight.castShadow = true;
  sunLight.shadow.camera.far = params.far; // maximum shadow distance
  sunLight.shadow.mapSize.setScalar(params.resolution);
  sunLight.shadow.normalBias = 0.05;
  this.scene.add(sunLight);

  this.sunLight = sunLight;
}

위의 코드를 보면 설정을 위해 param 객체를 사용하고 있는데, 해당 객체는 다음 예시와 같습니다.

const params = {
  showCascades: false,
  far: 1000,
  resolution: 2048,
  azimuth: 135,
  elevation: 10
};

이외에 기본적으로 그림자를 위한 렌더러와 매시에 대한 코드도 추가해야 합니다. 즉..

renderer.shadowMap.enabled = true;

...

mesh.castShadow = true;
mesh.receivedShadow = true;

답글 남기기 응답 취소