feat(app): Add the option for x and y in mouseparallax component (#444)

* feat(app): Add the option for x and y in mouseparallax component

* fix reactivity, grammar corrections

* change ref for shallowRef

docs/.vitepress/theme/components/MouseParallaxDemo.vue

@@ -14,7 +14,7 @@ import { MouseParallax, TorusKnot } from '@tresjs/cientos'
     </TorusKnot>
     <MouseParallax
       :factor="5"
-      :ease="3"
+      :ease="[3, 0.1]"
     />
   </TresCanvas>
 </template>

docs/guide/abstractions/mouse-parallax.md

@@ -10,9 +10,11 @@
 
 You only need to import it and add it to your template as `<MouseParallax />`. Additionally, you can pass the following props:
 
-`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.
+`factor` is a number to increase the movement range of the camera. This could be an array of two values corresponding to the x and y values, in that order: `:factor=[x,y]`.
 
-`local` is a boolean that enables movement based on the position of the mouse on the element rather than the window.
+`ease` is a number that smooths the movement. This could be an array of two values corresponding to the x and y values, in that order: `:ease=[x,y]`.
+
+`local` is a boolean that enables movement based on the position of the mouse on the canvas rather than the window.
 
 <<< @/.vitepress/theme/components/MouseParallaxDemo.vue{3,15-18}
 

playground/src/pages/abstractions/MouseParallaxDemo.vue

@@ -17,27 +17,11 @@ const gl = {
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera
       :position="[0, 0, 7.5]"
-      :fov="75"
-      :near="0.1"
-      :far="1000"
     />
     <TorusKnot>
       <TresMeshNormalMaterial />
     </TorusKnot>
-    <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 />
+    <MouseParallax :factor="[3, 15]" :ease="[3, 0.5]" />
     <TresAmbientLight :intensity="1" />
   </TresCanvas>
 </template>

src/core/abstractions/MouseParallax.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, toRefs, watch } from 'vue'
+import { computed, ref, shallowRef, toRefs, watch } from 'vue'
 import type { Group } from 'three'
 import { useLoop, useTresContext } from '@tresjs/core'
 import { useElementSize, useMouse, useWindowSize } from '@vueuse/core'
@@ -17,20 +17,20 @@ export interface MouseParallaxProps {
   disabled?: boolean
   /**
    * The factor to multiply the mouse movement by.
-   * @type {number}
+   * @type {number | [number, number]}
    * @default 2.5
    * @memberof MouseParallaxProps
    *
    */
-  factor?: number
+  factor?: number | [number, number]
   /**
    * The factor to smooth the mouse movement by.
-   * @type {number}
+   * @type {number | [number, number]}
    * @default 2.5
    * @memberof MouseParallaxProps
    *
    */
-  ease?: number
+  ease?: number | [number, number]
   /**
    * Whether to apply the parallax effect to the local canvas.
    * @type {boolean}
@@ -66,14 +66,25 @@ const { width, height } = local.value
   ? useElementSize(renderer.value.domElement)
   : useWindowSize()
 
-const cameraGroupRef = ref<Group>()
+const cameraGroupRef = shallowRef<Group>()
+const _factor = ref()
+const _ease = ref()
 
-const cursorX = computed(() => (x.value / width.value - 0.5) * factor.value)
-const cursorY = computed(() => -(y.value / height.value - 0.5) * factor.value)
+watch(
+  [factor, ease],
+  () => {
+    _factor.value = Array.isArray(factor.value) ? factor.value : [factor.value, factor.value]
+    _ease.value = Array.isArray(ease.value) ? ease.value : [ease.value, ease.value]
+  },
+  { immediate: true },
+)
+
+const cursorX = computed(() => (x.value / width.value - 0.5) * _factor.value[0])
+const cursorY = computed(() => -(y.value / height.value - 0.5) * _factor.value[1])
 
 const { onBeforeRender } = useLoop()
 
-onBeforeRender(({ delta }) => {
+onBeforeRender(({ delta }: { delta: number }) => {
   if (
     disabled.value
     || !cameraGroupRef.value
@@ -83,9 +94,9 @@ onBeforeRender(({ delta }) => {
     return
   }
   cameraGroupRef.value.position.x
-    += (cursorX.value - cameraGroupRef.value.position.x) * ease.value * delta
+    += (cursorX.value - cameraGroupRef.value.position.x) * _ease.value[0] * delta
   cameraGroupRef.value.position.y
-    += (cursorY.value - cameraGroupRef.value.position.y) * ease.value * delta
+    += (cursorY.value - cameraGroupRef.value.position.y) * _ease.value[1] * delta
 
   invalidateOnDemand()
 })