AR

Running

App Files Files Community

MatteoScript commited on Dec 18, 2025

Commit

1cb4000

verified ·

1 Parent(s): e0585a7

Update index.html

Browse files

Files changed (1) hide show

index.html +30 -28

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <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 Simple + Mirino</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>
@@ -13,41 +13,44 @@
         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 --- */
-        /* Il contenitore principale del mirino, centrato */
         #viewfinder-container {
             position: fixed;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-            width: 70vw; /* Larghezza relativa allo schermo */
-            height: 70vw; /* Altezza uguale per farlo quadrato */
-            max-width: 300px; /* Dimensione massima su schermi grandi */
-            max-height: 300px;
-            z-index: 10; /* Sta sopra il video della camera */
-            pointer-events: none; /* IMPORTANTE: lascia passare i click sotto (per l'audio) */
         }
         /* Stile comune per i 4 angoli */
         .corner {
             position: absolute;
-            width: 40px;  /* Lunghezza delle linee */
             height: 40px;
-            border-color: rgba(255, 255, 255, 0.7); /* Colore bianco semi-trasparente */
             border-style: solid;
-            border-width: 0; /* Di base nessun bordo, li aggiungiamo specificamente sotto */
         }
-        /* Posizionamento e bordi specifici per ogni angolo */
-        /* Top-Left */
-        .corner-tl { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; }
-        /* Top-Right */
-        .corner-tr { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; }
-        /* Bottom-Left */
-        .corner-bl { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; }
-        /* Bottom-Right */
-        .corner-br { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; }
     </style>
 </head>
@@ -60,7 +63,6 @@
         <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"
@@ -76,7 +78,7 @@
         <a-entity id="example-target" mindar-image-target="targetIndex: 0">
             <a-entity id="ar-video-plane"
-                geometry="primitive: plane; width: 1; height: 1.4"
                 material="src: #vid; shader: flat; transparent: true; opacity: 1"
                 position="0 0 0">
             </a-entity>
@@ -87,20 +89,20 @@
         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();
-            // Opzionale: nascondi il mirino quando trova il target
-            // viewfinder.style.opacity = 0;
         });
         target.addEventListener("targetLost", () => {
             console.log("Target perso: Pause video");
             video.pause();
-             // Opzionale: mostra di nuovo il mirino
-             // viewfinder.style.opacity = 1;
         });
         document.body.addEventListener('click', () => {

 <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>
         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>
         <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"
         <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>
         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', () => {