fix: remove wrapper element on unmounted (#310)

Tresjs · Dec 13, 2023 · 1a37c92 · 1a37c92
1 parent 27ce1f0
commit 1a37c92
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/playground/src/pages/misc/HTMLDemo.vue b/playground/src/pages/misc/HTMLDemo.vue
@@ -2,7 +2,7 @@
 import { ref, reactive } from 'vue'
 import { TresCanvas } from '@tresjs/core'
 import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
-
+import { TresLeches, useControls } from '@tresjs/leches'
 import '@tresjs/leches/styles'
 import { OrbitControls, Html } from '@tresjs/cientos'
 import Card from './Card.vue'
@@ -26,9 +26,13 @@ const state = reactive({
 })
 
 const isActive = ref(false)
+const { showHtml } = useControls({
+  showHtml: false,
+})
 </script>
 
 <template>
+  <TresLeches />
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[3, 0, 8]" />
     <OrbitControls />
@@ -39,6 +43,7 @@ const isActive = ref(false)
       <TresBoxGeometry />
       <TresMeshNormalMaterial />
       <Html
+        v-if="showHtml"
         v-bind="state"
         transform
         :occlude="[sphereRef]"

diff --git a/src/core/misc/html/HTML.vue b/src/core/misc/html/HTML.vue
@@ -403,6 +403,7 @@ onUnmounted(() => {
   if (shaderMaterial.value) {
     shaderMaterial.value.dispose()
   }
+  el.value.remove()
 })
 </script>