feat(core): performance improvement concerning raycaster (#139)

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/index.vue

@@ -1,7 +1,5 @@
-<script setup lang="ts">
-
-</script>
+<script setup lang="ts"></script>
 <template>
-    <router-link to="/shapes">Shapes</router-link>
-<TheBasic />
-</template>
+  <!-- <router-link to="/shapes">Shapes</router-link> -->
+  <TheEvents />
+</template>

playground/src/pages/shapes.vue

@@ -83,7 +83,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" />
 
     <OrbitControls />

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,17 +50,19 @@ 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()
     const { setState } = useTres()
 
     setState('scene', scene)
+    setState('canvas', canvas)
 
     onUnmounted(() => {
       setState('renderer', null)
     })
-    
+
     function initRenderer() {
       const { renderer } = useRenderer(canvas, container, props)
 
@@ -70,14 +72,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 +104,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 +114,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,7 @@
-import { Raycaster, Vector2 } from 'three'
-import { Ref, ref, ShallowRef, shallowRef } from 'vue'
 import { useTres } from '/@/composables'
+import { MaybeElementRef, unrefElement } from '@vueuse/core'
+import { Raycaster, Vector2 } from 'three'
+import { onUnmounted, Ref, ref, ShallowRef, shallowRef, watchEffect } from 'vue'
 
 const raycaster = shallowRef(new Raycaster())
 const pointer = ref(new Vector2())
@@ -47,9 +48,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 {