From d0ea77f4b1c15cd55cc9ff8274a60d9f5d542566 Mon Sep 17 00:00:00 2001 From: sebseb7 Date: Mon, 25 Aug 2025 10:04:04 +0200 Subject: [PATCH] u --- src/index.html | 2 ++ src/index.js | 83 ++++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 69 insertions(+), 16 deletions(-) diff --git a/src/index.html b/src/index.html index 38e6c6f..1926a48 100644 --- a/src/index.html +++ b/src/index.html @@ -22,6 +22,8 @@

🤏 Pinch to zoom: Zoom in/out

✌️ Two finger drag: Pan around scene


+

🚶 (or press F key to toggle)

+

In FPV: WASD to move, mouse to look, F or ESC to exit

diff --git a/src/index.js b/src/index.js index c17ad7b..efdb191 100644 --- a/src/index.js +++ b/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'); - fpvMode = false; - // Re-enable orbit controls - controls.enabled = true; + // Exit pointer lock first, before changing fpvMode + if (document.pointerLockElement) { + document.exitPointerLock(); + } - // Exit pointer lock - document.exitPointerLock(); - - console.log('Orbit controls restored'); + // Small delay to ensure pointer lock has been released + setTimeout(() => { + fpvMode = false; + + // Re-enable orbit controls + controls.enabled = true; + + // 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() {