From b9192fb3c5ac617495866ad1df23a93a1068afbd Mon Sep 17 00:00:00 2001 From: vitta Date: Fri, 3 May 2024 18:09:04 +0200 Subject: [PATCH 1/5] feature: add `local` props --- .../pages/abstractions/MouseParallaxDemo.vue | 13 ++++++ src/core/abstractions/MouseParallax.vue | 44 +++++++++++++++---- 2 files changed, 49 insertions(+), 8 deletions(-) diff --git a/playground/src/pages/abstractions/MouseParallaxDemo.vue b/playground/src/pages/abstractions/MouseParallaxDemo.vue index 8811ca68..d062f5eb 100644 --- a/playground/src/pages/abstractions/MouseParallaxDemo.vue +++ b/playground/src/pages/abstractions/MouseParallaxDemo.vue @@ -27,4 +27,17 @@ const gl = { + + + + + + + + diff --git a/src/core/abstractions/MouseParallax.vue b/src/core/abstractions/MouseParallax.vue index b03fd99e..4a4aa956 100644 --- a/src/core/abstractions/MouseParallax.vue +++ b/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(), { 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() @@ -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( From d21694bc5ed6b711c768700b7cfb03145c65ac30 Mon Sep 17 00:00:00 2001 From: vitta Date: Fri, 3 May 2024 18:12:11 +0200 Subject: [PATCH 2/5] feat(docs): add local prop to docs --- docs/guide/abstractions/mouse-parallax.md | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/docs/guide/abstractions/mouse-parallax.md b/docs/guide/abstractions/mouse-parallax.md index 4f823656..8d4cd200 100644 --- a/docs/guide/abstractions/mouse-parallax.md +++ b/docs/guide/abstractions/mouse-parallax.md @@ -12,12 +12,15 @@ You only need to import it and add it to your template as ``. 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** | Enable movements locally | false | From c26da1f11524f2445a1b0653f35354de4d3b10ed Mon Sep 17 00:00:00 2001 From: vitta Date: Fri, 3 May 2024 18:13:59 +0200 Subject: [PATCH 3/5] fix(type): correct the east description --- src/core/abstractions/MouseParallax.vue | 68 ++++++++++++------------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/src/core/abstractions/MouseParallax.vue b/src/core/abstractions/MouseParallax.vue index 4a4aa956..5e8020c7 100644 --- a/src/core/abstractions/MouseParallax.vue +++ b/src/core/abstractions/MouseParallax.vue @@ -1,9 +1,9 @@