feat: update parallax mouse abstraction

playground/components.d.ts

@@ -9,7 +9,6 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    AkuAku: typeof import('./src/components/AkuAku.vue')['default']
     Gltf: typeof import('./src/components/gltf/index.vue')['default']
     LeviosoDemo: typeof import('./src/components/LeviosoDemo.vue')['default']
     MapControlsDemo: typeof import('./src/components/MapControlsDemo.vue')['default']

src/core/abstractions/index.ts

@@ -1,11 +1,11 @@
 import Text3D from './Text3D.vue'
 import { useAnimations } from './useAnimations'
 import { Environment } from './useEnvironment/component'
-import { PamCameraMouse } from './usePamCameraMouse/component'
+import { MouseParallax } from './useParallax/component'
 import Stars from './Stars.vue'
 import Smoke from './Smoke.vue'
 import Levioso from './Levioso.vue'
 
-export * from './usePamCameraMouse'
+export * from './useParallax'
 export * from './useEnvironment'
-export { Text3D, useAnimations, Environment, PamCameraMouse, Stars, Smoke, Levioso }
+export { Text3D, useAnimations, Environment, MouseParallax, Stars, Smoke, Levioso }

src/core/abstractions/usePamCameraMouse/component.ts → src/core/abstractions/useParallax/component.ts

@@ -1,37 +1,45 @@
 import { defineComponent, watchEffect } from 'vue'
-import { usePamCameraMouse } from '.'
+import { useMouseParallax } from '.'
 import { useCientos } from '/@/core/useCientos'
 
-export interface PamCameraMouseProps {
+export interface MouseParallaxProps {
   /**
    * Whether to disable the mouse controls.
    * @type {boolean}
    * @default false
-   * @memberof PamCameraMouseProps
+   * @memberof MouseParallaxProps
    *
    */
   disabled?: boolean
   /**
    * The factor to multiply the mouse movement by.
    * @type {number}
-   * @default 5
-   * @memberof PamCameraMouseProps
+   * @default 2.5
+   * @memberof MouseParallaxProps
    *
    **/
   factor?: number
+  /**
+   * The factor to multiply the mouse movement by.
+   * @type {boolean}
+   * @default true
+   * @memberof MouseParallaxProps
+   *
+   **/
+  ease?: boolean
 }
 
-export const PamCameraMouse = defineComponent<PamCameraMouseProps>({
+export const MouseParallax = defineComponent<MouseParallaxProps>({
   name: 'PamCameraMouse',
-  props: ['disabled', 'factor'] as unknown as undefined,
+  props: ['disabled', 'factor', 'ease'] as unknown as undefined,
   setup(props) {
     const { state } = useCientos()
 
     watchEffect(() => {
       if (state?.camera) {
         const camera = state?.camera
 
-        usePamCameraMouse(props.disabled as boolean, props.factor as number, camera)
+        useMouseParallax(props.disabled as boolean, props.factor as number, props.ease as boolean, camera)
       }
     })
     return () => {

src/core/abstractions/useParallax/index.ts

@@ -0,0 +1,30 @@
+import { computed } from 'vue'
+import { useLogger, useTres, useRenderLoop } from '@tresjs/core'
+import { useWindowSize, useMouse } from '@vueuse/core'
+import { Camera, Group } from 'three'
+
+export function useMouseParallax(disabled = false, factor = 2.5, ease = true, camera: Camera | undefined) {
+  const { x, y } = useMouse()
+  const { logWarning } = useLogger()
+  const { scene } = useTres()
+  const { width, height } = useWindowSize()
+
+  const { onLoop } = useRenderLoop()
+  const cameraGroup = new Group()
+  console.log('jaime ~ useParallax ~ ease:', ease);
+  const easeFactor = ease ? 2.5 : 30
+
+  const cursorX = computed(() => (x.value / width.value - 0.5) * factor)
+  const cursorY = computed(() => -(y.value / height.value - 0.5) * factor)
+  if (camera) {
+    cameraGroup.add(camera)
+    scene.value.add(cameraGroup)
+    onLoop(({ delta }) => {
+      if (disabled) return
+      cameraGroup.position.x += (cursorX.value - cameraGroup.position.x) * easeFactor * delta
+      cameraGroup.position.y += (cursorY.value - cameraGroup.position.y) * easeFactor * delta
+    })
+  } else {
+    logWarning('Scene must contain a Camera component to use this composable')
+  }
+}