feat(assets): load 3d models as well

app/composables/useAssets.ts.in

@@ -1,4 +1,8 @@
+import * as THREE from "three";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+
 const imageCache = new Map<string, HTMLImageElement>();
+const modelCache = new Map<string, THREE.Group>();
 
 const loaded = ref(0);
 const total = ref({{TOTAL}});
@@ -22,6 +26,34 @@ const createImage = (path: string) => {
   return img;
 };
 
+const createModel = (path: string) => {
+  const cached = modelCache.get(path);
+  if (cached) {
+    return cached;
+  }
+
+  const model = new THREE.Group();
+  modelCache.set(path, model);
+
+  new GLTFLoader().load(
+    path,
+    (gltf) => {
+      for (const child of [...gltf.scene.children]) {
+        model.add(child);
+      }
+
+      loaded.value += 1;
+    },
+    undefined,
+    (error) => {
+      console.error(`Error loading model ${path}:`, error);
+      loaded.value += 1;
+    }
+  );
+
+  return model;
+};
+
 const assets = {{ASSETS}};
 
 export const useAssets = () => {