[Three.js] Shadow

이규성·2025년 6월 16일
post-thumbnail

Shadow란?


그림자(Shadow)는 조명과 객체의 상호작용으로 생기는 빛이 차단된 영역을 의미합니다.
그림자 기능은 기본적으로 꺼져 있으므로, 직접 활성화하고 설정해야 합니다.

그림자 활성화하기

renderer.shadowMap.enabled = true;

조명에서 그림자 생성 설정

light.castShadow = true;

그림자를 생성하는 조명에는 castShadow = true를 설정해야 합니다.

그림자는 특정 라이트 타입에서만 지원됩니다

  • 지원 타입: DirectionalLight,SpotLight, PointLight
  • 미지원 타입: HemisphereLight, AmbientLight, RectAreaLight

그림자 품질 및 범위 설정

light.shadow.mapSize.width = light.shadow.mapSize.height = 2048;
light.shadow.radius = 1;

mapSize: 그림자 텍스처의 해상도를 설정합니다
radius: 그림자 가장자리의 블러(blur) 효과를 조절합니다.

카메라 세팅

조명의 그림자는 내부적으로 카메라 뷰를 기반으로 렌더링됩니다.
DirectionalLight.shadow.camera: 정사영(Orthographic) 투영을 사용합니다.
SpotLight.shadow.camera: 원근(Perspective) 투영을 사용합니다.

Mesh 객체 설정

그림자 생성하기

mesh.castShadow = true;

그림자 받기

mesh.receiveShadow = true;

그림자 맵 타입

  • BasicShadowMap: 가장 빠르지만, 그림자 가장자리가 계단 현상처럼 거칠게 보일 수 있습니다.
  • PCFShadowMap: 기본값으로, 그림자 가장자리를 부드럽게 처리하여 품질이 좋고 성능도 적당합니다.
  • PCFSoftShadowMap: PCFShadowMap보다 그림자를 더 부드럽게 표현합니다.
  • VSMShadowMap: 고품질 그림자를 제공하지만, 설정이 더 복잡하고 메모리 사용량이 많을 수 있습니다.

참고자료


Three.js 매뉴얼 – Shadows
유튜브 강의

0개의 댓글