feature: add local props

playground/src/pages/abstractions/MouseParallaxDemo.vue

@@ -27,4 +27,17 @@ const gl = {
     <MouseParallax :factor="3" />
     <TresAmbientLight :intensity="1" />
   </TresCanvas>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera
+      :position="[0, 0, 7.5]"
+      :fov="75"
+      :near="0.1"
+      :far="1000"
+    />
+    <TorusKnot>
+      <TresMeshNormalMaterial />
+    </TorusKnot>
+    <MouseParallax :factor="3" local />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
 </template>

src/core/abstractions/MouseParallax.vue

@@ -2,7 +2,8 @@
 import { computed, ref, toRefs, watch } from 'vue'
 import type { Group } from 'three'
 import { useRenderLoop, useTresContext } from '@tresjs/core'
-import { useMouse, useWindowSize } from '@vueuse/core'
+import { useElementSize, useMouse, useWindowSize } from '@vueuse/core'
+import type { UseMouseOptions } from '@vueuse/core'
 
 export interface MouseParallaxProps {
   /**
@@ -29,20 +30,38 @@ export interface MouseParallaxProps {
    *
    */
   ease?: number
+  /**
+   * Whether to apply the parallax effect to the local canvas.
+   * @type {boolean}
+   * @default false
+   * @memberof MouseParallaxProps
+   *
+   */
+  local?: boolean
 }
 
 const props = withDefaults(defineProps<MouseParallaxProps>(), {
   disabled: false,
   factor: 2.5,
   ease: 0.1,
+  local: false,
 })
 
-const { camera } = useTresContext()
+const { camera, renderer } = useTresContext()
+
+const { disabled, factor, ease, local } = toRefs(props)
 
-const { disabled, factor, ease } = toRefs(props)
+const mouseOptions: UseMouseOptions = {}
+
+if (local.value) {
+  mouseOptions.target = renderer.value.domElement
+  mouseOptions.type = 'client'
+}
 
-const { x, y } = useMouse()
-const { width, height } = useWindowSize()
+const { x, y } = useMouse(mouseOptions)
+const { width, height } = local.value
+  ? useElementSize(renderer.value.domElement)
+  : useWindowSize()
 
 const cameraGroupRef = ref<Group>()
 
@@ -52,9 +71,18 @@ const cursorY = computed(() => -(y.value / height.value - 0.5) * factor.value)
 const { onLoop } = useRenderLoop()
 
 onLoop(({ delta }) => {
-  if (disabled.value || !cameraGroupRef.value) { return }
-  cameraGroupRef.value.position.x += (cursorX.value - cameraGroupRef.value.position.x) * ease.value * delta
-  cameraGroupRef.value.position.y += (cursorY.value - cameraGroupRef.value.position.y) * ease.value * delta
+  if (
+    disabled.value
+    || !cameraGroupRef.value
+    || Number.isNaN(cursorX.value)
+    || Number.isNaN(cursorY.value)
+  ) {
+    return
+  }
+  cameraGroupRef.value.position.x
+    += (cursorX.value - cameraGroupRef.value.position.x) * ease.value * delta
+  cameraGroupRef.value.position.y
+    += (cursorY.value - cameraGroupRef.value.position.y) * ease.value * delta
 })
 
 watch(