Cache OBJ/WRL models globally to prevent duplicate loading

src/hooks/use-global-obj-loader.ts

@@ -27,13 +27,14 @@ export function useGlobalObjLoader(
 
   useEffect(() => {
     if (!url) return
+    if (typeof window === "undefined") return
 
-    const cleanUrl = url.replace(/&cachebust_origin=$/, "")
+    const cleanUrl = url.split("&cachebust_origin=")[0] || url
 
     const cache = window.TSCIRCUIT_OBJ_LOADER_CACHE
-    let hasUrlChanged = false
+    let cancelled = false
 
-    async function loadAndParseObj() {
+    async function loadAndParseObj(): Promise<Object3D | Error> {
       try {
         if (cleanUrl.endsWith(".wrl")) {
           return await loadVrml(cleanUrl)
@@ -45,29 +46,30 @@ export function useGlobalObjLoader(
             `Failed to fetch "${cleanUrl}": ${response.status} ${response.statusText}`,
           )
         }
+
         const text = await response.text()
+        const objLoader = new OBJLoader()
 
         const mtlContentArr = text.match(/newmtl[\s\S]*?endmtl/g)
 
-        const objLoader = new OBJLoader()
-
         if (mtlContentArr?.length) {
           const mtlContent = mtlContentArr.join("\n").replace(/d 0\./g, "d 1.")
+
           const objContent = text
             .replace(/newmtl[\s\S]*?endmtl/g, "")
             .replace(/^mtllib.*/gm, "")
 
           const mtlLoader = new MTLLoader()
-          mtlLoader.setMaterialOptions({
-            invertTrProperty: true,
-          })
+          mtlLoader.setMaterialOptions({ invertTrProperty: true })
+
           const materials = mtlLoader.parse(
             mtlContent.replace(
               /Kd\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)/g,
               "Kd $2 $2 $2",
             ),
             "embedded.mtl",
           )
+
           objLoader.setMaterials(materials)
           return objLoader.parse(objContent)
         }
@@ -78,43 +80,41 @@ export function useGlobalObjLoader(
       }
     }
 
-    function loadUrl() {
+    function loadUrl(): Promise<Object3D | Error> {
       if (cache.has(cleanUrl)) {
-        const cacheItem = cache.get(cleanUrl)!
-        if (cacheItem.result) {
-          // If we have a result, clone it
-          return Promise.resolve(cacheItem.result.clone())
+        const cached = cache.get(cleanUrl)!
+        if (cached.result) {
+          return Promise.resolve(cached.result.clone())
         }
-        // If we're still loading, return the existing promise
-        return cacheItem.promise.then((result) => {
+
+        return cached.promise.then((result) => {
           if (result instanceof Error) return result
           return result.clone()
         })
       }
-      // If it's not in the cache, create a new promise and cache it
+
       const promise = loadAndParseObj().then((result) => {
-        if (result instanceof Error) {
-          // If the result is an Error, return it
-          return result
+        if (!(result instanceof Error)) {
+          cache.set(cleanUrl, { promise, result })
+        } else {
+          // Remove failed entry so future calls can retry
+          cache.delete(cleanUrl)
         }
-        cache.set(cleanUrl, { ...cache.get(cleanUrl)!, result })
         return result
       })
+
       cache.set(cleanUrl, { promise, result: null })
       return promise
     }
 
-    loadUrl()
-      .then((result) => {
-        if (hasUrlChanged) return
+    loadUrl().then((result) => {
+      if (!cancelled) {
         setObj(result)
-      })
-      .catch((error) => {
-        console.error(error)
-      })
+      }
+    })
 
     return () => {
-      hasUrlChanged = true
+      cancelled = true
     }
   }, [url])
 

src/utils/load-model.ts

@@ -4,33 +4,80 @@ import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js"
 import { STLLoader } from "three/examples/jsm/loaders/STLLoader.js"
 import { loadVrml } from "./vrml"
 
+// ✅ Finished model cache
+const modelCache = new Map<string, THREE.Object3D>()
+
+// ✅ In-flight promise cache (prevents duplicate simultaneous loads)
+const loadingPromises = new Map<string, Promise<THREE.Object3D | null>>()
+
 export async function load3DModel(url: string): Promise<THREE.Object3D | null> {
-  if (url.endsWith(".stl")) {
-    const loader = new STLLoader()
-    const geometry = await loader.loadAsync(url)
-    const material = new THREE.MeshStandardMaterial({
-      color: 0x888888,
-      metalness: 0.5,
-      roughness: 0.5,
-    })
-    return new THREE.Mesh(geometry, material)
+  // ✅ Cache HIT (already loaded)
+  if (modelCache.has(url)) {
+    return modelCache.get(url)!.clone()
   }
 
-  if (url.endsWith(".obj")) {
-    const loader = new OBJLoader()
-    return await loader.loadAsync(url)
+  // ✅ Already loading → await same promise
+  if (loadingPromises.has(url)) {
+    const result = await loadingPromises.get(url)!
+    return result ? result.clone() : null
   }
 
-  if (url.endsWith(".wrl")) {
-    return await loadVrml(url)
-  }
+  // ✅ Start new load and store promise immediately
+  const promise = (async (): Promise<THREE.Object3D | null> => {
+    try {
+      // STL
+      if (url.endsWith(".stl")) {
+        const loader = new STLLoader()
+        const geometry = await loader.loadAsync(url)
+
+        const material = new THREE.MeshStandardMaterial({
+          color: 0x888888,
+          metalness: 0.5,
+          roughness: 0.5,
+        })
+
+        return new THREE.Mesh(geometry, material)
+      }
+
+      // OBJ
+      if (url.endsWith(".obj")) {
+        const loader = new OBJLoader()
+        return await loader.loadAsync(url)
+      }
+
+      // WRL
+      if (url.endsWith(".wrl")) {
+        return await loadVrml(url)
+      }
+
+      // GLTF / GLB
+      if (url.endsWith(".gltf") || url.endsWith(".glb")) {
+        const loader = new GLTFLoader()
+        const gltf = await loader.loadAsync(url)
+        return gltf.scene
+      }
+
+      console.error("Unsupported file format:", url)
+      return null
+    } catch (err) {
+      console.error("Failed to load model:", url, err)
+      return null
+    }
+  })()
+
+  loadingPromises.set(url, promise)
+
+  // Await load result
+  const result = await promise
+
+  // Remove promise after completion
+  loadingPromises.delete(url)
 
-  if (url.endsWith(".gltf") || url.endsWith(".glb")) {
-    const loader = new GLTFLoader()
-    const gltf = await loader.loadAsync(url)
-    return gltf.scene
+  // Store successful result in final cache
+  if (result) {
+    modelCache.set(url, result)
+    return result.clone()
   }
 
-  console.error("Unsupported file format or failed to load 3D model.")
   return null
 }