Add reset view function

TODO.md

@@ -44,7 +44,7 @@ A step-by-step checklist for porting MatterControl's design features to a Vue +
 ### Camera Controls
 - [x] Install and configure OrbitControls (zoom, pan, orbit)
 - [x] Add "fit to selection" camera function
-- [ ] Add "reset view" function (home position)
+- [x] Add "reset view" function (home position)
 - [ ] Add view presets (front, back, top, bottom, left, right)
 - [ ] Add orthographic/perspective toggle
 

src/components/Viewport.vue

@@ -25,6 +25,9 @@ let gridHelper: THREE.GridHelper
 let axisHelper: THREE.AxesHelper
 let controls: OrbitControls
 
+const HOME_POSITION = new THREE.Vector3(5, 5, 5)
+const HOME_TARGET = new THREE.Vector3(0, 0, 0)
+
 function initScene() {
   if (!containerRef.value) return
 
@@ -35,8 +38,8 @@ function initScene() {
   // Create camera
   const { clientWidth: width, clientHeight: height } = containerRef.value
   camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000)
-  camera.position.set(5, 5, 5)
+  camera.position.copy(HOME_POSITION)
-  camera.lookAt(0, 0, 0)
+  camera.lookAt(HOME_TARGET)
 
   // Create renderer
   renderer = new THREE.WebGLRenderer({ antialias: true })
@@ -160,6 +163,12 @@ function fitToSelection(objects: THREE.Object3D[]) {
   controls.update()
 }
 
+function resetView() {
+  camera.position.copy(HOME_POSITION)
+  controls.target.copy(HOME_TARGET)
+  controls.update()
+}
+
 function cleanup() {
   if (animationFrameId) {
     cancelAnimationFrame(animationFrameId)
@@ -189,6 +198,7 @@ onBeforeUnmount(() => {
 
 defineExpose({
   fitToSelection,
+  resetView,
 })
 </script>