From e19eee5f74543b72cf79cf1731b636bee1b78786 Mon Sep 17 00:00:00 2001
From: Nettika <git@nettika.cat>
Date: Wed, 28 Jan 2026 23:57:44 -0800
Subject: [PATCH] Add orbit controls

---
 TODO.md                     |  2 +-
 src/components/Viewport.vue | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/TODO.md b/TODO.md
index a462d2265..48e129217 100644
--- a/TODO.md
+++ b/TODO.md
@@ -42,7 +42,7 @@ A step-by-step checklist for porting MatterControl's design features to a Vue +
 - [x] Add option to toggle axis visibility
 
 ### Camera Controls
-- [ ] Install and configure OrbitControls (zoom, pan, orbit)
+- [x] Install and configure OrbitControls (zoom, pan, orbit)
 - [ ] Add "fit to selection" camera function
 - [ ] Add "reset view" function (home position)
 - [ ] Add view presets (front, back, top, bottom, left, right)
diff --git a/src/components/Viewport.vue b/src/components/Viewport.vue
index 14fccab56..bb2c09bda 100644
--- a/src/components/Viewport.vue
+++ b/src/components/Viewport.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
 import * as THREE from 'three'
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
 
 const props = withDefaults(
   defineProps<{
@@ -22,6 +23,7 @@ let animationFrameId: number
 let resizeObserver: ResizeObserver
 let gridHelper: THREE.GridHelper
 let axisHelper: THREE.AxesHelper
+let controls: OrbitControls
 
 function initScene() {
   if (!containerRef.value) return
@@ -42,6 +44,11 @@ function initScene() {
   renderer.setPixelRatio(window.devicePixelRatio)
   containerRef.value.appendChild(renderer.domElement)
 
+  // Setup orbit controls
+  controls = new OrbitControls(camera, renderer.domElement)
+  controls.enableDamping = true
+  controls.dampingFactor = 0.05
+
   // Add lighting
   addLighting()
 
@@ -129,6 +136,7 @@ function setupResizeObserver() {
 
 function animate() {
   animationFrameId = requestAnimationFrame(animate)
+  controls.update()
   renderer.render(scene, camera)
 }
 
@@ -141,6 +149,10 @@ function cleanup() {
     resizeObserver.disconnect()
   }
 
+  if (controls) {
+    controls.dispose()
+  }
+
   if (renderer) {
     renderer.dispose()
     renderer.domElement.remove()