feat: add preliminary camera-controls abstraction

package.json

@@ -52,6 +52,7 @@
   "devDependencies": {
     "@alvarosabu/prettier-config": "^1.3.0",
     "@release-it/conventional-changelog": "^6.0.0",
+    "@tweakpane/core": "^1.1.9",
     "@tweakpane/plugin-essentials": "^0.1.8",
     "@types/node": "^20.4.1",
     "@types/three": "^0.153.0",
@@ -80,6 +81,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^10.2.1",
+    "camera-controls": "^2.7.0",
     "three-stdlib": "^2.23.13"
   }
 }

playground/src/pages/CameraControlsDemo.vue

@@ -0,0 +1,58 @@
+<!-- eslint-disable no-console -->
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { TresCanvas } from '@tresjs/core'
+import { CameraControls, useTweakPane } from '@tresjs/cientos'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const controlsState = reactive({
+  minDistance: 0,
+  maxDistance: 100,
+})
+
+const { pane } = useTweakPane()
+
+const distanceFolder = pane.addFolder({ title: 'Distance' })
+distanceFolder.addInput(controlsState, 'minDistance', {
+  step: 0.01,
+  min: 0,
+  max: 10,
+})
+distanceFolder.addInput(controlsState, 'maxDistance', {
+  step: 0.01,
+  min: 0,
+  max: 100,
+})
+
+// TODO: replicate the panes from https://yomotsu.github.io/camera-controls/examples/basic.html
+
+function onChange() {
+  console.log('change')
+}
+
+function onStart() {
+  console.log('start')
+}
+
+function onEnd() {
+  console.log('end')
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <CameraControls v-bind="controlsState" @change="onChange" @start="onStart" @end="onEnd" />
+    <TresGridHelper />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>

playground/src/router.ts

@@ -11,6 +11,11 @@ const routes = [
     name: 'OrbitControls',
     component: () => import('./pages/OrbitControlsDemo.vue'),
   },
+  {
+    path: '/controls/camera-controls',
+    name: 'CameraControls',
+    component: () => import('./pages/CameraControlsDemo.vue'),
+  },
   {
     path: '/controls/transform-controls',
     name: 'TransformControls',