feat(cientos): local mouseparallax

docs/guide/abstractions/mouse-parallax.md

@@ -12,12 +12,15 @@ You only need to import it and add it to your template as `<MouseParallax />`. A
 
 `factor` is a number to increase the movement range of the camera. `ease` is a number that smoothes the movement. You can also disable the effect with the `disabled` prop.
 
+`local` is a boolean that enables movement based on the position of the mouse on the element rather than the window.
+
 <<< @/.vitepress/theme/components/MouseParallaxDemo.vue{3,15-18}
 
 ## Props
 
-| Prop         | Description                                             | Default |
-| :----------- | :------------------------------------------------------ | ------- |
-| **disabled** | Enable or disable the effect                            | false   |
-| **factor**   | Increase the range of the parallax                      | 2.5     |
-| **ease**     | Increase the camera movement speed                      | 0.1     |
+| Prop         | Description                                                                 | Default |
+| :----------- | :-------------------------------------------------------------------------- | ------- |
+| **disabled** | Enable or disable the effect                                                | false   |
+| **factor**   | Increase the range of the parallax                                          | 2.5     |
+| **ease**     | Increase the camera movement speed                                          | 0.1     |
+| **local**    | Whether the mouse coordinates are calculated from the element or the window | false   |

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 {
   /**
@@ -22,27 +23,45 @@ export interface MouseParallaxProps {
    */
   factor?: number
   /**
-   * The factor to multiply the mouse movement by.
+   * The factor to smooth the mouse movement by.
    * @type {number}
    * @default 2.5
    * @memberof 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(