Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 5 commits into from
Jul 17, 2024
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d7b6c50
feat(app): Add the option for x and y in mouseparallax component
JaimeTorrealba Jul 10, 2024
e5198cb
fix reactivity, grammar corrections
JaimeTorrealba Jul 11, 2024
ffe0eba
change ref for shallowRef
JaimeTorrealba Jul 16, 2024
a58e1bb
Merge remote-tracking branch 'origin/v4' into feat/add-xy-mouseparallax
JaimeTorrealba Jul 16, 2024
7187a01
Merge remote-tracking branch 'origin/v4' into feat/add-xy-mouseparallax
JaimeTorrealba Jul 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/.vitepress/theme/components/MouseParallaxDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { MouseParallax, TorusKnot } from '@tresjs/cientos'
</TorusKnot>
<MouseParallax
:factor="5"
:ease="3"
:ease="[3, 0.1]"
/>
</TresCanvas>
</template>
6 changes: 4 additions & 2 deletions docs/guide/abstractions/mouse-parallax.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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, ej. `:factor=[x,y]` .
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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]`.


`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, ej. `:ease=[x,y]` .
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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]`.


`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}

Expand Down
6 changes: 3 additions & 3 deletions playground/src/pages/abstractions/MouseParallaxDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@ const gl = {
<TorusKnot>
<TresMeshNormalMaterial />
</TorusKnot>
<MouseParallax :factor="3" />
<MouseParallax :factor="[30, 15]" :ease="[3, 0.1]" />
<TresAmbientLight :intensity="1" />
</TresCanvas>
<TresCanvas v-bind="gl">
<!-- <TresCanvas v-bind="gl">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We sometimes have issues in Tres caused by comments.

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

<TresPerspectiveCamera
:position="[0, 0, 7.5]"
:fov="75"
Expand All @@ -39,5 +39,5 @@ const gl = {
</TorusKnot>
<MouseParallax :factor="3" local />
<TresAmbientLight :intensity="1" />
</TresCanvas>
</TresCanvas> -->
</template>
17 changes: 10 additions & 7 deletions src/core/abstractions/MouseParallax.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,15 @@ export interface MouseParallaxProps {
* @memberof MouseParallaxProps
*
*/
factor?: number
factor?: number | [number, number]
andretchen0 marked this conversation as resolved.
Show resolved Hide resolved
/**
* The factor to smooth the mouse movement by.
* @type {number}
* @default 2.5
* @memberof MouseParallaxProps
*
*/
ease?: number
ease?: number | [number, number]
andretchen0 marked this conversation as resolved.
Show resolved Hide resolved
/**
* Whether to apply the parallax effect to the local canvas.
* @type {boolean}
Expand Down Expand Up @@ -65,12 +65,15 @@ const { width, height } = local.value

const cameraGroupRef = ref<Group>()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(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."


const cursorX = computed(() => (x.value / width.value - 0.5) * factor.value)
const cursorY = computed(() => -(y.value / height.value - 0.5) * factor.value)
const _factor = Array.isArray(factor.value) ? factor.value : [factor.value, factor.value]
const _ease = Array.isArray(ease.value) ? ease.value : [ease.value, ease.value]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>

Copy link
Member Author

@JaimeTorrealba JaimeTorrealba Jul 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


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

const { onBeforeRender } = useLoop()

onBeforeRender(({ delta }) => {
onBeforeRender(({ delta }: { delta: number }) => {
if (
disabled.value
|| !cameraGroupRef.value
Expand All @@ -80,9 +83,9 @@ onBeforeRender(({ delta }) => {
return
}
cameraGroupRef.value.position.x
+= (cursorX.value - cameraGroupRef.value.position.x) * ease.value * delta
+= (cursorX.value - cameraGroupRef.value.position.x) * _ease[0] * delta
cameraGroupRef.value.position.y
+= (cursorY.value - cameraGroupRef.value.position.y) * ease.value * delta
+= (cursorY.value - cameraGroupRef.value.position.y) * _ease[1] * delta
})

watch(
Expand Down
Loading