fix: add key to html slot wrapper to force re-render (#258)

Tresjs · Oct 18, 2023 · f7a32e2 · f7a32e2
1 parent 2014dc6
commit f7a32e2
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 530 deletions.
diff --git a/playground/src/pages/misc/HTMLDemo.vue b/playground/src/pages/misc/HTMLDemo.vue
@@ -24,27 +24,28 @@ const state = reactive({
   center: true,
 })
 
-function onOcclude(ev) {
-  console.log('occluded', ev)
-}
+const isActive = ref(false)
 </script>
 
 <template>
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[3, 0, 8]" />
     <OrbitControls />
-    <!-- <Html v-bind="state" transform>
-      <iframe src="https://tresjs.org" frameborder="0" class="web"></iframe>
-    </Html> -->
-    <TresMesh :position="[1, 1, 1]">
+    <TresMesh
+      :position="[1, 1, 1]"
+      @click="isActive = true"
+    >
       <TresBoxGeometry />
       <TresMeshNormalMaterial />
       <Html
         v-bind="state"
         transform
         :occlude="[sphereRef]"
       >
-        <h1 class="bg-white text-xs p-0.5 rounded">
+        <h1
+          class="text-xs p-0.5 rounded"
+          :class="isActive ? 'bg-dark' : 'bg-white'"
+        >
           Box
         </h1>
       </Html>
@@ -58,8 +59,9 @@ function onOcclude(ev) {
       <Html
         v-bind="state"
         transform
+        :position="[0.5, 1, 0]"
       >
-        <h1 class="bg-white text-xs p-0.5 rounded">
+        <h1 class="bg-dark text-white text-xs p-0.5 rounded">
           Sphere
         </h1>
       </Html>