OBJLoader 와 MTLLoader

3D Max 와 같은 툴로 export mtl 및 obj 파일을 처리할때 유용합니다.

Import

import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader.js';
import {MTLLoader} from 'three/examples/jsm/loaders/MTLLoader.js';

MTL(Material Library File)

mtl파일은 obj에서 사용되는 재질 속성들에 대한 정보를 포함하고 있다.

MTL 파일 구조

newmtl Test01
Ns 90.000000
Ni 1.500000
d 1.000000
Tr 0.000000
Tf 1.000000 1.000000 1.000000 
illum 2
Ka 0.588000 0.588000 0.588000
Kd 1.000000 1.000000 1.000000
Ks 0.000000 0.000000 0.000000
Ke 0.000000 0.000000 0.000000
map_Kd white.png
map_Ks specular.png

• newmtl : 새로운 매테리얼을 나타낸다. newmtl이 여러개가 있다면 여러개의 재질을 사용했다는 뜻이다.
• Ns : 현재 재질의 반사 지수를 지정하는 값이다. 반사광 하이라이트 초점. 0~1000값을 가진다. 기본값은 60이며 100보다 크면 앨리어싱 효과가 발생한다.
• Ni : 표면의 광학 밀도를 지정. 굴절률. 0.001 ~ 10. 
  • 1.0 일때 : 개체를 통과할때 구부러지지 않음을 의미
  • 1.5 정도 : 유리의 굴절률
  • 1.0 미만 : 결과가 이상하게 나타나므로 권장하지 않음
• d : 재질의 투명성.
  • 1 일때 : 불투명
  • 1 미만 : 투명도적용
• Tr : d와 마찬가지로 투명성을 나타내는 것 d값의 반전이라고 생각하면된다 . Tr = 1 - d (왜 두개로 나눠놨는지..)
• Tf : 빛의 투과 속성. 예로 Tf 0 1 0은 모든 녹색이 통과하도록 허용하고 빨간색, 파란색은 필터링됨
• illum : 재료에 사용할 조명 모델지정. 0~10까지 숫자
  • 0 : Color on and Ambient off
  • 1 : Color on and Ambient on
  • 2 : Highlight on
  • 3 : Reflection on and Ray trace on
  • 4 : Transparency: Glass on Reflection: Ray trace on
  • 5 : Reflection: Fresnel on and Ray trace on
  • 6 : Transparency: Refraction on Reflection: Fresnel off and Ray trace on
  • 7 : Transparency: Refraction on Reflection: Fresnel on and Ray trace on
  • 8 : Reflection on and Ray trace off
  • 9 : Transparency: Glass on Reflection: Ray trace off
  • 10 : Casts shadows onto invisible surfaces
• Ka : 주변 반사율을 지정(Ambient). Ka r g b 값에서 r값만 인식하고 g,b값은 r과 같은것으로 인식됨. 
• Kd : 기본 재질 색상 (diffuse color)
• Ks : 정반사율 지정 (specular color)
• Ke : 표면에서 방출되는 빛의 색상 (emission color)
• map_Kd : diffuse Texture map
• map_Ks : specular Texture map
• map_Ka : ambient Texture map
• map_Ns : specular highlight component
• map_bump : bump map (normal map)
• map_d : alpha Texture map

OBJ

3D 모델이 저장되는 파일의 포맷 중 하나이다. MTL 이라는 별도의 material 파일을 사용하기 때문에 3D 모델의 형상 외에 texture, material 정보를 함께 옮길 때는 MTL 파일과 함께 옮겨야 한다.
Vertex, texture 좌표, normal, face 정보(한 면을 구성하는 vertex, texture, normal) 등이 담겨있다.

OBJ 파일 구조

mtllib ./MTL파일명.mtl

v

vt

vn

usemtl xx
f v/vt/vn v/vt/vn v/vt/vn

• mtllib .MTL파일명.mtl : 사용할 mtl 파일 지정
• v : vertex의 local 좌표
• vt : texture 좌표
• vn : normal 값
• usemtl xx : mtl 파일에서 사용할 재질명
• f : 하나의 face를 구성하는 vertex 위치, 텍스처, 노말 인덱스

예제

mtlLoader를 이용하여 mtl 파일을 로딩한 후 objLoader를 이용하여 obj 파일을 로딩하는 예제입니다.
여기서는 Promise 를 이용하여 동기식 구현을 한 예제입니다.

import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader.js';
import {MTLLoader} from 'three/examples/jsm/loaders/MTLLoader.js';

export class Dice {
..........
  public create(){
    return new Promise((resolve, reject) => {
    
      const mtlLoader = new MTLLoader();

      const objUrl = '/assets/object/dice/';
      mtlLoader.setPath(objUrl);
      mtlLoader.load('dice.mtl', (materials: any) => {
        materials.preload();
        const objLoader: any = new OBJLoader();
        objLoader.setMaterials(materials);
        objLoader.setPath(objUrl);
        console.log('before objloader.load');
        objLoader.load('dice.obj', (object: any) => {
          object.scale.set (50, 50, 50);
          object.position.set (0, 50, 0);
          resolve(object);
        }, this.onProgressObjLoader, this.onErrorObjLoader);

      }, this.onProgress, this.onError);
    });
  }
}

private async createDice() {
  const diceCls = new Dice();
  const dice = await diceCls.create();
  this.scene.add(dice);
}