Add orbit controls

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)

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()