재질, Environment Map_물체 표면에 반사되는 배경 이미지를 설정

 

EnvironmentMap

• 3D 장면의 물체 표면에 반사되는 배경 이미지를 설정하여 물체가 주변 환경을 반사하는 효과를 주는 방법이다.
• 장면에 보다 현실적이고 사실적인 재질을 적용할 수 있다.

 

 

주요 구성 요소와 기능

1. Cube Texture
   • 주로 큐브 형태의 이미지 텍스처를 사용하여 Environment Map을 만든다.
   • 6개의 이미지를 사용하여 큐브 맵을 구성하고, 물체 표면에 환경 반사가 매핑된다.
     
     
2. HDR 이미지
   • HDR(High Dynamic Range) 이미지 포맷을 사용하면 물체 표면에 더 높은 품질의 빛 반사 효과를 줄 수 있다.
   • 이를 통해 빛과 색상이 더 사실적으로 표현된다.
     
     
     
3. Material 설정
   • Environment Map은 MeshStandardMaterial, MeshPhysicalMaterial과 같은 재질에서 주로 사용된다.
   • MeshStandardMaterial을 사용할 때 옵션인 metalness, roughness를 조절해야 한다.
   • 이 재질에서 envMap 속성을 통해 Environment Map을 설정한다.
     
     
     
4. 조명 효과와 반사
   • 환경 맵은 단순한 배경 이미지를 넘어서 장면의 조명 효과와 상호 작용해 반사, 굴절 등과 같은 사실적인 효과를 표현할 수 있다.

 

 

3D 에셋, HDRi 이미지, 텍스처 다운로드

https://polyhaven.com/

• 3D 에셋, HDRi 이미지, 텍스처 무료 제공
• HDR파일 다운로드 하기
• 다운로드한 HDRi 이미지 파일을 6장으로 분류해줘야 한다.
  • HDR to cubeMap 구글에 검색
  • https://matheowis.github.io/HDRI-to-CubeMap/
  • 다운로드한 이미지 업로드해서 변환하기

 

 

 

 

  /* 텍스쳐 이미지 로드 */
  const cubeTextureLoader = new THREE.CubeTextureLoader();
  const envTex = cubeTextureLoader.setPath("/textures/cubemap/").load([
    // 파일명 순서대로 넣기
    // X-Y-Z 순으로 넣는다.
    // 플러스(+) - 마이너스(-) 순으로 넣는다.
    // 파일명의 p는 Positive 플러스(+),  n은 Negative 마이너스(-)를 의미한다.
	'px.png', 'nx.png',
	'py.png', 'ny.png',
	'pz.png', 'nz.png'
  ]);
  
  
  /* Scene 만들기 */
  const scene = new THREE.Scene();
  scene.background = envTex; // 장면 배경과 물체의 Environment Map 설정

  /* Messh 만들기 */
  const geometry = new THREE.BoxGeometry(2, 2, 2);
  const material = new THREE.MeshStandardMaterial({
    // MeshBasicMaterial, MeshStandardMaterial 비교해서 보기
    // MeshStandardMaterial을 사용할 때 옵션인 metalness, roughness를 조절하기
    metalness: 0.9, // 메탈릭 속성 증가로 반사 효과 극대화
    roughness: 0.1, // 거칠기 감소로 표면 반사 강화
    envMap: envTex
  });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

• MeshStandardMaterial 사용 시 옵션 metalness, roughness을  사용하기

 

 

cubeTextureLoader

• . setPath  폴더 경로
• . load([…]) 
  • X-Y-Z 순으로 넣는다.
  • 플러스(+) - 마이너스(-) 순으로 넣는다.
  • 파일명의 p는 Positive 플러스(+), n은 Negative 마이너스(-)를 의미한다.

.load([
	// + - 순서
	'px.png', 'nx.png',
	'py.png', 'ny.png',
	'pz.png', 'nz.png'
]);