104 glb, fbx 파일 Load 하기

104 - .glb .fbx 파일 Load 하기

Metarial에 대해 간단하게 알아봅니다.
glb, fbx 확장자의 파일을 로드합니다.

학습내용

• Metarial에 대해 간단하게 알아봅니다.
• Loader에 대해 알아봅니다.
  • setPath(), load(), scene.add()
• glb, fbx 확장자의 파일을 로드합니다.

Material

https://threejs.org/docs/index.html?q=material

material 종류

mesh material	랜더
MeshBasicMaterial	컬러
MeshLambertMaterial	컬러 + 그림자
MeshPhongMaterial	컬러 + 그림자 + 빛
MeshStandardMaterial	복합

Free 3d.com

https://free3d.com/

• threeJS에서 쓰기 좋은 파일 포맷 ⇒ .glb
  • glTF의 바이너리 버전
  • 이후에 블렌더에서 glb로 export하여 사용할 것임

gltf-viewer donmccurdy

https://gltf-viewer.donmccurdy.com/

• .glb 파일을 브라우저에서 쉽게 확인할 수 있는 viewer입니다.

Loader

• 로더를 import합니다.

import import { GLTFLoader } from "../../libs/three/jsm/GLTFLoader.js";
import { FBXLoader } from "../../libs/three/jsm/FBXLoader.js";

GLTFLoader

• https://threejs.org/docs/index.html?q=GLTF#examples/en/loaders/GLTFLoader
• GLTFLoader.load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined
  • url : .gltf 또는 .glb 파일의 위치 (setPath를 따로 설정했다면 그냥 파일 이름임)
  • onLoad : 콜백
  • onProgress: 진행 중 콜백
  • onErorr: 에러 시 콜백

FBXLoader

• 파라미터 ⇒ GLTFLoader와 동일

new LoadingBar

this.LoadingBar = new LoadingBar();
this.loadGLTF();
...
loadGLTF(){
	const self = this;
	const loader = new GLTFLoader().setPath("../../assets")
}

• this.LoadingBar = new LoadingBar();

new GLTFLoader, new FBXLoader 그리고 loader.load()

• 새 loader를 만듭니다.

  • setPath를 사용해 경로를 지정합니다.

• loader.load 메소드로 glb 파일을 로드합니다.

  • loader.load(파일, 완료콜백, 진행중콜백, 에러콜백)

  loadGLTF() {
    const self = this; // self는 this
    const loader = **new GLTFLoader().setPath("../../assets/glb/");**
  
    loader.load(
      "office-chair.glb", // 파일명, path를 지정하지 않았다면 전체 경로
      function (gltf) { // gltf를 받아옴
        self.chair = gltf.scene; // chair는 scene
        self.scene.add(gltf.scene); // self(this)의 scene에 완료된 scene을 add
        self.loadingBar.visible = false; // 로딩바는 감춤
        self.renderer.setAnimationLoop(self.render.bind(self)); 
  			// renderer에 animation loop, this.render.bind(this)
      },
      function (xhr) { // XML http request 객체를 받아옴
        self.loadingBar.progress = xhr.loaded / xhr.total;
  			// xhr.loaded(로딩 지수) / xhr.total(전체)
      },
      function (err) {
        console.log("에러 발생");
        console.log(err);
      }
    );
  }

  loadFBX() {
    const self = this;
    const loader = new FBXLoader().setPath("../../assets/model/");
  
    loader.load(
      "office-chair.fbx",
      function (object) {
        self.chair = object;
        self.scene.add(object);
        self.loadingBar.visible = false;
        self.renderer.setAnimationLoop(self.render.bind(self));
      },
      function (xhr) {
        self.loadingBar.progress = xhr.loaded / xhr.total;
      },
      function (err) {
        console.log("에러 발생");
        console.log(err);
      }
    );
  }

.Box3().setFromObject(~.scene)

• 영역의 bounding box 사이즈(스케일) 확인하기

  • .Box3().setFromObject(영역)
  • vector3ToString()

  const bbox = new THREE.Box3().setFromObject(gltf.scene);
  console.log(
    `min: ${"\n" + vector3ToString(bbox.min, 2).split(",").join("\n")}`
  );
  console.log(
    `max: ${"\n" + vector3ToString(bbox.max, 2).split(",").join("\n")}`
  );

• console 출력 내용

• 만약 1000, 10000 등 예외적인 숫자가 있다면 object의 스케일 또는 위치를 조정해야 함을 알 수 있음

.glb, .tbx 각 로딩 결과

• gib 파일 : GLTF 로더 사용

• fbx 파일 : FBX 로더 사용