fix: intersect only objects with events registered. (#714)

* fix: intersect only objects with events registered.

* chore: fix lint

playground/src/pages/events/FpsDropsReproduction.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { TresCanvas } from '@tresjs/core'
+import { Icosahedron, OrbitControls, StatsGl } from '@tresjs/cientos'
+import {
+  AgXToneMapping,
+  PCFSoftShadowMap,
+  SRGBColorSpace,
+} from 'three'
+
+const gl = {
+  shadows: true,
+  physicallyCorrectLights: true,
+  gammaFactor: 2.2,
+  gammaOutput: true,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: AgXToneMapping,
+  toneMappingExposure: 2.2,
+  shadowMapType: PCFSoftShadowMap,
+  powerPreference: 'high-performance',
+  antialias: true,
+}
+</script>
+
+<template>
+  <TresCanvas clear-color="#ccc" v-bind="gl" window-size preset="realistic">
+    <StatsGl />
+    <TresPerspectiveCamera :position="[0, 0, 15]" :args="[45, 1, 0.1, 1000]" />
+    <OrbitControls />
+    <TresDirectionalLight
+      :intensity="0.4"
+      :position="[30, 20, 10]"
+      :color="0xFFFFFF"
+      :bias="-0.0001"
+    />
+    <TresDirectionalLight
+      :intensity="0.4"
+      :position="[-30, -20, 40]"
+      :color="0xFFFFFF"
+      :bias="-0.0001"
+      castShadow
+    />
+    <TresHemisphereLight :intensity="1" :color="0xFFFFFF" :ground-color="0xFFFFFF" />
+    >
+    <Icosahedron :args="[4, 150]" :position="[0, 0, 0]" :rotation="[Math.PI, 0, 0]">
+      <TresMeshNormalMaterial wireframe />
+    </Icosahedron>
+  </TresCanvas>
+</template>

playground/src/router/routes/events.ts

@@ -4,4 +4,9 @@ export const eventsRoutes = [
     name: 'Events',
     component: () => import('../../pages/events/index.vue'),
   },
+  {
+    path: '/events/fps-drops-repro',
+    name: 'FSP Drops Reproduction',
+    component: () => import('../../pages/events/FpsDropsReproduction.vue'),
+  },
 ]

src/composables/useRaycaster/index.ts

@@ -16,6 +16,7 @@ export const useRaycaster = (
   const canvas = computed(() => ctx.renderer.value.domElement as HTMLCanvasElement)
   const intersects: ShallowRef<Intersection[]> = shallowRef([])
   const { x, y } = usePointer({ target: canvas })
+  const objectWihtEvents = computed(() => objects.value.filter(obj => obj.__tres?.eventCount > 0))
   let delta = 0
 
   const { width, height, top, left } = useElementBounding(canvas)
@@ -34,7 +35,7 @@ export const useRaycaster = (
 
     ctx.raycaster.value.setFromCamera(new Vector2(x, y), ctx.camera.value)
 
-    intersects.value = ctx.raycaster.value.intersectObjects(objects.value, true)
+    intersects.value = ctx.raycaster.value.intersectObjects(objectWihtEvents.value, true)
     return intersects.value
   }
 

src/core/nodeOps.ts

@@ -223,7 +223,10 @@ export const nodeOps: () => RendererOptions<TresObject, TresObject | null> = ()
         else { delete node[key] }
         return
       }
-
+      // Has events
+      if (supportedPointerEvents.includes(prop)) {
+        node.__tres.eventCount += 1
+      }
       let finalKey = kebabToCamel(key)
       let target = root?.[finalKey]
 
@@ -268,6 +271,7 @@ export const nodeOps: () => RendererOptions<TresObject, TresObject | null> = ()
       // Set prop, prefer atomic methods if applicable
       if (isFunction(target)) {
         // don't call pointer event callback functions
+
         if (!supportedPointerEvents.includes(prop)) {
           if (Array.isArray(value)) { node[finalKey](...value) }
           else { node[finalKey](value) }