[Javascript] THREE.JS 3D 정육면체에 여러 이미지 적용하기 (textureLoader)
완성본
요새 THREE.JS의 사용법을 익히고 있다.
나는 3D 오브젝트를 소환하고 간단한 환경 수정 정도만 할 수 있는 초보인데 한가지 이미지의 텍스쳐가 아닌 정육면체를 6가지 이미지로 맵핑(+컨트롤 가능)을 하라는 미션이 떨어졌다.
직장인은 안되도 되게 해야한다.
three.js의 예제를 뒤져보자
https://threejs.org/examples/#webgl_geometry_cube
그나마 비슷한 샘플을 찾았다. 하지만 한 개의 나무 이미지 텍스쳐만 쓰였다는 것을 육안으로 그리고 코드로 알 수 있다.
..이게 아냐
구글링 갈겨~~~
출처: https://r105.threejsfundamentals.org/threejs/lessons/threejs-textures.html
발견!

three.js 예제에 위 출처의 코드를 응용해서
const texture를 없애고, const material의 {} 부분을 맵 6개로 변경했다.
나는 unsplash 이미지를 임의로 넣었지만 textures 폴더에 사용할 이미지를 옮겨놓고 사용하는게 좋을 것 같다.
const material = [
new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('https://images.unsplash.com/photo-1478098711619-5ab0b478d6e6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80') }),
new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('https://images.unsplash.com/photo-1574158622682-e40e69881006?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2080&q=80') }),
new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('https://images.unsplash.com/photo-1615111784767-4d7c527f32a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80') }),
new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('https://images.unsplash.com/photo-1606214174585-fe31582dc6ee?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80') }),
new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('https://images.unsplash.com/photo-1596854273338-cbf078ec7071?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2080&q=80') }),
new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('https://images.unsplash.com/photo-1520315342629-6ea920342047?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2080&q=80') })
]
+ OrbitControls를 추가하는 방법
three 모듈 아래에
import { OrbitControls } from './jsm/controls/OrbitControls.js';
를 추가하고,
let camera, scene, renderer 사이에 controls를 추가한다.
그리고 function init() 내에
controls = new OrbitControls(camera, renderer.domElement);
controls.autoRotate = true;
위의 코드를 추가한다. autoRotate를 true로 설정하면 오브젝트가 자동으로 회전한다.
마지막으로 function animate() 내에

controls.update();
를 추가
orbitControls까지 추가한 완성본
See the Pen THREE.JS multiple images on BoxGeometry by nah (@wimmwell) on CodePen.