Merge pull request #182 from Tresjs/139-raycaster-only-check-for-intersections-when-pointer-moves-or-on-click-events

feat: 139 raycaster only check for intersections when pointer moves or on click events

package.json

@@ -40,7 +40,7 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "playground": "cd playground && nr dev",
+    "playground": "cd playground && npm run dev",
     "test": "vitest",
     "test:ci": "vitest run",
     "test:ui": "vitest --ui",

playground/src/components/TheEvents.vue

@@ -2,6 +2,7 @@
 import { BasicShadowMap, NoToneMapping, sRGBEncoding } from 'three'
 import { reactive } from 'vue'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '/@/'
 
 const state = reactive({
   clearColor: '#201919',
@@ -19,7 +20,6 @@ function onClick(ev) {
 }
 
 function onPointerEnter(ev) {
-  console.log(ev)
   if (ev) {
     ev.object.material.color.set('#DFFF45')
   }

playground/src/pages/shapes.vue

@@ -82,7 +82,7 @@ const tubePath = new CubicBezierCurve3(
 </script>
 
 <template>
-  <TresCanvas v-bind="state" >
+  <TresCanvas v-bind="state">
     <TresPerspectiveCamera :position="[5, 5, 5]" :fov="75" :aspect="1" :near="0.1" :far="1000" />
 
     <TresAmbientLight :color="0xffffff" :intensity="1" />

src/components/TresCanvas.ts

@@ -1,4 +1,4 @@
-import { App, defineComponent, h, onUnmounted, ref, watch } from 'vue'
+import { App, defineComponent, h, onUnmounted, ref, watch, watchEffect } from 'vue'
 import * as THREE from 'three'
 import { ShadowMapType, TextureEncoding, ToneMapping } from 'three'
 import { createTres } from '/@/core/renderer'
@@ -50,6 +50,7 @@ export const TresCanvas = defineComponent<TresCanvasProps>({
     if (props.physicallyCorrectLights === true) {
       logWarning('physicallyCorrectLights is deprecated, useLegacyLights is now false by default')
     }
+
     const container = ref<HTMLElement>()
     const canvas = ref<HTMLCanvasElement>()
     const scene = new THREE.Scene()
@@ -60,7 +61,7 @@ export const TresCanvas = defineComponent<TresCanvasProps>({
     onUnmounted(() => {
       setState('renderer', null)
     })
-    
+
     function initRenderer() {
       const { renderer } = useRenderer(canvas, container, props)
 
@@ -70,14 +71,13 @@ export const TresCanvas = defineComponent<TresCanvasProps>({
 
       const { raycaster, pointer } = useRaycaster()
 
-      onLoop(() => {
-        if (!activeCamera.value) return
-
-        raycaster.value.setFromCamera(pointer.value, activeCamera.value)
-        renderer.value?.render(scene, activeCamera.value)
+      watchEffect(() => {
+        if (activeCamera.value) raycaster.value.setFromCamera(pointer.value, activeCamera.value)
       })
 
-     
+      onLoop(() => {
+        if (activeCamera.value) renderer.value?.render(scene, activeCamera.value)
+      })
     }
 
     watch(canvas, initRenderer)
@@ -103,7 +103,7 @@ export const TresCanvas = defineComponent<TresCanvasProps>({
     }
 
     if (import.meta.hot) {
-      import.meta.hot.on('vite:afterUpdate',dispose)
+      import.meta.hot.on('vite:afterUpdate', dispose)
     }
 
     return () => {
@@ -113,7 +113,7 @@ export const TresCanvas = defineComponent<TresCanvasProps>({
           {
             ref: container,
             'data-scene': scene.uuid,
-            key:  scene.uuid,
+            key: scene.uuid,
             style: {
               position: 'relative',
               width: '100%',

src/composables/useRaycaster/index.ts

@@ -1,6 +1,6 @@
+import { useTres } from '/@/composables'
 import { Raycaster, Vector2 } from 'three'
 import { Ref, ref, ShallowRef, shallowRef } from 'vue'
-import { useTres } from '/@/composables'
 
 const raycaster = shallowRef(new Raycaster())
 const pointer = ref(new Vector2())
@@ -47,9 +47,9 @@ export function useRaycaster(): UseRaycasterReturn {
     pointer.value.y = -(event.clientY / window.innerHeight) * 2 + 1
   }
 
-  window.addEventListener('pointermove', onPointerMove)
+  window.addEventListener('pointermove', onPointerMove) //TODO listener should be on canvas
 
-  /*  onUnmounted(() => {
+  /*  onUnmounted(() => { TODO
     window.removeEventListener('pointermove', onPointerMove)
   }) */
   return {