clean up

packages/website/src/hooks/useArmor.ts

@@ -1,23 +1,19 @@
-import { asset } from '@blitzkit/core';
-import { type ObjectMap, useLoader } from '@react-three/fiber';
-import { type GLTF, GLTFLoader } from 'three-stdlib';
-
-const cache: Record<
-  number,
-  { gltf: GLTF & ObjectMap; hasDynamicArmor: boolean }
-> = {};
+import { asset } from "@blitzkit/core";
+import { useLoader } from "@react-three/fiber";
+import { GLTFLoader } from "three-stdlib";
+import { useDispose } from "./useDispose";
 
 export function useArmor(id: number) {
-  const gltf = useLoader(GLTFLoader, asset(`3d/tanks/armor/${id}.glb`));
+  const path = asset(`3d/tanks/armor/${id}.glb`);
+  const gltf = useLoader(GLTFLoader, path);
 
-  if (!cache[id]) {
-    cache[id] = {
-      gltf,
-      hasDynamicArmor: Object.values(gltf.nodes).some(
-        (node) =>
-          node.name.includes('state_00') || node.name.includes('state_01'),
-      ),
-    };
-  }
-  return cache[id];
+  useDispose(gltf, path);
+
+  return {
+    gltf,
+    hasDynamicArmor: Object.values(gltf.nodes).some(
+      (node) =>
+        node.name.includes("state_00") || node.name.includes("state_01"),
+    ),
+  };
 }

packages/website/src/hooks/useDispose.ts

@@ -0,0 +1,50 @@
+import { useLoader, type ObjectMap } from "@react-three/fiber";
+import { useEffect } from "react";
+import { Cache, Group, Mesh, MeshStandardMaterial, Object3D } from "three";
+import { GLTFLoader, type GLTF } from "three-stdlib";
+
+export function useDispose(gltf: GLTF & ObjectMap, path: string) {
+  useEffect(() => {
+    return () => {
+      gltf.scene.traverse((object) => {
+        if (object instanceof Mesh) {
+          if (object.material instanceof MeshStandardMaterial) {
+            const maps = [
+              object.material.map,
+              object.material.aoMap,
+              object.material.envMap,
+              object.material.bumpMap,
+              object.material.alphaMap,
+              object.material.lightMap,
+              object.material.normalMap,
+              object.material.emissiveMap,
+              object.material.roughnessMap,
+              object.material.metalnessMap,
+              object.material.displacementMap,
+            ];
+
+            for (const map of maps) {
+              if (!map) continue;
+
+              map.source.data.close();
+              map.dispose();
+            }
+
+            object.material.dispose();
+          } else {
+            throw new TypeError(
+              `Unexpected material type: ${object.material.type}`,
+            );
+          }
+        } else if (object instanceof Group || object instanceof Object3D) {
+          // traverse will get children
+        } else {
+          throw new TypeError(`Unexpected object type: ${object}`);
+        }
+      });
+
+      useLoader.clear(GLTFLoader, path);
+      Cache.remove(path);
+    };
+  }, [gltf, path]);
+}

packages/website/src/hooks/useModel.ts

@@ -1,10 +1,14 @@
 import { asset } from "@blitzkit/core";
-import { type ObjectMap, useLoader } from "@react-three/fiber";
+import { useLoader } from "@react-three/fiber";
 import { Mesh, MeshStandardMaterial } from "three";
-import { type GLTF, GLTFLoader } from "three-stdlib";
+import { GLTFLoader } from "three-stdlib";
+import { useDispose } from "./useDispose";
 
 export function useModel(id: number) {
-  const gltf = useLoader(GLTFLoader, asset(`3d/tanks/models/${id}.glb`));
+  const path = asset(`3d/tanks/models/${id}.glb`);
+  const gltf = useLoader(GLTFLoader, path);
+
+  useDispose(gltf, path);
 
   return {
     gltf,
@@ -12,7 +16,7 @@ export function useModel(id: number) {
       (node) =>
         node instanceof Mesh &&
         node.material instanceof MeshStandardMaterial &&
-        node.material.roughnessMap !== null
+        node.material.roughnessMap !== null,
     ),
   };
 }