Spaces:
Running
Running
File size: 3,856 Bytes
3729df2 8483e5b 3729df2 2cbe8b1 3729df2 ca6c5eb 2cbe8b1 ca6c5eb 8483e5b ca6c5eb 1cb4000 8483e5b 1cb4000 8483e5b 1cb4000 8483e5b ca6c5eb 8483e5b ca6c5eb 8483e5b ca6c5eb 1cb4000 8483e5b ca6c5eb 1cb4000 ca6c5eb 3729df2 ca6c5eb 2cbe8b1 fc000bd 2cbe8b1 9510626 2cbe8b1 8483e5b 2cbe8b1 3729df2 2cbe8b1 3729df2 2cbe8b1 8483e5b 2cbe8b1 3729df2 2cbe8b1 cdca82e 8483e5b cdca82e 2cbe8b1 3729df2 8483e5b cdca82e 2cbe8b1 3729df2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
<!DOCTYPE html>
<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 11: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 11:16) --- */
#viewfinder-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Larghezza relativa */
width: 50vw;
/* Altezza calcolata per rapporto 11:16 */
/* Calcolo: 50vw * (16 / 11) = 50 * 1.4545 = 72.725 */
height: 72.7vw;
/* Limiti massimi in pixel */
max-width: 270px;
/* Calcolo: 270px * 1.4545 = 392.7 */
max-height: 393px;
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);
}
/* 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.45"
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");
// Logica base Play/Pause quando il target è visibile/perso
target.addEventListener("targetFound", event => {
console.log("Target trovato");
video.play();
});
target.addEventListener("targetLost", event => {
console.log("Target perso");
video.pause();
});
</script>
</body>
</html> |