Update ar.html

ar.html

@@ -32,7 +32,10 @@
 
         /* --- ENGINE GRAFICO (Camera e Canvas) --- */
         
-        video {
+        /* FIX Z-INDEX: Applichiamo lo stile SOLO al video della webcam generato da MindAR */
+        /* MindAR non da una classe specifica facile, ma è l'unico video diretto nel body solitamente. 
+           Tuttavia, per sicurezza usiamo una regola che esclude il nostro #vid */
+        video:not(#vid) {
             position: fixed !important;
             top: 0 !important; 
             left: 0 !important; 
@@ -45,6 +48,18 @@
             margin: 0 !important;
             padding: 0 !important;
         }
+
+        /* Nascondiamo il video sorgente dalla vista (ma deve esistere per la texture) */
+        #vid {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 1px;
+            height: 1px;
+            opacity: 0;
+            z-index: -100;
+            pointer-events: none;
+        }
         
         .a-canvas {
             position: fixed !important;
@@ -128,6 +143,15 @@
             color: white;
             font-weight: bold;
             box-shadow: 0 0 15px rgba(255, 0, 85, 0.5);
+            cursor: pointer;
+        }
+
+        .animate-fade-in {
+            animation: fadeIn 0.5s ease-out forwards;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
         }
     </style>
 </head>
@@ -156,7 +180,6 @@
                 <span id="sys-status" class="text-[#00ff41] font-bold text-lg tracking-wider animate-pulse">SCANNING...</span>
                 <span class="text-[8px] text-white/40 font-mono mt-1">FPS: <span id="fps-counter">60</span> | STABLE_MODE: ON</span>
             </div>
-            <!-- Pulsante chiusura (Decorativo o funzionale se necessario) -->
             <div class="w-10 h-10 flex items-center justify-center border border-[#00ff41]/50 rounded-full bg-black/40 backdrop-blur-md opacity-50">
                 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#00ff41" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
             </div>
@@ -202,7 +225,6 @@
     </button>
 
     <!-- AR SCENE -->
-    <!-- Rimosso il filterBeta troppo basso che causava lag, tornati a valori bilanciati per il JS Smoothing -->
     <a-scene 
         mindar-image="imageTargetSrc: img/targets.mind; filterMinCF:0.0001; filterBeta: 0.01; uiLoading: no; uiScanning: no; missTolerance: 20; warmupTolerance: 5; maxTrack: 1" 
         color-space="sRGB" 
@@ -211,14 +233,37 @@
         device-orientation-permission-ui="enabled: false">
         
         <a-assets>
+            <!-- IL VIDEO SORGENTE (nascosto visivamente via CSS ma caricato qui) -->
             <video id="vid" src="./img/video.mp4" preload="auto" loop muted playsinline webkit-playsinline crossorigin="anonymous"></video>
         </a-assets>
 
-        <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
+        <!-- CAMERA + HUD MANUALE -->
+        <a-camera position="0 0 0" look-controls="enabled: false">
+            <!-- Questo gruppo è fissato alla camera (HUD) ma inizialmente INVISIBILE -->
+            <!-- Lo accendiamo solo in modalità manuale -->
+            <a-entity id="manual-hud" visible="false" position="0 0 -1.5" scale="0.5 0.5 0.5">
+                 <!-- VIDEO -->
+                 <a-entity 
+                    geometry="primitive: plane; width: 1.6; height: 0.9" 
+                    material="src: #vid; shader: flat; transparent: true; opacity: 1">
+                </a-entity>
+                
+                <!-- CORNICI (Copiate dalla versione AR) -->
+                <a-plane position="0 0.47 0" width="1.68" height="0.03" color="#00ff41" material="shader: flat">
+                    <a-animation attribute="opacity" from="1" to="0.7" dur="100" direction="alternate" repeat="indefinite"></a-animation>
+                </a-plane>
+                <a-plane position="0 -0.47 0" width="1.68" height="0.03" color="#00ff41" material="shader: flat"></a-plane>
+                <a-plane position="-0.83 0 0" width="0.03" height="0.96" color="#00ff41" material="shader: flat"></a-plane>
+                <a-plane position="0.83 0 0" width="0.03" height="0.96" color="#00ff41" material="shader: flat">
+                    <a-animation attribute="opacity" from="1" to="0.7" dur="150" direction="alternate" repeat="indefinite"></a-animation>
+                </a-plane>
+                <a-text value="MANUAL_OVERRIDE" color="#ff0055" align="center" width="1.5" position="0 -0.6 0.01" 
+                        font="https://cdn.aframe.io/fonts/Roboto-msdf.json"></a-text>
+            </a-entity>
+        </a-camera>
 
-        <!-- TARGET MINDAR -->
+        <!-- TARGET MINDAR (AR REALE) -->
         <a-entity id="example-target" mindar-image-target="targetIndex: 0">
-            <!-- GRUPPO CONTENUTO: Mettiamo tutto qui dentro per poterlo spostare facilmente -->
             <a-entity id="ar-content-group">
                 <!-- VIDEO -->
                 <a-entity id="myVid" 
@@ -263,8 +308,8 @@
         const fpsCounter = document.querySelector("#fps-counter");
         const fallbackBtn = document.querySelector("#fallback-btn");
         
-        const contentGroup = document.querySelector("#ar-content-group");
-        const camera = document.querySelector("a-camera");
+        const arContentGroup = document.querySelector("#ar-content-group");
+        const manualHud = document.querySelector("#manual-hud");
         const manualCloseBtn = document.querySelector("#manual-close-btn");
 
         let isAudioEnabled = false;
@@ -275,28 +320,21 @@
         let smoothPositionX = 0;
         let smoothPositionY = 0;
         let smoothPositionZ = 0;
-        const SMOOTHING_FACTOR = 0.1; // Torniamo al valore originale (buon bilanciamento)
+        const SMOOTHING_FACTOR = 0.1; // Smooth originale
 
         // CUSTOM SMOOTHING LAYER
         const myVidEntity = document.querySelector("#myVid");
         
         setInterval(() => {
-            // Applica solo se in modalità AR normale (target visible)
+            // Applica smoothing solo alla parte AR Reale
             if(myVidEntity && target.object3D.visible && !isManualMode) {
                 const currentPos = target.object3D.position;
-                
-                // Rimosso il Deadzone Threshold che causava la "frizione"
-                // Torniamo a un puro Lerp fluido
                 smoothPositionX += (currentPos.x - smoothPositionX) * SMOOTHING_FACTOR;
                 smoothPositionY += (currentPos.y - smoothPositionY) * SMOOTHING_FACTOR;
                 smoothPositionZ += (currentPos.z - smoothPositionZ) * SMOOTHING_FACTOR;
                 
-                // Applichiamo al gruppo interno per dare l'effetto di "galleggiamento" stabile
-                // Nota: In modalità normale il parent #example-target si muove con MindAR.
-                // Questo script dovrebbe idealmente agire su un oggetto slegato, ma qui lasciamo
-                // che MindAR gestisca il grosso e il filterBeta faccia il resto.
-                // Per un vero custom smoothing, bisognerebbe disaccoppiare la gerarchia, 
-                // ma dato che ti piaceva "prima", torniamo alla config standard di MindAR + CSS anims.
+                // Nota: MindAR controlla il parent, noi non modifichiamo il target qui
+                // ma le variabili sono pronte se volessimo sganciare il contenuto
             }
         }, 16); 
 
@@ -306,7 +344,7 @@
             fpsCounter.innerText = fakeFps;
         }, 1000);
 
-        // Loading Messages
+        // Loading
         const nerdMessages = [
             "Calibrating sensors...",
             "Loading neural net...",
@@ -315,19 +353,15 @@
         ];
         let msgIndex = 0;
         
-        // Caricamento Veloce
         const loadInterval = setInterval(() => {
             loadProgress += 0.55; 
-            
             if(loadProgress > 100) loadProgress = 100;
             loadingPercent.innerText = Math.floor(loadProgress) + "%";
             progressBar.style.width = loadProgress + "%";
-            
             if(Math.floor(loadProgress) % 25 === 0 && msgIndex < nerdMessages.length) {
                 document.querySelector('#load-msg').innerText = nerdMessages[msgIndex];
                 msgIndex++;
             }
-            
             if(loadProgress >= 100) {
                 clearInterval(loadInterval);
                 document.querySelector('#load-msg').innerText = "System Ready.";
@@ -337,7 +371,6 @@
         // AR PRONTA
         scene.addEventListener("arReady", () => {
             console.log("✅ AR SYSTEM ONLINE");
-            
             const checkLoad = setInterval(() => {
                 if(loadProgress >= 100) {
                     clearInterval(checkLoad);
@@ -345,15 +378,13 @@
                         loader.style.opacity = "0";
                         setTimeout(() => loader.style.display = "none", 500);
                         
-                        // TIMER 10 SECONDI PER IL BOTTONE FALLBACK
-                        // ORA APPARE SEMPRE (indipendentemente dal marker trovato)
+                        // TIMER 10 SECONDI: Il bottone appare SEMPRE
                         setTimeout(() => {
                             if (!isManualMode) {
                                 fallbackBtn.classList.remove('hidden');
                                 fallbackBtn.style.display = 'flex';
                             }
                         }, 10000);
-
                     }, 500);
                 }
             }, 100);
@@ -362,23 +393,17 @@
         // TARGET FOUND
         target.addEventListener("targetFound", () => {
             if(isManualMode) return;
-
             video.play();
             statusText.innerText = "LOCKED";
             statusText.style.color = "#fff";
             statusText.classList.remove("animate-pulse");
             aimOverlay.style.opacity = "0";
-            
-            // NON nascondiamo più il bottone fallback se è già apparso
-            // Se appare dopo 10 secondi, rimane lì come opzione
-
             if(navigator.vibrate) navigator.vibrate(50);
         });
 
         // TARGET LOST
         target.addEventListener("targetLost", () => {
             if(isManualMode) return;
-
             video.pause();
             statusText.innerText = "SEARCHING...";
             statusText.style.color = "#00ff41";
@@ -394,9 +419,7 @@
                 audioText.innerText = "AUDIO ON";
                 audioBtn.classList.add("bg-[#00ff41]", "text-black");
                 audioBtn.classList.remove("bg-[#00ff41]/10", "text-[#00ff41]");
-                
                 if(navigator.vibrate) navigator.vibrate(50);
-                
                 setTimeout(() => {
                     audioBtn.style.opacity = "0";
                     audioBtn.style.pointerEvents = "none";
@@ -409,18 +432,11 @@
             isManualMode = true;
             console.log("🛠 MANUAL OVERRIDE ENGAGED");
 
-            // 1. Sposta il contenuto AR dentro la camera (HUD)
-            contentGroup.parentNode.removeChild(contentGroup);
-            camera.appendChild(contentGroup);
-            
-            // FIX IMPORTANTE: Rendiamo il contenuto esplicitamente visibile
-            // MindAR potrebbe averlo nascosto quando ha perso il target
-            contentGroup.setAttribute("visible", "true"); 
+            // 1. Spegni AR Reale
+            arContentGroup.setAttribute("visible", "false"); 
             
-            // 2. Posiziona il contenuto di fronte alla camera
-            contentGroup.setAttribute("position", "0 0 -1.5"); 
-            contentGroup.setAttribute("scale", "0.5 0.5 0.5"); 
-            contentGroup.setAttribute("rotation", "0 0 0");
+            // 2. Accendi HUD Manuale (Clone)
+            manualHud.setAttribute("visible", "true");
 
             // 3. UI Updates
             aimOverlay.style.display = "none";