diff --git a/TODO.md b/TODO.md index 58d584db2..7b946cd06 100644 --- a/TODO.md +++ b/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 diff --git a/src/components/Viewport.vue b/src/components/Viewport.vue index 93ff2cc37..d7059fdbb 100644 --- a/src/components/Viewport.vue +++ b/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.lookAt(0, 0, 0) + camera.position.copy(HOME_POSITION) + 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, })