틴커캐드에서 생성한 춘식이를 ( mtl + obj ) threejs 에서 보여 주도록 하겠습니다.

다운로드

tinkercad 에서 만든 모델을 .OBJ 형태로 다운로드 받습니다.

로딩처리

파일을 다운로드 받으면 zip 으로 압축 되는데 압축 해제 하면 mtl 파일과 (머트리얼) obj 파일 (개체정보) 로 구성되어 있으며, MTLLoader 와 OBJLoader 를 이용하여 머트리얼 정보 로드 이후 개체 정보를 로드 하도록 구성하면 됩니다.

/**
 * obj를 읽어들여 scene에 추가한다
 * @param mtlPath .mtl 파일 경로
 * @param objPath .obj 파일 경로
 * @param callback 로드 완료 이후 콜백 (object 정보가 반환 됨)
 */
export default function loadObj(mtlPath: string, objPath: string, callback: (group: THREE.Group) => void) {
  const mtlLoader = new MTLLoader();
  mtlLoader.load(
    mtlPath,
    materials => {
      materials.preload();

      const objLoader = new OBJLoader();
      objLoader.setMaterials(materials);
      objLoader.load(
        objPath,
        callback,
        xhr => {
          console.log('objLoader' + (xhr.loaded / xhr.total) * 100 + '% loaded');
        },
        error => {
          console.log('objLoader An error happened', error);
        },
      );
    },
    xhr => {
      console.log('mtlLoader' + (xhr.loaded / xhr.total) * 100 + '% loaded');
    },
    error => {
      console.log('mtlLoader An error happened', error);
    },
  );
}

요약 소스

이후 scene 위에 light, camera, renderer, controls 등을 설정한 이후 개체 정보를 추가하면 됩니다.

import * as THREE from 'three';

import loadObj from './helper/WOBJLoader';
import {
  createScene,
  createPointLight,
  createPerspectiveCamera,
  createWebGLRenderer,
  createOrbitControls,
  createResizeEvent,
  createStats,
} from './helper/WTemplate';

///////////////////////////////////////////////////////////////////
//
//  01. 기본 항목 추가 처리
//
const scene = createScene(); // scene 추가
const light = createPointLight(); // light 추가
scene.add(light);

const camera = createPerspectiveCamera(); // camera 추가
const renderer = createWebGLRenderer(); // renderer 추가
const controls = createOrbitControls(camera, renderer); // controls 추가

createResizeEvent(camera, renderer, render); // 화면 resize event 추가

const stats = createStats(); // stats 패널 추가

///////////////////////////////////////////////////////////////////
//
//  02. 기본 동작처리 설정
//

// animation 설정
// requestAnimationFrame에 의해 매 frame 단위로(60fps, 초당 60회) 호출됨
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  render();
  stats.update();
}
animate();

// 랜더링 설정
// 화면을 그려주는 역할을 함
function render() {
  renderer.render(scene, camera);
}

///////////////////////////////////////////////////////////////////
//
//  비동기로 개체를 로드 후 위치를 잡아준다
//  The X axis is red. The Y axis is green. The Z axis is blue.
//

loadObj('3d/chun/chun.mtl', '3d/chun/chun.obj', (object: THREE.Group) => {
  let pos = new THREE.Vector3(0, 0, 0);
  let scale = 0.01;
  object.position.set(pos.x, pos.y, pos.z);
  object.scale.set(scale, scale, scale);
  object.rotation.set(-1.5, 0, -3.2);
  scene.add(object);
});

맺음말

다가오는 메타버스시대? 에 3D를 모르면 안되겠다는 생각하에 배워나가고 있네요 ... 사실 godot 하다 babylonjs 하다 돌고 돌다 threejs 까지 온 것 이지만 ;;

여튼 지속적으로 threejs 를 탐구 해 보도록 하겠습니다.