feat: adding mouse pam effect

docs/.vitepress/config.ts

@@ -72,6 +72,7 @@ export default defineConfig({
               { text: 'useAnimations', link: '/cientos/abstractions/use-animations' },
               { text: 'Environment', link: '/cientos/abstractions/environment' },
               { text: 'useEnvironment', link: '/cientos/abstractions/use-environment' },
+              { text: 'usePamMouse', link: '/cientos/abstractions/use-pam-mouse' },
             ],
           },
           {

docs/cientos/abstractions/use-pam-mouse.md

@@ -0,0 +1,33 @@
+# usePamMouse
+
+![](/cientos/usePamMouse.gif)
+
+`<usePamMouse />` is a component that allow you to create easily the pam mouse camera effect. The camera will update automatically according to the mouse position, creating a beautiful nice effect
+
+## Usage
+
+You only need import it and use it `<usePamMouse />` additionally you can pass two props, disabled and factor. Factor is a number to increase the movement range of the camera
+
+```vue
+<template>
+  <TresCanvas>
+    <usePamMouse />
+    <TresScene>
+      <Text3D text="TresJS" font="/fonts/FiraCodeRegular.json">
+        <TresMeshNormalMaterial />
+      </Text3D>
+    </TresScene>
+  </TresCanvas>
+</template>
+```
+
+::: warning
+By the nature of the pam mouse camera effect it creates conflicts if it's used in combination with OrbitControls
+:::
+
+## Props [[1]](#1)
+
+| Prop         | Description                                             | Default |
+| :----------- | :------------------------------------------------------ | ------- |
+| **disabled** | enable or disabled the effect, boolean                  | false   |
+| **factor**   | Number use to increase the range of the camera movement | 5       |

packages/cientos/src/core/usePamMouse/index.ts

@@ -0,0 +1,38 @@
+import { watchEffect, computed, defineComponent } from 'vue'
+import { useWindowSize, useMouse } from '@vueuse/core'
+import { useCientos } from '../useCientos'
+
+export const usePamMouse = defineComponent({
+  name: 'usePamMouse',
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    factor: {
+      type: Number,
+      required: false,
+      default: 5,
+    },
+  },
+  setup(props) {
+    const { state } = useCientos()
+    const { x, y } = useMouse()
+    const { width, height } = useWindowSize()
+    const cameraX = computed(() => (x.value / width.value - 0.5) * props.factor)
+    const cameraY = computed(() => -(y.value / height.value - 0.5) * props.factor)
+
+    if (state.camera) {
+      const { x: initX, y: initY } = state.camera.value.position
+
+      watchEffect(() => {
+        if (props.disabled) return
+        if (state.camera) {
+          state.camera.value.position.x = initX + cameraX.value
+          state.camera.value.position.y = initY + cameraY.value
+        }
+      })
+    }
+  },
+})

packages/cientos/src/index.ts

@@ -1,5 +1,6 @@
 import OrbitControls from './core/OrbitControls.vue'
 import TransformControls from './core/TransformControls.vue'
+import { usePamMouse } from './core/usePamMouse'
 import { useTweakPane } from './core/useTweakPane'
 import { useAnimations } from './core/useAnimations'
 import { GLTFModel } from './core/useGLTF/component'
@@ -45,4 +46,5 @@ export {
   Dodecahedron,
   useAnimations,
   Environment,
+  usePamMouse,
 }

packages/tres/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useTweakPane } from '@tresjs/cientos'
-// import TheEnvironment from '/@/components/TheEnvironment.vue'
+import TheEnvironment from '/@/components/TheEnvironment.vue'
 // import TheEvents from '/@/components/TheEvents.vue'
 import VectorSetProps from '/@/components/VectorSetProps.vue'
 
@@ -9,7 +9,7 @@ useTweakPane()
 
 <template>
   <Suspense>
-    <!-- <TheEnvironment /> -->
-    <VectorSetProps />
+    <TheEnvironment />
+    <!-- <VectorSetProps /> -->
   </Suspense>
 </template>

packages/tres/src/components/TheEnvironment.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, shallowRef, watch } from 'vue'
-import { OrbitControls, Environment, Box } from '../../../cientos/src'
+import { Environment, Box, usePamMouse } from '../../../cientos/src'
 import { TresCanvas } from '../core/useRenderer/component'
 /* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
 
@@ -28,8 +28,8 @@ watch(environmentTexture, ({ getTexture }) => {
 <template>
   <!--   <TresCanvas v-bind="state"> -->
   <TresCanvas preset="realistic">
-    <TresPerspectiveCamera :position="[8, 8, 8]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
-    <OrbitControls make-default />
+    <TresPerspectiveCamera :position="[10, 10, 18]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
+    <usePamMouse :factor="2" />
     <TresScene>
       <Environment
         ref="environmentTexture"