feat(cientos): create composable and component for PamCameraMouse

packages/cientos/src/core/usePamCameraMouse/component.ts

@@ -0,0 +1,29 @@
+import { defineComponent } from 'vue'
+import { usePamCameraMouse } from '.'
+import { useCientos } from '../useCientos'
+
+export const PamCameraMouse = defineComponent({
+  name: 'PamCameraMouse',
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    factor: {
+      type: Number,
+      required: false,
+      default: 5,
+    },
+  },
+  setup(props: any) {
+    const { state } = useCientos()
+    const camera = state?.camera?.value
+
+    const PamCameraMouse = usePamCameraMouse(props.disabled as boolean, props.factor as number, camera)
+
+    return () => {
+      PamCameraMouse
+    }
+  },
+})

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

@@ -0,0 +1,21 @@
+import { watchEffect, computed } from 'vue'
+import { Camera } from 'three'
+import { useWindowSize, useMouse } from '@vueuse/core'
+
+export function usePamCameraMouse(disabled = false, factor = 5, camera: Camera | undefined) {
+  const { x, y } = useMouse()
+  const { width, height } = useWindowSize()
+  const cameraX = computed(() => (x.value / width.value - 0.5) * factor)
+  const cameraY = computed(() => -(y.value / height.value - 0.5) * factor)
+  if(camera){
+      const { x: initX, y: initY } = camera.position
+      watchEffect(() => {
+        if (disabled) return
+        if (camera) {
+          camera.position.x = initX + cameraX.value
+          camera.position.y = initY + cameraY.value
+        }
+      })
+  } else console.warn("camera is required")
+
+}

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

@@ -1,38 +0,0 @@
-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,6 +1,6 @@
 import OrbitControls from './core/OrbitControls.vue'
 import TransformControls from './core/TransformControls.vue'
-import { usePamMouse } from './core/usePamMouse'
+import { PamCameraMouse } from './core/usePamCameraMouse/component'
 import { useTweakPane } from './core/useTweakPane'
 import { useAnimations } from './core/useAnimations'
 import { GLTFModel } from './core/useGLTF/component'
@@ -24,6 +24,7 @@ import { Environment } from './core/useEnvironment/component'
 export * from './core/useGLTF'
 export * from './core/useFBX'
 export * from './core/useEnvironment'
+export * from './core/usePamCameraMouse'
 export {
   OrbitControls,
   TransformControls,
@@ -46,5 +47,5 @@ export {
   Dodecahedron,
   useAnimations,
   Environment,
-  usePamMouse,
+  PamCameraMouse,
 }

packages/tres/src/components/TheEnvironment.vue

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