Merge pull request #8 from ScaDS/move-to-near-point-button

Add "Move to Near Point" button

Author: haesleinhuepf

README.md

@@ -70,10 +70,13 @@ test\Image_2562.jpg, 12.263655, 5.8971086, -0.066879705
 ## Controls
 
 ### Camera Movement
-- **W / A / S / D** - Move forward, left, backward, right
-- **E** - Move up
-- **Y** - Move down
-- **Mouse** - Look around (click to enable pointer lock)
+- **W / A / S / D**: Move forward, left, backward, right
+- **E / Y**: Move up / Down
+- **I / J / K / L**: Rotate upward, left, downwar, righ
+- **U / M**: Rotate counter-clockwise, clockwise
+- **O**: Move to Near Point
+- **Space**: Add keyframe
+- **Mouse**: Look around (click to enable pointer lock)
 - **Touch control**
   * 1 finger: Rotate view
   * 2 fingers: Zoom

vest/static/viewer.js

@@ -327,7 +327,7 @@ class CameraController {
         if (this.keys['k']) euler.x -= this.rotationStep;
         if (this.keys['j']) euler.y += this.rotationStep;
         if (this.keys['l']) euler.y -= this.rotationStep;
-        if (this.keys['o']) euler.z -= this.rotationStep;
+        if (this.keys['u']) euler.z -= this.rotationStep;
         if (this.keys['m']) euler.z += this.rotationStep;
 
         // Prevent flipping over the top/bottom
@@ -486,6 +486,9 @@ class ImageViewer {
         // Setup keyframe controls
         this.initKeyframeControls();
 
+        // Setup near-point jump controls
+        this.initNearPointControls();
+
         // Setup color mode dropdown
         this.initColorModeControl();
         this.initColorIntensityControls();
@@ -1382,6 +1385,63 @@ class ImageViewer {
         }
     }
 
+    getNearestSpriteInfo(preferInFront = true) {
+        if (this.imageSprites.length === 0) {
+            return null;
+        }
+
+        const cameraForward = new THREE.Vector3();
+        this.camera.getWorldDirection(cameraForward);
+
+        const distances = this.imageSprites.map((sprite, index) => {
+            const distance = this.camera.position.distanceTo(sprite.position);
+            const toSprite = new THREE.Vector3().subVectors(sprite.position, this.camera.position).normalize();
+            const dotProduct = cameraForward.dot(toSprite);
+
+            return {
+                sprite,
+                distance,
+                index,
+                inFront: dotProduct > this.fovConeThreshold
+            };
+        });
+
+        const inFrontSprites = distances
+            .filter(item => item.inFront)
+            .sort((a, b) => a.distance - b.distance);
+
+        if (preferInFront && inFrontSprites.length > 0) {
+            return inFrontSprites[0];
+        }
+
+        distances.sort((a, b) => a.distance - b.distance);
+        return distances[0] || null;
+    }
+
+    jumpNearNearestPoint() {
+        const nearest = this.getNearestSpriteInfo(true);
+        if (!nearest?.sprite) {
+            return;
+        }
+
+        const nearPointPosition = nearest.sprite.position.clone();
+        const offsetDirection = new THREE.Vector3().subVectors(this.camera.position, nearPointPosition);
+
+        if (offsetDirection.lengthSq() < 1e-10) {
+            this.camera.getWorldDirection(offsetDirection);
+            offsetDirection.multiplyScalar(-1);
+        }
+
+        offsetDirection.normalize();
+
+        // Keep the camera extremely close to the near point, but not exactly at the same location.
+        const offsetDistance = Math.max(0.1, Math.min(0.001, this.imageSize * 0.1));
+        const targetPosition = nearPointPosition.add(offsetDirection.multiplyScalar(offsetDistance));
+
+        this.camera.position.copy(targetPosition);
+        this.camera.lookAt(nearest.sprite.position);
+    }
+
     updateNearestPoint() {
         if (this.imageSprites.length === 0) return;
 
@@ -1738,12 +1798,39 @@ class ImageViewer {
         });
     }
 
+    initNearPointControls() {
+        const nearBtn = document.getElementById('btn-near');
+        if (!nearBtn) return;
+
+        nearBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            this.jumpNearNearestPoint();
+        });
+
+        nearBtn.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            this.jumpNearNearestPoint();
+        }, { passive: false });
+    }
+
     initGlobalKeyboardShortcuts() {
         document.addEventListener('keydown', (e) => {
             // Space key adds a keyframe
             if (e.key === ' ' || e.code === 'Space') {
                 e.preventDefault(); // Prevent default scrolling behavior
                 this.addKeyframe();
+                return;
+            }
+
+            // Jump very near the current nearest point.
+            if (!e.ctrlKey && !e.metaKey && !e.altKey && e.key.toLowerCase() === 'o') {
+                e.preventDefault();
+                if (this.controller?.keys) {
+                    this.controller.keys['o'] = false;
+                }
+                if (!e.repeat) {
+                    this.jumpNearNearestPoint();
+                }
             }
         });
     }

vest/templates/viewer.html

@@ -654,6 +654,11 @@
             grid-column: 3;
             grid-row: 3;
         }
+
+        .arrow-btn:nth-child(7) {
+            grid-column: 2;
+            grid-row: 2;
+        }
     </style>
 </head>
 <body>
@@ -703,6 +708,10 @@ <h3>Controls</h3>
                 <button class="arrow-btn" id="btn-right" title="Right (D)">→</button>
                 <button class="arrow-btn" id="btn-forward" title="Forward (W)">↖</button>
                 <button class="arrow-btn" id="btn-back" title="Backward (S)">↘</button>
+                <button class="arrow-btn" id="btn-near" title="Jump to Near Point (O)">O</button>
+            </div>
+            <div class="control-section" style="margin-top: 8px;">
+                <span class="control-key">O</span> Jump to near point
             </div>
             <button id="reset-view-btn" class="keyframe-btn" style="width: 100%; margin-top: 10px;">Reset View</button>
         </div>