Spaces:
Running
Running
| <html lang="it"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> | |
| <title>AR Video 9:16 + Mirino Verticale</title> | |
| <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.2/dist/mindar-image.prod.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.2/dist/mindar-image-aframe.prod.js"></script> | |
| <style> | |
| body { margin: 0; overflow: hidden; background-color: black; } | |
| #vid { position: absolute; top: 0; left: 0; opacity: 0; z-index: -1; pointer-events: none; } | |
| /* --- STILE DEL MIRINO (Aggiornato per 9:16) --- */ | |
| #viewfinder-container { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| /* Larghezza relativa */ | |
| width: 50vw; | |
| /* Altezza calcolata per mantenere il rapporto ~9:16 rispetto alla larghezza */ | |
| height: 89vw; | |
| /* Limiti massimi in pixel per schermi grandi (desktop/tablet) */ | |
| /* Se la larghezza max è 270px, l'altezza sarà circa 480px (270 * 1.77) */ | |
| max-width: 270px; | |
| max-height: 480px; | |
| z-index: 10; | |
| pointer-events: none; /* Lascia passare i click */ | |
| } | |
| /* Stile comune per i 4 angoli */ | |
| .corner { | |
| position: absolute; | |
| width: 40px; | |
| height: 40px; | |
| border-color: rgba(255, 255, 255, 0.8); | |
| border-style: solid; | |
| border-width: 0; | |
| box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Aggiunta ombra per visibilità su sfondi chiari */ | |
| } | |
| /* Posizionamento angoli */ | |
| .corner-tl { top: 0; left: 0; border-top-width: 4px; border-left-width: 4px; } | |
| .corner-tr { top: 0; right: 0; border-top-width: 4px; border-right-width: 4px; } | |
| .corner-bl { bottom: 0; left: 0; border-bottom-width: 4px; border-left-width: 4px; } | |
| .corner-br { bottom: 0; right: 0; border-bottom-width: 4px; border-right-width: 4px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="viewfinder-container"> | |
| <div class="corner corner-tl"></div> | |
| <div class="corner corner-tr"></div> | |
| <div class="corner corner-bl"></div> | |
| <div class="corner corner-br"></div> | |
| </div> | |
| <a-scene | |
| mindar-image="imageTargetSrc: targets.mind; filterMinCF:0.0001; filterBeta: 0.01; uiLoading: no; uiScanning: no;" | |
| color-space="sRGB" | |
| renderer="colorManagement: true, physicallyCorrectLights" | |
| vr-mode-ui="enabled: false" | |
| device-orientation-permission-ui="enabled: false"> | |
| <a-assets> | |
| <video id="vid" src="./video.mp4" loop muted playsinline webkit-playsinline crossorigin="anonymous"></video> | |
| </a-assets> | |
| <a-camera position="0 0 0" look-controls="enabled: false"></a-camera> | |
| <a-entity id="example-target" mindar-image-target="targetIndex: 0"> | |
| <a-entity id="ar-video-plane" | |
| geometry="primitive: plane; width: 1; height: 1.78" | |
| material="src: #vid; shader: flat; transparent: true; opacity: 1" | |
| position="0 0 0"> | |
| </a-entity> | |
| </a-entity> | |
| </a-scene> | |
| <script> | |
| const video = document.querySelector("#vid"); | |
| const target = document.querySelector("#example-target"); | |
| // Opzionale: riferimento al mirino se volessi nasconderlo quando trova il target | |
| const viewfinder = document.querySelector("#viewfinder-container"); | |
| target.addEventListener("targetFound", () => { | |
| console.log("Target trovato: Play video"); | |
| video.play(); | |
| // Effetto visivo: il mirino diventa più trasparente quando trova il target | |
| viewfinder.style.opacity = 0.2; | |
| }); | |
| target.addEventListener("targetLost", () => { | |
| console.log("Target perso: Pause video"); | |
| video.pause(); | |
| // Il mirino torna ben visibile | |
| viewfinder.style.opacity = 1; | |
| }); | |
| document.body.addEventListener('click', () => { | |
| if(video.muted) { | |
| video.muted = false; | |
| console.log("Audio attivato"); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |