Threejs Cloth Tailor 개발일지 - 모델 OBJ 파일 load하기 OBJLoader, load model material 입히기

 

이전 포스팅 보러가기

 

threejs Loader

threejs의 addon library에는 여러가지 loader가 포함되어있다. 아래 링크에서 모든 loader를 확인해볼 수 있다.

 

threejs loader 종류 보러가기

 

여기에 3D 엔진을 자주 다루어봤다면 알만한 웬만한 3D 모델 파일들을 load할 수 있는 loader들이 있다.

threejs에서는 주로 gltf, obj, fbx를 사용하게 될 것 같다.

OBJLoader

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'

이렇게 OBJLoader를 import하여 사용해주자.

 

import { Group, Mesh, Object3DEventMap } from 'three'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'

export async function modelLoad(url: string): Promise<Group<Object3DEventMap>>{
  const objLoader: OBJLoader = new OBJLoader()
  let group: Group

  group = await objLoader.loadAsync(
    url,
    function(xhr){ // progress
      console.log((xhr.loaded / xhr.total * 100) + '% loaded')
    }
  )

  return group
}

비동기 load 함수를 이용해서 코드를 짰다.

반환 할 때는 Promise말고 Group으로 가져오는 방법을 찾아봤는데, 아직은 Promise로 가져오는 방법을 이용하고 있다.

 

  // model load
  const bunnyObj = await modelLoad('Stanford_Bunny.obj')
  bunnyObj.scale.set(0.01,0.01,0.01)
  bunnyObj.position.set(0,.5,0)
  scene.add(bunnyObj)

이제 scene.ts에서 scene에 모델을 추가해주자.

 

스탠포드 토끼가 잘 불러와진다.

 

load한 model material 입히기

흰색 토끼를 빨갛게 물들여보자.

 

  // model load
  const objPath = 'Stanford_Bunny.obj'
  const bunnyObj = await loader.loadOBJ(objPath)
  bunnyObj.scale.set(0.01,0.01,0.01)
  bunnyObj.position.set(0,.5,0)
  bunnyObj.traverse((ele)=>{
    if(ele instanceof Mesh){
      ele.material = new MeshStandardMaterial({color: 'red', side: 2})
    }
  })
  scene.add(bunnyObj)

모델을 load한 후 traverse 함수를 이용해서 group 안의 mesh들을 순회하며 material을 red color로 추가하는 코드를 작성했다.

 

빨갛게 물든 토끼가 완성되었다.