THREE.EquirectangularReflectionMapping은 Three.js에서 **환경 맵(Environment Map)**을 처리할 때 사용되는 매핑 유형입니다.
1. Equirectangular Mapping이란?
- Equirectangular는 360도 이미지를 **구체(Sphere)**에 맞게 펼쳐서 매핑하는 방식입니다.
- 이 이미지 형태는 수평 방향으로 360도, 수직 방향으로 180도의 시야를 담습니다.
- 반사나 굴절 효과를 표현할 때 사용됩니다.
2. Equirectangular Reflection Mapping
- 이 매핑 유형은 Equirectangular 텍스처를 사용하여 반사광을 표현합니다.
- THREE.EquirectangularReflectionMapping은 반사광이 카메라 시점에서 주변 환경을 반사하는 것처럼 보이도록 적용합니다.
- 주로 스카이박스나 금속 표면의 반사를 만들 때 사용합니다.
3. 사용 예시
// 텍스처 로드
const loader = new THREE.TextureLoader();
const envTexture = loader.load('path/to/equirectangular_texture.jpg');
// Equirectangular 매핑 설정
envTexture.mapping = THREE.EquirectangularReflectionMapping;
// 씬 배경이나 재질에 적용
scene.background = envTexture; // 씬 전체 배경
scene.environment = envTexture; // 반사광 환경 설정
// 금속 표면의 메쉬
const material = new THREE.MeshStandardMaterial({
metalness: 1.0,
roughness: 0.2,
envMap: envTexture, // 환경 맵 적용
});
const sphere = new THREE.Mesh(new THREE.SphereGeometry(5, 32, 32), material);
scene.add(sphere);4. 특징
- 배경이나 반사 재질에 적합한 매핑입니다.
- Equirectangular 이미지를 스피어 형태로 펼쳐지도록 매핑하여 자연스러운 반사광을 제공합니다.
- 반사 환경이나 HDRI(High Dynamic Range Image) 같은 고품질 이미지에 사용됩니다.
5. 시각적 이해
Equirectangular 텍스처는 다음과 같이 생깁니다:
- Flat Image (입력):
- 펼쳐진 360도 이미지 (좌우로 360도, 상하로 180도)
- Sphere 적용 (출력):
- 스피어 표면에 자연스럽게 매핑되며 반사광처럼 보임.
6. 다른 매핑과 비교
매핑 유형설명| EquirectangularReflectionMapping | Equirectangular 텍스처를 반사에 사용 |
| CubeReflectionMapping | 큐브맵 텍스처를 반사에 사용 |
| EquirectangularRefractionMapping | 반사 대신 굴절광 효과를 적용 |
- Equirectangular는 단일 이미지로 360도 환경을 표현하지만,
CubeReflectionMapping은 6개의 면으로 이루어진 큐브맵을 사용합니다.
결론
THREE.EquirectangularReflectionMapping은 360도 환경 이미지를 반사광으로 사용하는 매핑 방식입니다. 반사광이 물체 표면에 자연스럽게 매핑되어 리얼한 금속이나 유리 효과를 만들 때 유용합니다.