feature: first try concerning conditional rendering of components

playground/components.d.ts

@@ -23,6 +23,7 @@ declare module '@vue/runtime-core' {
     TestSphere: typeof import('./src/components/TestSphere.vue')['default']
     Text3D: typeof import('./src/components/Text3D.vue')['default']
     TheBasic: typeof import('./src/components/TheBasic.vue')['default']
+    TheConditional: typeof import('./src/components/TheConditional.vue')['default']
     TheEnvironment: typeof import('./src/components/TheEnvironment.vue')['default']
     TheEvents: typeof import('./src/components/TheEvents.vue')['default']
     TheExperience: typeof import('./src/components/TheExperience.vue')['default']

playground/src/components/TheConditional.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { BasicShadowMap, NoToneMapping, sRGBEncoding } from 'three'
+import { reactive } from 'vue'
+import { OrbitControls, useTweakPane } from '@tresjs/cientos'
+import { TresCanvas } from '/@/'
+
+const state = reactive({
+  clearColor: '#201919',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputEncoding: sRGBEncoding,
+  toneMapping: NoToneMapping,
+})
+
+const paneElements = reactive({
+  boxVisible: true,
+  groupVisible: true,
+})
+
+const { pane } = useTweakPane()
+
+pane.addInput(paneElements, 'boxVisible')
+pane.addInput(paneElements, 'groupVisible')
+</script>
+
+<template>
+  <TresCanvas v-bind="state">
+    <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
+
+    <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.2" cast-shadow />
+    <TresMesh v-if="paneElements.boxVisible" :position="[0, 0, 0]">
+      <TresBoxGeometry :args="[1, 1, 1]" />
+      <TresMeshToonMaterial color="#efefef" />
+    </TresMesh>
+
+    <TresGroup v-if="paneElements.groupVisible" :position="[0, -4, -5]">
+      <TresMesh :position="[0, 0, 0]">
+        <TresBoxGeometry :args="[1, 1, 1]" />
+        <TresMeshToonMaterial color="#efef11" />
+      </TresMesh>
+    </TresGroup>
+    <OrbitControls></OrbitControls>
+    <TresAmbientLight :intensity="0.5" />
+  </TresCanvas>
+</template>

playground/src/pages/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts"></script>
 <template>
   <Suspense>
-    <MultipleCanvas />
+    <TheConditional />
   </Suspense>
 </template>

src/composables/useRenderer/index.ts

@@ -255,6 +255,8 @@ You could set windowSize=true to force the canvas to be the size of the window.`
     { immediate: true, deep: true },
   )
 
+  setInterval(() => console.log(renderer.value?.info.memory), 3000) // TODO remove
+
   return {
     renderer,
     isReady,

src/core/nodeOps.ts

@@ -112,10 +112,22 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
   },
   remove(node) {
     if (!node) return
-    const parent = node.parentNode
+
+    const parent = node.parentNode // TODO is there ever a case when this is true? which entity has a fn called removeChild?
+
     if (parent) {
       parent.removeChild(node)
     }
+
+    node.removeFromParent?.()
+
+    // TODO how to handle groups?
+    node.material?.dispose() // TODO probably disposes material also when passed via prop
+    node.geometry?.dispose()
+
+    //TODO traverse children and dispose them too
+
+    node.dispose?.()
   },
   patchProp(node, prop, _prevValue, nextValue) {
     if (node) {