[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.