From d8cdd9ec7f7e28c244f661cc005a387e1870a277 Mon Sep 17 00:00:00 2001
From: Thimo <68739517+ThimoDEV@users.noreply.github.com>
Date: Sun, 16 Mar 2025 13:27:55 +0100
Subject: [PATCH 1/2] chore: WIP init presentationcontrols

---
 package.json                                  |   1 +
 playground/vue/components.d.ts                |   3 -
 .../controls/PresentationControlsDemo.vue     |  43 ++++
 playground/vue/src/router/routes/controls.ts  |   5 +
 pnpm-lock.yaml                                |  14 ++
 src/core/controls/PresentationControls.vue    | 196 ++++++++++++++++++
 src/core/controls/index.ts                    |   2 +
 7 files changed, 261 insertions(+), 3 deletions(-)
 create mode 100644 playground/vue/src/pages/controls/PresentationControlsDemo.vue
 create mode 100644 src/core/controls/PresentationControls.vue

diff --git a/package.json b/package.json
index 94b19b951..6c64cbb08 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
   "dependencies": {
     "@vueuse/core": "^12.0.0",
     "camera-controls": "^2.9.0",
+    "maath": "^0.10.8",
     "stats-gl": "^2.0.1",
     "stats.js": "^0.17.0",
     "three-custom-shader-material": "^5.4.0",
diff --git a/playground/vue/components.d.ts b/playground/vue/components.d.ts
index 06f78b111..5d6524bde 100644
--- a/playground/vue/components.d.ts
+++ b/playground/vue/components.d.ts
@@ -7,13 +7,10 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    AkuAku: typeof import('./src/components/gltf/BlenderCube.vue')['default']
     BlenderCube: typeof import('./src/components/gltf/BlenderCube.vue')['default']
     FboCube: typeof import('./src/components/FboCube.vue')['default']
-    Gltf: typeof import('./src/components/gltf/index.vue')['default']
     GraphPane: typeof import('./src/components/GraphPane.vue')['default']
     Jeep: typeof import('./src/components/fbx/Jeep.vue')['default']
-    ModelsDemo: typeof import('./src/components/ModelsDemo.vue')['default']
     OverlayInfo: typeof import('./src/components/OverlayInfo.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/playground/vue/src/pages/controls/PresentationControlsDemo.vue b/playground/vue/src/pages/controls/PresentationControlsDemo.vue
new file mode 100644
index 000000000..97c6f457b
--- /dev/null
+++ b/playground/vue/src/pages/controls/PresentationControlsDemo.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { PresentationControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import '@tresjs/leches/styles'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[0, 0, 10]" :fov="25" />
+    <PresentationControls
+      :global="true"
+      :snap="0.1"
+      :rotation="[0, 0.3, 0]"
+      :polar="[-Math.PI / 1.4, Math.PI / 3]"
+      :azimuth="[-Math.PI / 1.4, Math.PI / 2]"
+      :dampingFactor="0.8"
+    >
+      <TresMesh>
+        <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
+        <TresMeshStandardMaterial color="#4169E1" :metalness="0.7" :roughness="0.3" />
+      </TresMesh>
+      <TresGridHelper :args="[10, 10]" />
+    </PresentationControls>
+    <TresAmbientLight :intensity="0.5" />
+    <TresSpotLight
+      :position="[10, 10, 10]"
+      :angle="0.15"
+      :penumbra="1"
+      :shadow-mapSize="2048"
+      castShadow
+    />
+  </TresCanvas>
+</template>
diff --git a/playground/vue/src/router/routes/controls.ts b/playground/vue/src/router/routes/controls.ts
index 931aa55f6..4a06c3923 100644
--- a/playground/vue/src/router/routes/controls.ts
+++ b/playground/vue/src/router/routes/controls.ts
@@ -34,4 +34,9 @@ export const controlsRoutes = [
     name: 'ScrollControls',
     component: () => import('../../pages/controls/ScrollControlsDemo.vue'),
   },
+  {
+    path: '/controls/presentation-controls',
+    name: 'PresentationControls',
+    component: () => import('../../pages/controls/PresentationControlsDemo.vue'),
+  },
 ]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9e91749ac..51fb7da67 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       camera-controls:
         specifier: ^2.9.0
         version: 2.9.0(three@0.173.0)
+      maath:
+        specifier: ^0.10.8
+        version: 0.10.8(@types/three@0.172.0)(three@0.173.0)
       stats-gl:
         specifier: ^2.0.1
         version: 2.4.2(@types/three@0.172.0)(three@0.173.0)
@@ -3150,6 +3153,12 @@ packages:
     resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
     engines: {node: '>=12'}
 
+  maath@0.10.8:
+    resolution: {integrity: sha512-tRvbDF0Pgqz+9XUa4jjfgAQ8/aPKmQdWXilFu2tMy4GWj4NOsx99HlULO4IeREfbO3a0sA145DZYyvXPkybm0g==}
+    peerDependencies:
+      '@types/three': '>=0.134.0'
+      three: '>=0.134.0'
+
   macos-release@3.3.0:
     resolution: {integrity: sha512-tPJQ1HeyiU2vRruNGhZ+VleWuMQRro8iFtJxYgnS4NQe+EukKF6aGiIT+7flZhISAt2iaXBCfFGvAyif7/f8nQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -7691,6 +7700,11 @@ snapshots:
 
   lru-cache@7.18.3: {}
 
+  maath@0.10.8(@types/three@0.172.0)(three@0.173.0):
+    dependencies:
+      '@types/three': 0.172.0
+      three: 0.173.0
+
   macos-release@3.3.0: {}
 
   magic-string@0.30.12:
diff --git a/src/core/controls/PresentationControls.vue b/src/core/controls/PresentationControls.vue
new file mode 100644
index 000000000..593d64650
--- /dev/null
+++ b/src/core/controls/PresentationControls.vue
@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import { useRenderLoop, useTresContext } from '@tresjs/core'
+import { easing } from 'maath'
+import type { Group } from 'three'
+import { MathUtils } from 'three'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useEventListener } from '@vueuse/core'
+
+interface PresentationControlsProps {
+  snap?: boolean | number
+  global?: boolean
+  cursor?: boolean
+  speed?: number
+  zoom?: number
+  rotation?: [number, number, number]
+  polar?: [number, number]
+  azimuth?: [number, number]
+  damping?: number
+  enabled?: boolean
+  domElement?: HTMLElement
+}
+
+const props = withDefaults(defineProps<PresentationControlsProps>(), {
+  enabled: true,
+  cursor: true,
+  speed: 1,
+  rotation: () => [0, 0, 0],
+  zoom: 1,
+  polar: () => [0, Math.PI / 2],
+  azimuth: () => [-Infinity, Infinity],
+  damping: 0.25,
+})
+
+const three = useTresContext()
+const renderer = three.renderer.value
+const sizes = three.sizes
+const explDomElement = props.domElement || renderer?.domElement
+
+const rPolar = computed<[number, number]>(() => [
+  props.rotation[0] + props.polar[0],
+  props.rotation[0] + props.polar[1],
+])
+
+const rAzimuth = computed<[number, number]>(() => [
+  props.rotation[1] + props.azimuth[0],
+  props.rotation[1] + props.azimuth[1],
+])
+
+const rInitial = computed<[number, number, number]>(() => [
+  MathUtils.clamp(props.rotation[0], ...rPolar.value),
+  MathUtils.clamp(props.rotation[1], ...rAzimuth.value),
+  props.rotation[2],
+])
+
+const groupRef = ref<Group | null>(null)
+let isDragging = false
+const animation = {
+  scale: 1,
+  rotation: rInitial.value,
+  damping: props.damping,
+}
+
+watch(() => [props.global, props.cursor, props.enabled], ([global, cursor, enabled]) => {
+  if (global && cursor && enabled && explDomElement) {
+    explDomElement.style.cursor = 'grab'
+    if (renderer?.domElement) {
+      renderer.domElement.style.cursor = ''
+    }
+  }
+}, { immediate: true })
+
+watch(() => rInitial.value, (newValue) => {
+  if (!isDragging) {
+    animation.rotation = newValue
+  }
+}, { immediate: true })
+
+const { onLoop } = useRenderLoop()
+onLoop(({ delta }) => {
+  if (!groupRef.value) { return }
+  const adjustedDelta = delta * 2.5
+  easing.damp3(groupRef.value.scale, animation.scale, animation.damping, adjustedDelta)
+  easing.dampE(groupRef.value.rotation, animation.rotation, animation.damping, adjustedDelta)
+})
+
+let lastPosition = { x: 0, y: 0 }
+let memo: [number, number] = [0, 0]
+
+const handlePointerDown = (event: PointerEvent) => {
+  if (!props.enabled) { return }
+  isDragging = true
+  lastPosition = { x: event.clientX, y: event.clientY }
+  memo = [animation.rotation[0], animation.rotation[1]]
+  if (props.cursor && explDomElement) {
+    explDomElement.style.cursor = 'grabbing'
+  }
+}
+
+const handlePointerMove = (event: PointerEvent) => {
+  if (!isDragging || !props.enabled || !sizes) { return }
+
+  if (props.cursor) {
+    explDomElement.style.cursor = isDragging ? 'grabbing' : 'grab'
+  }
+
+  const deltaX = event.clientX - lastPosition.x
+  const deltaY = event.clientY - lastPosition.y
+
+  const width = typeof sizes.width.value === 'number' ? sizes.width.value : Number(sizes.width.value)
+  const height = typeof sizes.height.value === 'number' ? sizes.height.value : Number(sizes.height.value)
+
+  const movementMultiplier = 2.5
+  const x = MathUtils.clamp(
+    memo[1] + (deltaX / width) * Math.PI * props.speed * movementMultiplier,
+    rAzimuth.value[0],
+    rAzimuth.value[1],
+  )
+  const y = MathUtils.clamp(
+    memo[0] + (deltaY / height) * Math.PI * props.speed * movementMultiplier,
+    rPolar.value[0],
+    rPolar.value[1],
+  )
+
+  animation.scale = isDragging && y > rPolar.value[1] / 2 ? props.zoom : 1
+  animation.rotation = [y, x, 0]
+  animation.damping = props.damping * 0.1
+
+  memo = [y, x]
+  lastPosition = { x: event.clientX, y: event.clientY }
+}
+
+const handlePointerUp = () => {
+  isDragging = false
+  if (props.cursor && explDomElement) {
+    explDomElement.style.cursor = 'grab'
+  }
+
+  animation.damping = props.damping * 0.01
+
+  if (props.snap) {
+    animation.scale = 1
+    animation.rotation = rInitial.value
+    animation.damping = typeof props.snap === 'number' ? props.snap : props.damping * 0.01
+  }
+
+  setTimeout(() => {
+    animation.damping = props.damping
+  }, 500)
+}
+
+const handleHover = (event: MouseEvent) => {
+  if (props.cursor && !props.global && props.enabled && explDomElement) {
+    explDomElement.style.cursor = event.type === 'mouseleave' ? 'auto' : 'grab'
+  }
+}
+
+onMounted(() => {
+  if (props.global) {
+    const target = props.domElement || renderer?.domElement || window
+    useEventListener(target, 'pointerdown', handlePointerDown)
+    useEventListener(window, 'pointermove', handlePointerMove)
+    useEventListener(window, 'pointerup', handlePointerUp)
+    useEventListener(target, 'mouseenter', handleHover)
+    useEventListener(target, 'mouseleave', handleHover)
+  }
+})
+
+onUnmounted(() => {
+  if (explDomElement) {
+    explDomElement.style.cursor = 'default'
+  }
+  if (renderer?.domElement) {
+    renderer.domElement.style.cursor = 'default'
+  }
+})
+</script>
+
+<template>
+  <TresGroup
+    v-if="!global"
+    ref="groupRef"
+    @pointerdown="handlePointerDown"
+    @pointermove="handlePointerMove"
+    @pointerup="handlePointerUp"
+    @mouseenter="handleHover"
+    @mouseleave="handleHover"
+  >
+    <slot></slot>
+  </TresGroup>
+  <TresGroup
+    v-else
+    ref="groupRef"
+  >
+    <slot></slot>
+  </TresGroup>
+</template>
diff --git a/src/core/controls/index.ts b/src/core/controls/index.ts
index d803b2af3..7b4db595f 100644
--- a/src/core/controls/index.ts
+++ b/src/core/controls/index.ts
@@ -5,6 +5,7 @@ import OrbitControls from './OrbitControls.vue'
 import PointerLockControls from './PointerLockControls.vue'
 import ScrollControls from './ScrollControls.vue'
 import TransformControls from './TransformControls.vue'
+import PresentationControls from './PresentationControls.vue'
 
 export {
   BaseCameraControls,
@@ -13,6 +14,7 @@ export {
   MapControls,
   OrbitControls,
   PointerLockControls,
+  PresentationControls,
   ScrollControls,
   TransformControls,
 }

From d9cb54435ebf7f7d54304237cbfcf8a44203960a Mon Sep 17 00:00:00 2001
From: Thimo <68739517+ThimoDEV@users.noreply.github.com>
Date: Mon, 22 Sep 2025 19:04:10 +0200
Subject: [PATCH 2/2] fix: wip presentationcontrols

---
 .../controls/PresentationControlsDemo.vue     |  64 +--
 pnpm-lock.yaml                                |  14 +
 src/core/controls/PresentationControls.vue    | 436 ++++++++++++------
 3 files changed, 351 insertions(+), 163 deletions(-)

diff --git a/playground/vue/src/pages/controls/PresentationControlsDemo.vue b/playground/vue/src/pages/controls/PresentationControlsDemo.vue
index 97c6f457b..c9012653b 100644
--- a/playground/vue/src/pages/controls/PresentationControlsDemo.vue
+++ b/playground/vue/src/pages/controls/PresentationControlsDemo.vue
@@ -1,43 +1,51 @@
 <script setup lang="ts">
-import { PresentationControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
+import { PresentationControls } from '@tresjs/cientos'
 import '@tresjs/leches/styles'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
+import {
+  NoToneMapping,
+  SRGBColorSpace,
+} from 'three'
 
 const gl = {
   clearColor: '#82DBC5',
-  shadows: true,
   alpha: false,
-  shadowMapType: BasicShadowMap,
   outputColorSpace: SRGBColorSpace,
   toneMapping: NoToneMapping,
 }
 </script>
 
 <template>
-  <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[0, 0, 10]" :fov="25" />
-    <PresentationControls
-      :global="true"
-      :snap="0.1"
-      :rotation="[0, 0.3, 0]"
-      :polar="[-Math.PI / 1.4, Math.PI / 3]"
-      :azimuth="[-Math.PI / 1.4, Math.PI / 2]"
-      :dampingFactor="0.8"
-    >
-      <TresMesh>
-        <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
-        <TresMeshStandardMaterial color="#4169E1" :metalness="0.7" :roughness="0.3" />
-      </TresMesh>
+  <div style="width: 100vw; height: 100vh">
+    <TresCanvas v-bind="gl">
+      <TresPerspectiveCamera
+        :position="[0, 0, 5]"
+      />
+      <PresentationControls
+        :global="true"
+        :config="{ mass: 2, tension: 500 }"
+        :snap="{ mass: 4, tension: 1500 }"
+        :rotation="[0, 0.3, 0]"
+        :polar="[-Math.PI / 3, Math.PI / 3]"
+        :azimuth="[-Math.PI / 1.4, Math.PI / 2]"
+      >
+        <TresMesh>
+          <TresBoxGeometry
+            :args="[1.5, 1.5, 1.5]"
+          />
+          <TresMeshStandardMaterial
+            color="#4169E1"
+            :metalness="0.7"
+            :roughness="0.3"
+          />
+        </TresMesh>
+      </PresentationControls>
       <TresGridHelper :args="[10, 10]" />
-    </PresentationControls>
-    <TresAmbientLight :intensity="0.5" />
-    <TresSpotLight
-      :position="[10, 10, 10]"
-      :angle="0.15"
-      :penumbra="1"
-      :shadow-mapSize="2048"
-      castShadow
-    />
-  </TresCanvas>
+      <TresAmbientLight :intensity="0.7" />
+      <TresDirectionalLight
+        :position="[5, 5, 5]"
+        :intensity="1"
+      />
+    </TresCanvas>
+  </div>
 </template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e1664973b..d260274b6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       camera-controls:
         specifier: ^2.9.0
         version: 2.10.1(three@0.180.0)
+      maath:
+        specifier: ^0.10.8
+        version: 0.10.8(@types/three@0.180.0)(three@0.180.0)
       stats-gl:
         specifier: ^2.0.1
         version: 2.4.2(@types/three@0.180.0)(three@0.180.0)
@@ -3264,6 +3267,12 @@ packages:
     resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
     engines: {node: '>=12'}
 
+  maath@0.10.8:
+    resolution: {integrity: sha512-tRvbDF0Pgqz+9XUa4jjfgAQ8/aPKmQdWXilFu2tMy4GWj4NOsx99HlULO4IeREfbO3a0sA145DZYyvXPkybm0g==}
+    peerDependencies:
+      '@types/three': '>=0.134.0'
+      three: '>=0.134.0'
+
   macos-release@3.3.0:
     resolution: {integrity: sha512-tPJQ1HeyiU2vRruNGhZ+VleWuMQRro8iFtJxYgnS4NQe+EukKF6aGiIT+7flZhISAt2iaXBCfFGvAyif7/f8nQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -7910,6 +7919,11 @@ snapshots:
 
   lru-cache@7.18.3: {}
 
+  maath@0.10.8(@types/three@0.180.0)(three@0.180.0):
+    dependencies:
+      '@types/three': 0.180.0
+      three: 0.180.0
+
   macos-release@3.3.0: {}
 
   magic-string@0.30.17:
diff --git a/src/core/controls/PresentationControls.vue b/src/core/controls/PresentationControls.vue
index 593d64650..24d29b470 100644
--- a/src/core/controls/PresentationControls.vue
+++ b/src/core/controls/PresentationControls.vue
@@ -1,195 +1,361 @@
-<script setup lang="ts">
-import { useRenderLoop, useTresContext } from '@tresjs/core'
-import { easing } from 'maath'
-import type { Group } from 'three'
-import { MathUtils } from 'three'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+<script lang="ts" setup>
 import { useEventListener } from '@vueuse/core'
+import { useLoop, useTres } from '@tresjs/core'
+import { MathUtils } from 'three'
+import type { Group } from 'three'
+import {
+  computed,
+  onUnmounted,
+  reactive,
+  ref,
+  shallowRef,
+  toRefs,
+  watchEffect,
+} from 'vue'
 
-interface PresentationControlsProps {
-  snap?: boolean | number
+type EulerArray = [number, number, number]
+type RangeTuple = [number, number]
+
+export interface PresentationControlsProps {
+  enabled?: boolean
+  snap?: boolean | number | { mass?: number, tension?: number }
+  /**
+   * Spring configuration while dragging
+   * @default { mass: 2, tension: 500 }
+   */
+  config?: { mass?: number, tension?: number }
   global?: boolean
   cursor?: boolean
   speed?: number
   zoom?: number
-  rotation?: [number, number, number]
-  polar?: [number, number]
-  azimuth?: [number, number]
+  rotation?: EulerArray
+  polar?: RangeTuple
+  azimuth?: RangeTuple
   damping?: number
-  enabled?: boolean
   domElement?: HTMLElement
 }
 
-const props = withDefaults(defineProps<PresentationControlsProps>(), {
-  enabled: true,
-  cursor: true,
-  speed: 1,
-  rotation: () => [0, 0, 0],
-  zoom: 1,
-  polar: () => [0, Math.PI / 2],
-  azimuth: () => [-Infinity, Infinity],
-  damping: 0.25,
-})
+const props = withDefaults(
+  defineProps<PresentationControlsProps>(),
+  {
+    enabled: true,
+    snap: undefined,
+    config: () => ({ mass: 2, tension: 500 }),
+    global: false,
+    cursor: true,
+    speed: 1,
+    rotation: () => [0, 0, 0],
+    zoom: 1,
+    polar: () => [0, Math.PI / 2],
+    azimuth: () => [
+      Number.NEGATIVE_INFINITY,
+      Number.POSITIVE_INFINITY,
+    ],
+    damping: 0.25,
+  },
+)
 
-const three = useTresContext()
-const renderer = three.renderer.value
-const sizes = three.sizes
-const explDomElement = props.domElement || renderer?.domElement
+const {
+  enabled,
+  snap,
+  global,
+  cursor,
+  speed,
+  rotation,
+  zoom,
+  polar,
+  azimuth,
+  damping,
+  config,
+  domElement,
+} = toRefs(props)
 
-const rPolar = computed<[number, number]>(() => [
-  props.rotation[0] + props.polar[0],
-  props.rotation[0] + props.polar[1],
-])
+const { sizes, renderer, invalidate } = useTres()
 
-const rAzimuth = computed<[number, number]>(() => [
-  props.rotation[1] + props.azimuth[0],
-  props.rotation[1] + props.azimuth[1],
-])
+const explDomElement = computed<
+  HTMLElement | undefined
+>(() => domElement.value || renderer.domElement)
 
-const rInitial = computed<[number, number, number]>(() => [
-  MathUtils.clamp(props.rotation[0], ...rPolar.value),
-  MathUtils.clamp(props.rotation[1], ...rAzimuth.value),
-  props.rotation[2],
+// Derived ranges and initial rotation (clamped)
+const rPolar = computed<RangeTuple>(() => [
+  rotation.value[0] + polar.value[0],
+  rotation.value[0] + polar.value[1],
+])
+const rAzimuth = computed<RangeTuple>(() => [
+  rotation.value[1] + azimuth.value[0],
+  rotation.value[1] + azimuth.value[1],
+])
+const rInitial = computed<EulerArray>(() => [
+  MathUtils.clamp(
+    rotation.value[0],
+    rPolar.value[0],
+    rPolar.value[1],
+  ),
+  MathUtils.clamp(
+    rotation.value[1],
+    rAzimuth.value[0],
+    rAzimuth.value[1],
+  ),
+  rotation.value[2],
 ])
 
-const groupRef = ref<Group | null>(null)
-let isDragging = false
-const animation = {
+// Animation target state
+const animation = reactive({
   scale: 1,
-  rotation: rInitial.value,
-  damping: props.damping,
-}
+  rotation: rInitial.value.slice() as EulerArray,
+  damping: damping.value,
+})
 
-watch(() => [props.global, props.cursor, props.enabled], ([global, cursor, enabled]) => {
-  if (global && cursor && enabled && explDomElement) {
-    explDomElement.style.cursor = 'grab'
-    if (renderer?.domElement) {
-      renderer.domElement.style.cursor = ''
-    }
-  }
-}, { immediate: true })
+// Spring velocities for scale and rotation components
+const velocity = reactive({
+  scale: 0,
+  rotation: [0, 0, 0] as EulerArray,
+})
+
+// 3D group ref
+const groupRef = shallowRef<Group | null>(null)
 
-watch(() => rInitial.value, (newValue) => {
-  if (!isDragging) {
-    animation.rotation = newValue
+// Drag handling (declare before render loop to satisfy linter ordering)
+const isDragging = ref(false)
+let startX = 0
+let startY = 0
+let startRotX = rInitial.value[1] // azimuth (around y)
+let startRotY = rInitial.value[0] // polar (around x)
+
+// Initialize once and integrate spring motion per-frame
+const initialized = ref(false)
+const { onBeforeRender } = useLoop()
+onBeforeRender(({ delta }) => {
+  const group = groupRef.value
+  if (!group) { return }
+
+  if (!initialized.value) {
+    group.rotation.set(rInitial.value[0], rInitial.value[1], rInitial.value[2])
+    group.scale.set(1, 1, 1)
+    initialized.value = true
   }
-}, { immediate: true })
 
-const { onLoop } = useRenderLoop()
-onLoop(({ delta }) => {
-  if (!groupRef.value) { return }
-  const adjustedDelta = delta * 2.5
-  easing.damp3(groupRef.value.scale, animation.scale, animation.damping, adjustedDelta)
-  easing.dampE(groupRef.value.rotation, animation.rotation, animation.damping, adjustedDelta)
-})
+  const dt = Math.max(0.000001, Math.min(0.05, delta))
 
-let lastPosition = { x: 0, y: 0 }
-let memo: [number, number] = [0, 0]
+  // Choose config depending on dragging/snap state
+  const isSnapping = (!isDragging.value) && !!snap.value
+  const baseConfig = isSnapping
+    ? (typeof snap.value === 'object' ? (snap.value as any) : {})
+    : (config.value || {})
+  const mass = Math.max(0.0001, Number(baseConfig.mass ?? (isSnapping ? 4 : 2)))
+  const tension = Math.max(0, Number(baseConfig.tension ?? (isSnapping ? 1500 : 500)))
+  const dampingRatio = (typeof snap.value === 'number' && isSnapping)
+    ? Math.max(0, Number(snap.value))
+    : Math.max(0, Number(animation.damping))
+  const c = 2 * Math.sqrt(tension * mass) * dampingRatio
 
-const handlePointerDown = (event: PointerEvent) => {
-  if (!props.enabled) { return }
-  isDragging = true
-  lastPosition = { x: event.clientX, y: event.clientY }
-  memo = [animation.rotation[0], animation.rotation[1]]
-  if (props.cursor && explDomElement) {
-    explDomElement.style.cursor = 'grabbing'
+  function stepScalar(current: number, target: number, v: number): [number, number] {
+    const a = (-(tension / mass) * (current - target)) - ((c / mass) * v)
+    const nv = v + a * dt
+    const nx = current + nv * dt
+    return [nx, nv]
   }
-}
 
-const handlePointerMove = (event: PointerEvent) => {
-  if (!isDragging || !props.enabled || !sizes) { return }
+  // Scale spring (uniform)
+  const [nx, nv] = stepScalar(group.scale.x, animation.scale, velocity.scale)
+  const clampedScale = Math.max(0.001, nx)
+  group.scale.set(clampedScale, clampedScale, clampedScale)
+  velocity.scale = nv
 
-  if (props.cursor) {
-    explDomElement.style.cursor = isDragging ? 'grabbing' : 'grab'
+  // Rotation springs per axis
+  const rTargets = animation.rotation
+  const rCurr = [group.rotation.x, group.rotation.y, group.rotation.z] as EulerArray
+  const newRot: EulerArray = [0, 0, 0]
+  const newVel: EulerArray = [0, 0, 0]
+  for (let i = 0; i < 3; i++) {
+    const [nr, nrv] = stepScalar(rCurr[i], rTargets[i], velocity.rotation[i])
+    newRot[i] = nr
+    newVel[i] = nrv
   }
+  group.rotation.set(newRot[0], newRot[1], newRot[2])
+  velocity.rotation = newVel as EulerArray
+})
 
-  const deltaX = event.clientX - lastPosition.x
-  const deltaY = event.clientY - lastPosition.y
+// Cursor management for global mode
+watchEffect((onCleanup) => {
+  const el = explDomElement.value
+  if (!el) {
+    return
+  }
+  if (
+    global.value
+    && cursor.value
+    && enabled.value
+  ) {
+    const original = el.style.cursor
+    el.style.cursor = 'grab'
+    onCleanup(() => {
+      el.style.cursor = original || 'default'
+    })
+  }
+})
 
-  const width = typeof sizes.width.value === 'number' ? sizes.width.value : Number(sizes.width.value)
-  const height = typeof sizes.height.value === 'number' ? sizes.height.value : Number(sizes.height.value)
+function beginDrag(
+  clientX: number,
+  clientY: number,
+) {
+  if (!enabled.value) {
+    return
+  }
+  isDragging.value = true
+  startX = clientX
+  startY = clientY
+  const current = (animation.rotation
+    || rInitial.value) as EulerArray
+  startRotY = current[0]
+  startRotX = current[1]
+  if (cursor.value && explDomElement.value) {
+    explDomElement.value.style.cursor
+      = 'grabbing'
+  }
+}
 
-  const movementMultiplier = 2.5
-  const x = MathUtils.clamp(
-    memo[1] + (deltaX / width) * Math.PI * props.speed * movementMultiplier,
+function updateDrag(
+  clientX: number,
+  clientY: number,
+) {
+  if (!enabled.value || !isDragging.value) {
+    return
+  }
+  const dx = clientX - startX
+  const dy = clientY - startY
+  const width = Math.max(1, sizes.width.value)
+  const height = Math.max(1, sizes.height.value)
+  let nextX
+    = startRotX
+      + (dx / width) * Math.PI * speed.value
+  let nextY
+    = startRotY
+      + (dy / height) * Math.PI * speed.value
+  nextX = MathUtils.clamp(
+    nextX,
     rAzimuth.value[0],
     rAzimuth.value[1],
   )
-  const y = MathUtils.clamp(
-    memo[0] + (deltaY / height) * Math.PI * props.speed * movementMultiplier,
+  nextY = MathUtils.clamp(
+    nextY,
     rPolar.value[0],
     rPolar.value[1],
   )
 
-  animation.scale = isDragging && y > rPolar.value[1] / 2 ? props.zoom : 1
-  animation.rotation = [y, x, 0]
-  animation.damping = props.damping * 0.1
-
-  memo = [y, x]
-  lastPosition = { x: event.clientX, y: event.clientY }
+  animation.scale
+    = nextY > rPolar.value[1] / 2 ? zoom.value : 1
+  animation.rotation = [nextY, nextX, 0]
+  animation.damping = damping.value
+  invalidate()
 }
 
-const handlePointerUp = () => {
-  isDragging = false
-  if (props.cursor && explDomElement) {
-    explDomElement.style.cursor = 'grab'
+function endDrag() {
+  if (!enabled.value) {
+    return
   }
-
-  animation.damping = props.damping * 0.01
-
-  if (props.snap) {
-    animation.scale = 1
-    animation.rotation = rInitial.value
-    animation.damping = typeof props.snap === 'number' ? props.snap : props.damping * 0.01
+  isDragging.value = false
+  animation.scale = 1
+  if (cursor.value && explDomElement.value) {
+    explDomElement.value.style.cursor = 'grab'
   }
-
-  setTimeout(() => {
-    animation.damping = props.damping
-  }, 500)
+  if (snap.value) {
+    animation.rotation
+      = rInitial.value.slice() as EulerArray
+  }
+  animation.damping
+    = typeof snap.value === 'number'
+      ? snap.value
+      : damping.value
+  invalidate()
 }
 
-const handleHover = (event: MouseEvent) => {
-  if (props.cursor && !props.global && props.enabled && explDomElement) {
-    explDomElement.style.cursor = event.type === 'mouseleave' ? 'auto' : 'grab'
+// Local (non-global) pointer handlers – early-return if global mode
+function onPointerEnter() {
+  if (global.value || !enabled.value) {
+    return
+  }
+  if (cursor.value && explDomElement.value) {
+    explDomElement.value.style.cursor = 'grab'
   }
 }
+function onPointerLeave() {
+  if (global.value || !enabled.value) {
+    return
+  }
+  if (
+    cursor.value
+    && explDomElement.value
+    && !isDragging.value
+  ) {
+    explDomElement.value.style.cursor = 'auto'
+  }
+}
+function onPointerDown(e: PointerEvent) {
+  if (global.value) {
+    return
+  }
+  beginDrag(e.clientX, e.clientY)
+}
+function onPointerMove(e: PointerEvent) {
+  if (global.value) {
+    return
+  }
+  updateDrag(e.clientX, e.clientY)
+}
+function onPointerUp() {
+  if (global.value) {
+    return
+  }
+  endDrag()
+}
 
-onMounted(() => {
-  if (props.global) {
-    const target = props.domElement || renderer?.domElement || window
-    useEventListener(target, 'pointerdown', handlePointerDown)
-    useEventListener(window, 'pointermove', handlePointerMove)
-    useEventListener(window, 'pointerup', handlePointerUp)
-    useEventListener(target, 'mouseenter', handleHover)
-    useEventListener(target, 'mouseleave', handleHover)
+// Global listeners when global=true
+watchEffect((onCleanup) => {
+  if (!global.value || !explDomElement.value) {
+    return
+  }
+  const el = explDomElement.value
+  const down = (e: PointerEvent) =>
+    beginDrag(e.clientX, e.clientY)
+  const move = (e: PointerEvent) =>
+    updateDrag(e.clientX, e.clientY)
+  const up = () => endDrag()
+  const leave = () => {
+    if (!isDragging.value) {
+      if (cursor.value) {
+        el.style.cursor = 'grab'
+      }
+    }
   }
+  useEventListener(el, 'pointerdown', down)
+  useEventListener(el, 'pointermove', move)
+  useEventListener(el, 'pointerup', up)
+  useEventListener(el, 'pointerleave', leave)
+  onCleanup(() => {
+    // listeners auto-removed by useEventListener's scope disposal
+  })
 })
 
 onUnmounted(() => {
-  if (explDomElement) {
-    explDomElement.style.cursor = 'default'
-  }
-  if (renderer?.domElement) {
-    renderer.domElement.style.cursor = 'default'
+  // Reset cursor if we changed it
+  const el = explDomElement.value
+  if (el && cursor.value) {
+    el.style.cursor = 'default'
   }
 })
+
+defineExpose({ instance: groupRef })
 </script>
 
 <template>
   <TresGroup
-    v-if="!global"
-    ref="groupRef"
-    @pointerdown="handlePointerDown"
-    @pointermove="handlePointerMove"
-    @pointerup="handlePointerUp"
-    @mouseenter="handleHover"
-    @mouseleave="handleHover"
-  >
-    <slot></slot>
-  </TresGroup>
-  <TresGroup
-    v-else
     ref="groupRef"
+    @pointerenter="onPointerEnter"
+    @pointerleave="onPointerLeave"
+    @pointerdown="onPointerDown"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
   >
     <slot></slot>
   </TresGroup>