fix: GLTFLoader의 로딩 추적에 LoadingManager 인스턴스 사용

src/three/loader.ts

@@ -1,4 +1,4 @@
-import { Mesh, Scene } from 'three';
+import { LoadingManager, Mesh, Scene } from 'three';
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 import { applyMaterials } from './materials';
 
@@ -8,23 +8,25 @@ export const loadModel = (
   onProgress?: (progress: number) => void,
   onLoad?: () => void
 ): void => {
-  const loader = new GLTFLoader();
-  loader.load(
-    url,
-    (gltf) => {
-      gltf.scene.traverse((child) => {
-        if (child instanceof Mesh) {
-          applyMaterials(child);
-        }
-      });
-      scene.add(gltf.scene);
-      onLoad?.();
-    },
-    (progress) => {
-      onProgress?.((progress.loaded / progress.total) * 100);
-    },
-    (error) => {
-      console.error('An error happened', error);
-    }
-  );
+  const manager = new LoadingManager();
+  manager.onProgress = (_url, itemsLoaded, itemsTotal) => {
+    onProgress?.((itemsLoaded / itemsTotal) * 100);
+  };
+  manager.onLoad = () => {
+    onLoad?.();
+  };
+  manager.onError = (error) => {
+    console.error('An error happened', error);
+  };
+
+  const loader = new GLTFLoader(manager);
+  loader.load(url, (gltf) => {
+    gltf.scene.traverse((child) => {
+      if (child instanceof Mesh) {
+        applyMaterials(child);
+      }
+    });
+    scene.add(gltf.scene);
+    onLoad?.();
+  });
 };