feat: use shallowRef for objects with events

Tresjs · Jul 12, 2024 · 5586a93 · 5586a93
1 parent 197f724
commit 5586a93
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/playground/src/pages/events/DynamicObjects.vue b/playground/src/pages/events/DynamicObjects.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import { TresCanvas } from '@tresjs/core'
-import { Box, OrbitControls, Sphere } from '@tresjs/cientos'
+import { Box, OrbitControls, Sphere, StatsGl } from '@tresjs/cientos'
 
 const hotspots = reactive([
   {
@@ -37,6 +37,9 @@ const shrink = (event) => {
 
 <template>
   <TresCanvas>
+    <Suspense>
+      <StatsGl />
+    </Suspense>
     <OrbitControls />
     <TresPerspectiveCamera />
     <TresAmbientLight :args="['white', 0.5]" />
@@ -46,7 +49,7 @@ const shrink = (event) => {
     <Sphere
       v-for="(hotspot, index) in hotspots"
       :key="index"
-      :args="[0.5, 32, 32]"
+      :args="[0.5, 16, 16]"
       :position="hotspot.position"
       @click="console.log('click', index)"
       @pointer-enter="grow"

diff --git a/playground/src/pages/events/index.vue b/playground/src/pages/events/index.vue
@@ -4,7 +4,7 @@ import type { ThreeEvent } from '@tresjs/core'
 import { TresCanvas } from '@tresjs/core'
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import { TresLeches, useControls } from '@tresjs/leches'
-import { OrbitControls } from '@tresjs/cientos'
+import { OrbitControls, StatsGl } from '@tresjs/cientos'
 import '@tresjs/leches/styles'
 
 const gl = {
@@ -64,6 +64,9 @@ function onPointerMissed(ev: ThreeEvent<MouseEvent>) {
     window-size
     v-bind="gl"
   >
+    <Suspense>
+      <StatsGl />
+    </Suspense>
     <TresPerspectiveCamera
       :position="[11, 11, 11]"
       :look-at="[0, 0, 0]"

diff --git a/src/composables/useTresEventManager/index.ts b/src/composables/useTresEventManager/index.ts
@@ -36,7 +36,7 @@ export function useTresEventManager(
   const hasEvents = (object: TresInstance) => object.__tres?.eventCount > 0
   const hasChildrenWithEvents = (object: TresInstance) => object.children?.some((child: TresInstance) => hasChildrenWithEvents(child)) || hasEvents(object)
   // TODO: Optimize to not hit test on the whole scene
-  const objectsWithEvents = ref((_scene.value?.children as TresInstance[]).filter(hasChildrenWithEvents) || [])
+  const objectsWithEvents = shallowRef((_scene.value?.children as TresInstance[]).filter(hasChildrenWithEvents) || [])
 
   function executeEventListeners(
     listeners: Function | Function[],