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

[JaimeTorrealba]

Small PR for improving the mouse-parallax component

v4 branch is selected

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[andretchen0]

Hey @JaimeTorrealba . Welcome back! This is a useful change!

[andretchen0]

Wording:

I'm guessing "ej." is for "ejemplo", right?

I think here we'd write, "in other words" or "that is to say" or "i.e.". Or maybe just leave it out altogether:

This could be an array of two values corresponding to the x and y values, in that order: `:factor=[x,y]`.

[andretchen0]

Wording:

Same as above. Maybe omit the "ej.":

This could be an array of two values corresponding to the x and y values, in that order: `:ease=[x,y]`.

[andretchen0]

We sometimes have issues in Tres caused by comments.

Since handling comments isn't what this playground is showing, can we remove this comment?

[andretchen0]

It seems that the props factor and ease aren't reactive.

_factor and _ease will need a watch or some other way to detect prop changes. Or you could add a ternary here:

const cursorX = computed(() => (x.value / width.value - 0.5) * _factor[0])

Here's a demo showing that. This should alternate between zooming around with a value of [10, 10] and stopping with 0.

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { MouseParallax, TorusKnot } from '@tresjs/cientos'

const factorOrFactors = shallowRef<number | [number, number]>([10, 10])
setInterval(() => {
  factorOrFactors.value = factorOrFactors.value === 0 ? [10, 10] : 0
},
  1000
)
</script>

<template>
  <TresCanvas>
    <TresPerspectiveCamera :position="[0, 0, 7.5]" />
    <TorusKnot>
      <TresMeshNormalMaterial />
    </TorusKnot>
    <MouseParallax :factor="factorOrFactors" :ease="3" />
  </TresCanvas>
</template>

[JaimeTorrealba]

Good one, yes I've destroyed the reactivity with my last update, thanks for this one

[andretchen0]

Looks good!

I caught one thing that wasn't changed in this PR, but since we're looking at component, we might as well change it.

I won't block the PR though.

[andretchen0]

(Non-blocking)

Sorry, I missed this earlier. This should probably be a shallowRef.

shallowRef() is typically used for performance optimizations of large data structures, or integration with external state management systems.

https://vuejs.org/api/reactivity-advanced.html#shallowref

Since all Tres elements have a link to context – which includes Scene and all its descendants – it probably qualifies as a "large data structure."