fix: MouseParallax, clean code (#134)

playground/components.d.ts

@@ -14,17 +14,10 @@ declare module 'vue' {
     LeviosoDemo: typeof import('./src/components/LeviosoDemo.vue')['default']
     MapControlsDemo: typeof import('./src/components/MapControlsDemo.vue')['default']
     ModelsDemo: typeof import('./src/components/ModelsDemo.vue')['default']
-    OrbitControlsDemo: typeof import('./src/components/OrbitControlsDemo.vue')['default']
-    PointerLockControlsDemo: typeof import('./src/components/PointerLockControlsDemo.vue')['default']
-    PrecipitationDemo: typeof import('./src/components/PrecipitationDemo.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ScrollDemo: typeof import('./src/components/ScrollDemo.vue')['default']
     TheGizmos: typeof import('./src/components/TheGizmos.vue')['default']
-    TheSmoke: typeof import('./src/components/TheSmoke.vue')['default']
-    TheStars: typeof import('./src/components/TheStars.vue')['default']
-    TheText3D: typeof import('./src/components/TheText3D.vue')['default']
-    TransformControlsDemo: typeof import('./src/components/TransformControlsDemo.vue')['default']
     WobbleMaterial: typeof import('./src/components/WobbleMaterial.vue')['default']
   }
 }

playground/src/pages/StarsDemo.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { shallowRef } from 'vue'
 import { TresCanvas } from '@tresjs/core'
-import { OrbitControls, Stars } from '@tresjs/cientos'
+import { OrbitControls, Stars, MouseParallax } from '@tresjs/cientos'
 import { SRGBColorSpace, NoToneMapping } from 'three'
 
 const gl = {
@@ -16,6 +16,7 @@ const star = shallowRef<Stars>(null)
 <template>
   <TresCanvas v-bind="gl" ref="canvas">
     <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <MouseParallax />
     <Stars ref="star" :radius="1" />
     <TresGridHelper :args="[10, 10]" />
     <OrbitControls />

src/core/abstractions/index.ts

@@ -1,20 +1,20 @@
 import Text3D from './Text3D.vue'
 import { useAnimations } from './useAnimations'
 import { Environment } from './useEnvironment/component'
-import { MouseParallax } from './useParallax/component'
+// import { MouseParallax } from './mouseParallax'
 import Stars from './Stars.vue'
 import Precipitation from './Precipitation.vue'
 import Smoke from './Smoke.vue'
 import Levioso from './Levioso.vue'
 import ContactShadows from './ContactShadows.vue'
 
-export * from './useParallax'
+export * from './mouseParallax'
 export * from './useEnvironment'
 export {
   Text3D,
   useAnimations,
   Environment,
-  MouseParallax,
+  // MouseParallax,
   Stars,
   Smoke,
   Levioso,

src/core/abstractions/mouseParallax/index.ts

@@ -0,0 +1,67 @@
+import { defineComponent, computed } from 'vue'
+import { useRenderLoop } from '@tresjs/core'
+import { useWindowSize, useMouse, watchOnce } from '@vueuse/core'
+import { useCientos } from '../../useCientos'
+import { Group } from 'three'
+
+export interface MouseParallaxProps {
+  /**
+   * Whether to disable the mouse controls.
+   * @type {boolean}
+   * @default false
+   * @memberof MouseParallaxProps
+   *
+   */
+  disabled?: boolean
+  /**
+   * The factor to multiply the mouse movement by.
+   * @type {number}
+   * @default 2.5
+   * @memberof MouseParallaxProps
+   *
+   **/
+  factor?: number
+  /**
+   * The factor to multiply the mouse movement by.
+   * @type {number}
+   * @default 2.5
+   * @memberof MouseParallaxProps
+   *
+   **/
+  ease?: number
+}
+
+export const MouseParallax = defineComponent<MouseParallaxProps>({
+  name: 'MouseParallax',
+  props: ['disabled', 'factor', 'ease'] as unknown as undefined,
+  setup(props) {
+    const { state } = useCientos()
+
+    const { x, y } = useMouse()
+    const { width, height } = useWindowSize()
+
+    const { onLoop } = useRenderLoop()
+    const cameraGroup = new Group()
+    state.scene?.add(cameraGroup)
+    const easeFactor = props.ease || 2.5
+    const factor = props.factor || 2.5
+
+    const cursorX = computed(() => (x.value / width.value - 0.5) * factor)
+    const cursorY = computed(() => -(y.value / height.value - 0.5) * factor)
+
+    watchOnce(() => state.camera, () => {
+      if(state.camera){
+        cameraGroup.add(state.camera)
+      }
+    })
+
+    onLoop(({ delta }) => {
+      if (props.disabled) return
+      cameraGroup.position.x += (cursorX.value - cameraGroup.position.x) * easeFactor * delta
+      cameraGroup.position.y += (cursorY.value - cameraGroup.position.y) * easeFactor * delta
+    })
+    return () => {
+      null
+    }
+  },
+})