GLTFLoader

본 내용은 angulr위주로 설명드립니다.

import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js';
..........
export class GlftLoaderComponent  {
  constructor() {
    const loader = new GLTFLoader();

    loader.load('/assets/my.gltf',  ( gltf ) => {
      this.myModel = gltf.scene;
      this.scene.add(this.myModel);
      gltf.animations; // Array<THREE.AnimationClip>
      gltf.scene; // THREE.Group
      gltf.scenes; // Array<THREE.Group>
      gltf.cameras; // Array<THREE.Camera>
      gltf.asset; // Object
        
    },function ( xhr ) {// called while loading is progressing
      console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
    },function ( error ) {// called when loading has errors
      console.log( 'An error happened' );
    });
  }
}

• promise를 이용한 gltfloader

private glbloader2(props: any) {

    return new Promise((resolve, reject) => {
      const loader = new GLTFLoader();
  
      // const { nodes, materials } = useGLTF("./models/star.glb");
  
      loader.load('/assets/star.glb',  ( glb ) => {
        // this.myModel = glb.scene.children[0];
        const myModel = glb.scene; 
        resolve(myModel);
      }, ( xhr ) => {// called while loading is progressing
        console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
      }, ( error ) => {// called when loading has errors
        console.log( 'An error happened' );
      });
    })
  }

glb.scene 은 Group 형태로 리턴 됩니다. 이것을 바로 사용해도 되고 만약 mesh를 얻고자 하면 glb.scene.children[0] 으로 접근하여 mesh 정보를 얻을 수 있습니다.
물론 mesh 하위로 geometry와 material정보가 들어가게 됩니다.