u

src/index.html

@@ -22,6 +22,8 @@
             <p>🤏 Pinch to zoom: Zoom in/out</p>
             <p>✌️ Two finger drag: Pan around scene</p>
             <hr style="margin: 10px 0; border: 1px solid #555;">
+            <p>🚶 <button id="fpv-btn" style="background: #2196F3; color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; margin-right: 10px;">Enter FPV Mode</button> <span style="font-size: 11px; color: #aaa;">(or press F key to toggle)</span></p>
+            <p style="font-size: 11px; color: #aaa; margin: 5px 0;">In FPV: WASD to move, mouse to look, F or ESC to exit</p>
             <button id="print-btn" style="background: #4CAF50; color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; font-size: 12px;">🖨️ Print</button>
         </div>
     </div>

src/index.js

@@ -137,6 +137,9 @@ async function init() {
     // Setup manual print button
     setupPrintButton();
     
+    // Setup FPV button
+    setupFPVButton();
+    
     // Setup FPV controls
     setupFPVControls();
     
@@ -396,6 +399,24 @@ function setupPrintButton() {
     console.log('🖨️ Manual print button set up');
 }
 
+function setupFPVButton() {
+    const fpvBtn = document.getElementById('fpv-btn');
+    if (!fpvBtn) {
+        console.warn('FPV button not found');
+        return;
+    }
+    
+    fpvBtn.addEventListener('click', () => {
+        if (!fpvMode) {
+            enterFPVMode();
+        } else {
+            exitFPVMode();
+        }
+    });
+    
+    console.log('🚶 FPV button set up');
+}
+
 function setupLighting() {
     // Ambient light for overall illumination - increased intensity
     const ambientLight = new THREE.AmbientLight(0x404040, 1.2);
@@ -822,10 +843,14 @@ function setupFPVControls() {
 function onKeyDown(event) {
     switch (event.code) {
         case 'KeyF':
+            event.preventDefault();
+            event.stopPropagation();
             if (!fpvMode) {
                 enterFPVMode();
+            } else {
+                exitFPVMode();
             }
-            break;
+            return false;
         case 'Escape':
             if (fpvMode) {
                 event.preventDefault();
@@ -835,16 +860,16 @@ function onKeyDown(event) {
             }
             break;
         case 'KeyW':
-            fpvControls.moveForward = true;
+            if (fpvMode) fpvControls.moveForward = true;
             break;
         case 'KeyA':
-            fpvControls.moveLeft = true;
+            if (fpvMode) fpvControls.moveLeft = true;
             break;
         case 'KeyS':
-            fpvControls.moveBackward = true;
+            if (fpvMode) fpvControls.moveBackward = true;
             break;
         case 'KeyD':
-            fpvControls.moveRight = true;
+            if (fpvMode) fpvControls.moveRight = true;
             break;
     }
 }
@@ -852,16 +877,16 @@ function onKeyDown(event) {
 function onKeyUp(event) {
     switch (event.code) {
         case 'KeyW':
-            fpvControls.moveForward = false;
+            if (fpvMode) fpvControls.moveForward = false;
             break;
         case 'KeyA':
-            fpvControls.moveLeft = false;
+            if (fpvMode) fpvControls.moveLeft = false;
             break;
         case 'KeyS':
-            fpvControls.moveBackward = false;
+            if (fpvMode) fpvControls.moveBackward = false;
             break;
         case 'KeyD':
-            fpvControls.moveRight = false;
+            if (fpvMode) fpvControls.moveRight = false;
             break;
     }
 }
@@ -908,6 +933,13 @@ function enterFPVMode() {
     fpvControls.rotation.y = 0;
     fpvControls.velocity.set(0, 0, 0);
     
+    // Update button text
+    const fpvBtn = document.getElementById('fpv-btn');
+    if (fpvBtn) {
+        fpvBtn.textContent = 'Exit FPV Mode';
+        fpvBtn.style.background = '#FF5722';
+    }
+    
     // Request pointer lock
     renderer.domElement.requestPointerLock();
     
@@ -916,15 +948,34 @@ function enterFPVMode() {
 
 function exitFPVMode() {
     console.log('🔄 Exiting FPV mode');
+    
+    // Exit pointer lock first, before changing fpvMode
+    if (document.pointerLockElement) {
+        document.exitPointerLock();
+    }
+    
+    // Small delay to ensure pointer lock has been released
+    setTimeout(() => {
         fpvMode = false;
         
         // Re-enable orbit controls
         controls.enabled = true;
         
-    // Exit pointer lock
-    document.exitPointerLock();
+        // Update button text
+        const fpvBtn = document.getElementById('fpv-btn');
+        if (fpvBtn) {
+            fpvBtn.textContent = 'Enter FPV Mode';
+            fpvBtn.style.background = '#2196F3';
+        }
+        
+        // Reset movement controls
+        fpvControls.moveForward = false;
+        fpvControls.moveBackward = false;
+        fpvControls.moveLeft = false;
+        fpvControls.moveRight = false;
         
         console.log('Orbit controls restored');
+    }, 50);
 }
 
 function updateFPVMovement() {