From bef41b9f0ef6508ecd56735cd5e2d6fb205e114a Mon Sep 17 00:00:00 2001
From: "Arun S. Negi" <arunsnegi@protonmail.com>
Date: Tue, 25 Jul 2023 01:32:01 +0530
Subject: [PATCH] feat: add preliminary camera-controls abstraction

---
 package.json                                |   2 +
 playground/src/pages/CameraControlsDemo.vue |  58 +++
 playground/src/router.ts                    |   5 +
 pnpm-lock.yaml                              |  26 +-
 src/core/controls/CameraControls.vue        | 427 ++++++++++++++++++++
 src/core/controls/index.ts                  |  11 +-
 6 files changed, 524 insertions(+), 5 deletions(-)
 create mode 100644 playground/src/pages/CameraControlsDemo.vue
 create mode 100644 src/core/controls/CameraControls.vue

diff --git a/package.json b/package.json
index 32c30f96..29a4ddde 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/playground/src/pages/CameraControlsDemo.vue b/playground/src/pages/CameraControlsDemo.vue
new file mode 100644
index 00000000..025abe78
--- /dev/null
+++ b/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>
diff --git a/playground/src/router.ts b/playground/src/router.ts
index 7a653414..9f81a2f2 100644
--- a/playground/src/router.ts
+++ b/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',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e0cace0b..17456a22 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 importers:
 
   .:
@@ -14,6 +10,9 @@ importers:
       '@vueuse/core':
         specifier: ^10.2.1
         version: 10.2.1(vue@3.3.4)
+      camera-controls:
+        specifier: ^2.7.0
+        version: 2.7.0(three@0.154.0)
       three-stdlib:
         specifier: ^2.23.13
         version: 2.23.13(three@0.154.0)
@@ -27,6 +26,9 @@ importers:
       '@release-it/conventional-changelog':
         specifier: ^6.0.0
         version: 6.0.0(release-it@16.0.0)
+      '@tweakpane/core':
+        specifier: ^1.1.9
+        version: 1.1.9
       '@tweakpane/plugin-essentials':
         specifier: ^0.1.8
         version: 0.1.8(tweakpane@3.1.10)
@@ -1077,6 +1079,10 @@ packages:
     engines: {node: '>=10.13.0'}
     dev: true
 
+  /@tweakpane/core@1.1.9:
+    resolution: {integrity: sha512-9tq+KAhaqPiOgsFyLPAz1IMXkVfhRqxGzAgy1ps3As6o3W7XjnU7sev6OlD/Z+Pzw8uZVMukkSHf2e0uCU6u0A==}
+    dev: true
+
   /@tweakpane/plugin-essentials@0.1.8(tweakpane@3.1.10):
     resolution: {integrity: sha512-tWBXzWafcjiq+/XvZnOgSz0B+YikwZj0NnqiZPba+AwTiDqNk/6PU3so0Bs0qyxLIJKT/+AUPRL8jBmtERYzwA==}
     peerDependencies:
@@ -2054,6 +2060,14 @@ packages:
     engines: {node: '>=14.16'}
     dev: true
 
+  /camera-controls@2.7.0(three@0.154.0):
+    resolution: {integrity: sha512-HONMoMYHieOCQOoweS639bdWHP/P/fvVGR08imnECGVUp04mqGfsX/zp1ZufLeiAA5hA6i1JhP6SrnOwh01C0w==}
+    peerDependencies:
+      three: '>=0.126.1'
+    dependencies:
+      three: 0.154.0
+    dev: false
+
   /chalk@2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
@@ -6428,3 +6442,7 @@ packages:
   /zstddec@0.0.2:
     resolution: {integrity: sha512-DCo0oxvcvOTGP/f5FA6tz2Z6wF+FIcEApSTu0zV5sQgn9hoT5lZ9YRAKUraxt9oP7l4e8TnNdi8IZTCX6WCkwA==}
     dev: false
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
diff --git a/src/core/controls/CameraControls.vue b/src/core/controls/CameraControls.vue
new file mode 100644
index 00000000..74110690
--- /dev/null
+++ b/src/core/controls/CameraControls.vue
@@ -0,0 +1,427 @@
+<script lang="ts" setup>
+import CameraControls from 'camera-controls'
+import { ref, watch, onUnmounted, toRefs } from 'vue'
+import {
+  PerspectiveCamera,
+  OrthographicCamera,
+  Box3,
+  MathUtils,
+  Matrix4,
+  Quaternion,
+  Raycaster,
+  Sphere,
+  Spherical,
+  Vector2,
+  Vector3,
+  Vector4,
+  Object3D,
+} from 'three'
+import { useRenderLoop } from '@tresjs/core'
+import { useEventListener } from '@vueuse/core'
+import { useCientos } from '../useCientos'
+
+export interface CameraControlsProps {
+  /**
+   * Whether to make this the default controls.
+   *
+   * @default false
+   * @type {boolean}
+   * @memberof CameraControlsProps
+   */
+  makeDefault?: boolean
+
+  /**
+   * The camera to control.
+   *
+   * @type {PerspectiveCamera | OrthographicCamera}
+   * @memberof CameraControlsProps
+   */
+  camera?: PerspectiveCamera | OrthographicCamera
+
+  /**
+   * The dom element to listen to.
+   *
+   * @type {HTMLElement}
+   * @memberof CameraControlsProps
+   */
+  domElement?: HTMLElement
+
+  /**
+   * Minimum vertical angle in radians.
+   * The angle has to be between `0` and `.maxPolarAngle` inclusive.
+   *
+   * @default 0
+   * @type {number}
+   * @memberof CameraControlsProps
+   */
+  minPolarAngle?: number
+
+  /**
+   * Maximum vertical angle in radians.
+   * The angle has to be between `.maxPolarAngle` and `Math.PI` inclusive.
+   *
+   * @default Math.PI
+   * @type {number}
+   * @memberof CameraControlsProps
+   */
+  maxPolarAngle?: number
+
+  /**
+   * Minimum horizontal angle in radians.
+   * The angle has to be less than `.maxAzimuthAngle`.
+   *
+   * @default -Infinity
+   * @type {number}
+   * @memberof CameraControlsProps
+   */
+  minAzimuthAngle?: number
+
+  /**
+   * Maximum horizontal angle in radians.
+   * The angle has to be greater than `.minAzimuthAngle`.
+   *
+   * @default Infinity
+   * @type {number}
+   * @memberof CameraControlsProps
+   */
+  maxAzimuthAngle?: number
+
+  /**
+   * Minimum distance for dolly. The value must be higher than `0`.
+   * PerspectiveCamera only.
+   *
+   * @default Number.EPSILON
+   * @type {number}
+   * @memberof CameraControlsProps
+   */
+  minDistance?: number
+
+  /**
+   * Maximum distance for dolly. The value must be higher than `minDistance`.
+   * PerspectiveCamera only.
+   *
+   * @default Infinity
+   * @type {number}
+   * @memberof CameraControlsProps
+   */
+  maxDistance?: number
+
+  /**
+   * `true` to enable Infinity Dolly for wheel and pinch. Use this with `minDistance` and `maxDistance`.
+   * If the Dolly distance is less (or over) than the `minDistance` (or `maxDistance`),
+   * `infinityDolly` will keep the distance and pushes the target position instead.
+   *
+   * @default false
+   * @type {boolean}
+   * @memberof CameraControlsProps
+   */
+  infinityDolly?: boolean
+
+  /**
+   * Minimum camera zoom.
+   *
+   * @default 0.01
+   * @type {number}
+   * @memberof CameraControlsProps
+   */
+  minZoom?: number
+
+  /**
+   * Maximum camera zoom.
+   *
+   * @default Infinity
+   * @type {number}
+   * @memberof CameraControlsProps
+   */
+  maxZoom?: number
+
+  /**
+   * Approximate time in seconds to reach the target. A smaller value will reach the target faster.
+   *
+   * @default 0.25
+   * @type {number}
+   * @memberof CameraControlsProps
+   */
+  smoothTime?: number
+
+  /**
+   * The smoothTime while dragging.
+   *
+   * @default 0.125
+   * @type {number}
+   * @memberof CameraControlsProps
+   */
+  draggingSmoothTime?: number
+
+  /**
+   * Max transition speed in unit-per-seconds.
+   *
+   * @default Infinity
+   * @type {number}
+   * @memberof CameraControlsProps
+   */
+  maxSpeed?: number
+
+  /**
+   * Speed of azimuth (horizontal) rotation.
+   *
+   * @default 1.0
+   * @type {number}
+   * @memberof CameraControlsProps
+   */
+  azimuthRotateSpeed?: number
+
+  /**
+   * Speed of polar (vertical) rotation.
+   *
+   * @default 1.0
+   * @type {number}
+   * @memberof CameraControlsProps
+   */
+  polarRotateSpeed?: number
+
+  /**
+   * Speed of mouse-wheel dollying.
+   *
+   * @default 1.0
+   * @type {number}
+   * @memberof CameraControlsProps
+   */
+  dollySpeed?: number
+
+  /**
+   * `true` to invert direction when dollying or zooming via drag.
+   *
+   * @default false
+   * @type {boolean}
+   * @memberof CameraControlsProps
+   */
+  dollyDragInverted?: boolean
+
+  /**
+   * Speed of drag for truck and pedestal.
+   *
+   * @default 2.0
+   * @type {number}
+   * @memberof CameraControlsProps
+   */
+  truckSpeed?: number
+
+  /**
+   * `true` to enable Dolly-in to the mouse cursor coords.
+   *
+   * @default false
+   * @type {boolean}
+   * @memberof CameraControlsProps
+   */
+  dollyToCursor?: boolean
+
+  /**
+   * @default false
+   * @type {boolean}
+   * @memberof CameraControlsProps
+   */
+  dragToOffset?: boolean
+
+  /**
+   * The same as `.screenSpacePanning` in three.js's OrbitControls.
+   *
+   * @default false
+   * @type {boolean}
+   * @memberof CameraControlsProps
+   */
+  verticalDragToForward?: boolean
+
+  /**
+   * Friction ratio of the boundary.
+   *
+   * @default 0.0
+   * @type {number}
+   * @memberof CameraControlsProps
+   */
+  boundaryFriction?: number
+
+  /**
+   * Controls how soon the `rest` event fires as the camera slows.
+   *
+   * @default 0.01
+   * @type {number}
+   * @memberof CameraControlsProps
+   */
+  restThreshold?: number
+
+  /**
+   * An array of Meshes to collide with the camera.
+   * Be aware colliderMeshes may decrease performance.
+   * The collision test uses 4 raycasters from the camera since the near plane has 4 corners.
+   *
+   * @default []
+   * @type {Object3D[]}
+   * @memberof CameraControlsProps
+   */
+  colliderMeshes?: Object3D[]
+
+  /**
+   * User's mouse input config.
+   *
+   * @default See description
+   * @memberof CameraControlsProps
+   */
+  mouseButtons?: {
+    left?: number
+    right?: number
+    wheel?: number
+    middle?: number
+  }
+
+  /**
+   * User's touch input config.
+   *
+   * @default See description
+   * @memberof CameraControlsProps
+   */
+  touches?: {
+    one?: number
+    two?: number
+    three?: number
+  }
+}
+
+const props = withDefaults(defineProps<CameraControlsProps>(), {
+  makeDefault: false,
+  minPolarAngle: 0,
+  maxPolarAngle: Math.PI,
+  minAzimuthAngle: -Infinity,
+  maxAzimuthAngle: Infinity,
+  minDistance: Number.EPSILON,
+  maxDistance: Infinity,
+  infinityDolly: false,
+  minZoom: 0.01,
+  maxZoom: Infinity,
+  smoothTime: 0.25,
+  draggingSmoothTime: 0.125,
+  maxSpeed: Infinity,
+  azimuthRotateSpeed: 1.0,
+  polarRotateSpeed: 1.0,
+  dollySpeed: 1.0,
+  dollyDragInverted: false,
+  truckSpeed: 2.0,
+  dollyToCursor: false,
+  dragToOffset: false,
+  verticalDragToForward: false,
+  boundaryFriction: 0.0,
+  restThreshold: 0.01,
+  colliderMeshes: () => [],
+  // FIXME: set default values for mouseButtons and touches
+  // mouseButtons: {},
+  // touches: {}
+})
+
+const {
+  makeDefault,
+  minPolarAngle,
+  maxPolarAngle,
+  minAzimuthAngle,
+  maxAzimuthAngle,
+  minDistance,
+  maxDistance,
+  infinityDolly,
+  minZoom,
+  maxZoom,
+  smoothTime,
+  draggingSmoothTime,
+  maxSpeed,
+  azimuthRotateSpeed,
+  polarRotateSpeed,
+  dollySpeed,
+  dollyDragInverted,
+  truckSpeed,
+  dollyToCursor,
+  dragToOffset,
+  verticalDragToForward,
+  boundaryFriction,
+  restThreshold,
+  colliderMeshes,
+} = toRefs(props)
+
+// allow for tree shaking, only importing required classes
+const subsetOfTHREE = {
+  Box3,
+  MathUtils: {
+    clamp: MathUtils.clamp,
+  },
+  Matrix4,
+  Quaternion,
+  Raycaster,
+  Sphere,
+  Spherical,
+  Vector2,
+  Vector3,
+  Vector4,
+}
+CameraControls.install({ THREE: subsetOfTHREE })
+
+const { state, extend, setState } = useCientos()
+const controlsRef = ref<CameraControls | null>(null)
+extend({ CameraControls })
+
+watch(controlsRef, value => {
+  addEventListeners()
+  if (value && makeDefault.value) {
+    setState('controls', value)
+  } else {
+    setState('controls', null)
+  }
+})
+
+const emit = defineEmits(['change', 'start', 'end'])
+
+function addEventListeners() {
+  useEventListener(controlsRef.value as any, 'change', () => emit('change', controlsRef.value))
+  useEventListener(controlsRef.value as any, 'start', () => emit('start', controlsRef.value))
+  useEventListener(controlsRef.value as any, 'end', () => emit('end', controlsRef.value))
+}
+
+const { onLoop } = useRenderLoop()
+
+onLoop(({ delta }) => {
+  if (controlsRef.value?.enabled) controlsRef.value?.update(delta)
+})
+
+onUnmounted(() => {
+  if (controlsRef.value) {
+    controlsRef.value.disconnect()
+  }
+})
+</script>
+
+<template>
+  <TresCameraControls
+    v-if="state.camera && state.renderer"
+    ref="controlsRef"
+    :min-polar-angle="minPolarAngle"
+    :max-polar-angle="maxPolarAngle"
+    :min-azimuth-angle="minAzimuthAngle"
+    :max-azimuth-angle="maxAzimuthAngle"
+    :min-distance="minDistance"
+    :max-distance="maxDistance"
+    :infinity-dolly="infinityDolly"
+    :min-zoom="minZoom"
+    :max-zoom="maxZoom"
+    :smooth-time="smoothTime"
+    :dragging-smooth-time="draggingSmoothTime"
+    :max-speed="maxSpeed"
+    :azimuth-rotate-speed="azimuthRotateSpeed"
+    :polar-rotate-speed="polarRotateSpeed"
+    :dolly-speed="dollySpeed"
+    :dolly-drag-inverted="dollyDragInverted"
+    :truck-speed="truckSpeed"
+    :dolly-to-cursor="dollyToCursor"
+    :drag-to-offset="dragToOffset"
+    :vertical-drag-to-forward="verticalDragToForward"
+    :boundary-friction="boundaryFriction"
+    :rest-threshold="restThreshold"
+    :collider-meshes="colliderMeshes"
+    :args="[state.camera || camera, state.renderer?.domElement || domElement]"
+  />
+</template>
diff --git a/src/core/controls/index.ts b/src/core/controls/index.ts
index 52dd9ec7..7a499e8a 100644
--- a/src/core/controls/index.ts
+++ b/src/core/controls/index.ts
@@ -4,5 +4,14 @@ import TransformControls from './TransformControls.vue'
 import PointerLockControls from './PointerLockControls.vue'
 import MapControls from './MapControls.vue'
 import ScrollControls from './ScrollControls.vue'
+import CameraControls from './CameraControls.vue'
 
-export { OrbitControls, TransformControls, PointerLockControls, MapControls, KeyboardControls, ScrollControls }
+export {
+  OrbitControls,
+  TransformControls,
+  PointerLockControls,
+  MapControls,
+  KeyboardControls,
+  ScrollControls,
+  CameraControls,
+}