three.js texture 여러 개를 한 오브젝트에 적용하기

const textureLoader = new THREE.TextureLoader();
const rightTexture = textureLoader.load('right side texture 경로');
const leftTexture = textureLoader.load('left side texture 경로');
const topTexture = textureLoader.load('top side texture 경로');
const bottomTexture = textureLoader.load('bottom side texture 경로');
const frontTexture = textureLoader.load('front side texture 경로');
const backTexture = textureLoader.load('back side texture 경로');

const materials = [
    new THREE.MeshBasicMaterial({map : rightTexture }),
    new THREE.MeshBasicMaterial({map : leftTexture }),
    new THREE.MeshBasicMaterial({map : topTexture }),
    new THREE.MeshBasicMaterial({map : bottomTexture }),
    new THREE.MeshBasicMaterial({map : frontTexture }),
    new THREE.MeshBasicMaterial({map : backTexture }),
]

rightTexture.magFilter = THREE.NearestFilter;
leftTexture.magFilter = THREE.NearestFilter;
topTexture.magFilter = THREE.NearestFilter;
bottomTexture.magFilter = THREE.NearestFilter;
frontTexture.magFilter = THREE.NearestFilter;
backTexture.magFilter = THREE.NearestFilter;

...

const mesh = new THREE.Mesh(geometry, materials);

위와 같이 여러 개의 텍스처를 load한 후 material 배열에 각각 넣은 materials 객체를 만들었다.

이 materials 객체를 Mesh의 매개변수로 넣는 방식을 통해 여러 텍스처를 하나의 오브젝트에 입힐 수 있다. 

 

위 코드의 경우 정육면체의 각각의 면에 텍스처를 입혔는데, material배열에 넣는 순서에 따라 렌더링되는 면이 지정되어있는 모양이다.

 

TextureLoader의 load()로 texture를 load하여 가져온 Texture객체에 magFilter로 NearestFilter를 적용하면, 텍스처의 해상도가 낮아도 선명하게 보인다.

→ 유니티에서 도트 그래픽을 이용해서 sprite를 다루어본 경험이 있다면, 유니티 엔진에서도 texture의 filter mode를 bilinear에서 no point로 설정하여 NearestFilter를 적용할 수 있음을 알 수 있다.