three.js EnvironmentMap + PolyHaven(3D asset site)

https://polyhaven.com/

Poly Haven • Poly Haven

위 사이트에서도 여러가지 3D 에셋을 다운받을 수 있다. 

EXR 파일 혹은 HDR 파일을 받을 수 있고, HDR의 경우 cubemap으로 변환해서 사용해야한다. 

 

 

이번에는 EnvironmentMap을 texture로 입혀보도록 하자.

// texture
const cubeTextureLoader = new THREE.CubeTextureLoader();
const envTex = cubeTextureLoader
    .setPath('environment map 경로')
    .load([ // 각각 위치에 해당하는 이미지 
        'px.png', 'nx.png',
        'py.png', 'ny.png',
        'pz.png', 'nz.png',
    ]);

...

// Mesh
const geometry = new THREE.BoxGeometry(3, 3, 3);
const material = new THREE.MeshBasicMaterial({
    metalness: 2,
    roughness: 0.1,
    envMap: envTex,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

environment texture를 load할 때 setPath로 경로를 분리하여 지정할 수 있다.

각 면의 이미지를 로드하고 material을 생성할 때, evnMap을 불러온다. 이때 metalness, roughness를 설정해주어야 texture가 제대로 보인다.

 

// Scene
const scene = new THREE.Scene();
scene.background = cubeTextureLoader
    .setPath('environment map 경로')
    .load([
        'px.png', 'nx.png',
        'py.png', 'ny.png',
        'pz.png', 'nz.png'
    ]);

위와 같은 식으로 scene에 environment texture를 입혀서 배경을 입힐 수 있다.