[Three] 09. Loader - GLTF

Mesh를 생성할 때 Three.js에서 제공하는 geometry를 선택하여 생성하는 방법 외에도,

 

외부 모델링 파일을 불러와 생성하는 방법이 있습니다. 이 때 외부 파일을 불러오는 역할을 하는 것이 Loader입니다.

 

GLTFLoader는 glTF(GL Transmission Format) 형식으로 데이터를 불러오는 방식이며,

 

JSON 형식(.gltf) 또는 이진파일 형식(.glb)을 입력값으로 받습니다.

import { GLTFLoader } from "three/examples/jsm/Addons.js";

const gltfLoader = new GLTFLoader();

Load ( )

Loader를 통해 파일을 불러오는 작업은 load( ) 함수를 통해 이루어집니다.

loader.load(url: string, onLoad: Function, onProgress: Function, onError: Function);

url  |  불러오고자 하는 .gltf 또는 .glb 파일의 경로 (public 폴더를 root로 합니다)

onLoad  |  불러오기가 성공적으로 완료된 후 실행되는 함수. Scene에 추가하기 까지의 주요 작업들이 여기서 수행됩니다.

onProgress  |  불러오기가 진행되는 동안 실행되는 함수. (optional)

onError  |  불러오기 중 에러 발생시 실행되는 함수. (optional)

loader.load(
    // url
    '/table.glb',
    // onLoad
    (gltf: GLTF) => {
    	const mesh = new Mesh();
        
        mesh = gltf.scene as Group;
        mesh.castShadow = true;
        mesh.receiveShadow = true;
        
        info.scene.add(mesh);
    },
    // onProgress
    (xhr: ProgressEvent<EventTarget>) => {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    // onError
    (error: any) => {
        console.error('An error happened');
    }
)

실행시 다음과 같이 모델링 파일을 scene에 불러올 수 있습니다.

Traverse( )

모델링 파일이 하나의 강체로 되어 있지 않고 여러 개의 강체로 구성되어 있거나, 어떤 것이 다른 것을 포함하는 계층적 구조를 가질 때도 있습니다.

 

이 경우 모델링 전체에 설정을 적용하기 위해서는 모든 하위 mesh들에 접근해야합니다.

 

onLoad( ) 함수로서 gltf.scene.traverse( )함수를 사용하면 모델링 mesh의 모든 하위 자식 mesh들에 접근할 수 있습니다.

 

※ traverse( ) : Object3D 객체의 메소드로, 매개변수로 받는 callback을 자기 자신과 자신의 모든 하위 Object3D에게 시행합니다.

// onLoad()
(gltf: GLTF) => {
    gltf.scene.traverse((child: Ojbect3D) => {
    	// child는 모든 하위 자식 object들을 나타냅니다.
        
        const mesh = child as Mesh;
        //...
    }
}