feat: disposal util for manual disposal of objects

playground/src/pages/perf/AkuAku.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { dispose } from '@tresjs/core'
 import { useGLTF } from '@tresjs/cientos'
-import { useControls } from '@tresjs/leches'
 
 const { nodes } = await useGLTF(
   'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf',
@@ -9,38 +9,12 @@ const { nodes } = await useGLTF(
 
 const model = nodes.AkuAku
 
-/* useControls({
-  button: {
-    label: 'Manual dispose',
-    type: 'button',
-    onClick() {
-      disposeModel()
-    },
-  },
-}) */
-
 function disposeModel() {
-  console.log('disposingModel')
-  model.traverse((child) => {
-    if (child.isMesh) {
-      // Dispose of the material
-      if (child.material) {
-        child.material.dispose()
-      }
-        
-      // Dispose of the geometry
-      if (child.geometry) {
-        child.geometry.dispose()
-      }
-    }
-  })
-  console.log('disposingModel Finished')
+  dispose(model)
 }
 
-model.traverse((child) => {
-  if (child.material) {
-    console.log('child.material', child.material.uuid)
-  }
+onUnmounted(() => {
+  disposeModel()
 })
 </script>
 

playground/src/pages/perf/index.vue

@@ -18,8 +18,8 @@ const gl = {
 
 const router = useRouter()
 
-const { sphere } = useControls({
-  sphere: true,
+const { isShown } = useControls({
+  isShown: true,
 })
 
 const ctx = ref(null)
@@ -51,15 +51,23 @@ useControls({
     <TresPerspectiveCamera :position="[3, 3, 3]" />
     <OrbitControls />
     <Suspense> 
-      <AkuAku v-if="sphere" />
+      <AkuAku v-if="isShown" />
     </Suspense>
-    <!--  <TresMesh
-      v-if="sphere.value"
-      :position="[0, 0, 0]"
-    >
-      <TresSphereGeometry />
-      <TresMeshStandardMaterial color="teal" />
-    </TresMesh> -->
+    <!--     <TresGroup v-if="isShown">
+      <TresMesh
+        :position="[0, 0, 0]"
+      >
+        <TresSphereGeometry />
+        <TresMeshToonMaterial color="teal" />
+      </TresMesh>
+      <TresMesh
+       
+        :position="[2, 0, 0]"
+      >
+        <TresSphereGeometry />
+        <TresMeshToonMaterial color="pink" />
+      </TresMesh>
+    </TresGroup> -->
     <TresAmbientLight :intensity="1" />
   </TresCanvas>
 </template>

src/index.ts

@@ -1,6 +1,7 @@
 import type { App } from 'vue'
 import TresCanvas from './components/TresCanvas.vue'
 import { normalizeColor, normalizeVectorFlexibleParam } from './utils/normalize'
+import { dispose } from './utils/'
 import templateCompilerOptions from './utils/template-compiler-options'
 
 export * from './composables'
@@ -29,4 +30,5 @@ export {
   normalizeColor,
   normalizeVectorFlexibleParam,
   templateCompilerOptions,
+  dispose,
 }

src/utils/index.ts

@@ -127,3 +127,12 @@ export function deepArrayEqual(arr1: any[], arr2: any[]): boolean {
  * TypeSafe version of Array.isArray
  */
 export const isArray = Array.isArray as (a: any) => a is any[] | readonly any[]
+
+// Disposes an object and all its properties
+export function dispose<TresObj extends { dispose?: () => void; type?: string; [key: string]: any }>(obj: TresObj) {
+  if (obj.dispose && obj.type !== 'Scene') obj.dispose()
+  for (const p in obj) {
+    ;(p as any).dispose?.()
+    delete obj[p]
+  }
+}