three.js SkyBox 구현하기

// texture
const cubeTextureLoader = new THREE.CubeTextureLoader();
const cubeTexture = cubeTextureLoader
    .setPath('/textures/cubemap/')
    .load([
        'px.png', 'nx.png',
        'py.png', 'ny.png',
        'pz.png', 'nz.png'
    ]);
   
...

// Scene
const scene = new THREE.Scene();
scene.background = cubeTexture;

...

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

environment map texture를 이용하여 texture객체를 따로 설정하고, 이를 Scene에 사용하는 방식으로 skybox를 구현할 수 있다. 또한 mesh에도 적용할 수 있다.

MeshBasicMaterial의 경우 envMap으로 texture를 설정하기만 해도 적용할 수 있지만, MeshStandardMaterial은 metalness 및 roughness를 설정하지 않으면 envMap texture가 제대로 렌더링 되지 않는다.