La Realidad Aumentada Web (WebAR) ha transformado la manera en que interactuamos con el mundo físico. Ya no basta con mostrar un modelo 3D estático sobre una mesa; los usuarios buscan experiencias narrativas y funcionales.
Con este proyecto de Galería AR Infinita, rompemos la barrera del contenido estático. Imagina escanear una sola imagen impresa (como una tarjeta de visita, un flyer o una obra de arte) y desplegar ante el usuario un catálogo completo de productos, un portafolio de fotografía o una historia audiovisual.
Crea aplicaciones de realidad aumentada gratis con esta herramienta: Editor AR Online: Modelos 3D (GLB, GLTF) y Video (MP4)
Más allá de una simple foto: El poder de las Galerías AR
¿Qué puedes lograr con esta tecnología?
Este código no es solo un ejercicio técnico, es una herramienta de venta y marketing con aplicaciones reales:
- Museos y Exposiciones: Convierte una entrada física en una audioguía visual. Los visitantes pueden ver la obra, deslizar para ver bocetos previos y tocar un botón para ver una entrevista con el artista en video.
- E-commerce y Catálogos: Un usuario escanea la foto de un zapato en una revista. Con la galería, puede ver diferentes colores (fotos), ver un comercial de TV (video) y tener un botón directo de «Comprar» que cambia según el modelo que está viendo.
- Fotógrafos y Videógrafos: Una tarjeta de presentación que, al escanearse, permite al cliente navegar por tus mejores trabajos sin tener que escribir tu web en el navegador.
- Invitaciones de Boda: Una invitación que muestra un carrusel de fotos de la pareja y un video de la pedida de mano, con un botón para «Confirmar Asistencia» en WhatsApp.
Comencemos con el tutorial gratis de cómo hacer en realidad aumentada una galería de fotos en formato WebAR.
Lo primero con lo que vamos a comenzar es con el código JAVASCRIPT, recodemos que este es el cerebro de nuestra aplicación y es el encargado de permitirnos que la App funcione como debe.
<script>
document.addEventListener("DOMContentLoaded", function() {
const photoIds = ['#img1', '#img2', '#img3', '#img4', '#img5', '#img6'];
let currentIndex = 0;
const displayEntity = document.querySelector('#display-photo');
const btnLeft = document.querySelector('#btn-left');
const btnRight = document.querySelector('#btn-right');
const overlay = document.querySelector('#scanning-overlay');
const target = document.querySelector('#my-target');
target.addEventListener("targetFound", event => {
console.log("Objetivo encontrado");
overlay.classList.add('hidden');
});
target.addEventListener("targetLost", event => {
console.log("Objetivo perdido");
overlay.classList.remove('hidden');
});
const updateGallery = () => {
displayEntity.setAttribute('animation', 'property: scale; from: 0.9 0.9 0.9;
to: 1 1 1; dur: 300; easing: easeOutElastic');
displayEntity.setAttribute('src', photoIds[currentIndex]);
};
btnRight.addEventListener('click', function (evt) {
currentIndex = (currentIndex + 1) % photoIds.length;
updateGallery();
});
btnLeft.addEventListener('click', function (evt) {
currentIndex = (currentIndex - 1 + photoIds.length) % photoIds.length;
updateGallery();
});
});
</script>Te explico brevemente lo que hace este codigo.
- Detecta el marcador: Si la cámara ve el objetivo, oculta las instrucciones de pantalla (overlay); si lo pierde, las vuelve a mostrar.
- Cambia de fotos: Permite usar los botones «Izquierda» y «Derecha» para navegar por una lista de 6 imágenes.
- Animación y Bucle: Las fotos giran en un ciclo infinito (de la última pasa a la primera) y hacen un pequeño efecto de «rebote» cada vez que cambian.
Recuerda que si quieres una explicación detallada del código línea por línea del HTML, CSS y JavaScript puedes agregarte a mi PATREON en el siguiente link: Realidad Aumentada Empezando Desde Cero – Ingcarlosreina | Tutoriales de Realidad Aumentada – Augmented Reality Tutorials | Patreon Puedes hacerte miembro desde 1 Dolar al mes. Muchas gracias por tu apoyo.
Ahora pasemos al HTML.
<div id="scanning-overlay">
<div class="scan-box">
<span class="scan-text">Escaneando...</span>
</div>
</div>
<a-scene
mindar-image="imageTargetSrc: ./targets.mind; maxTrack: 2; filterMinCF:1; filterBeta:10000; warmupTolerance:0.5; missTolerance:0.5;"
color-space="sRGB"
renderer="colorManagement: true, physicallyCorrectLights"
vr-mode-ui="enabled: false"
device-orientation-permission-ui="enabled: false">
<a-assets>
<img id="img1" src="LINK A TU FOTO" />
<img id="img2" src="LINK A TU FOTO" />
<img id="img3" src="LINK A TU FOTO" />
<img id="img4" src="LINK A TU FOTO" />
<img id="img5" src="LINK A TU FOTO" />
<img id="img6" src="LINK A TU FOTO" />
<img id="icon-left" src="https://cdn-icons-png.flaticon.com/512/271/271220.png" />
<img id="icon-right" src="https://cdn-icons-png.flaticon.com/512/271/271228.png" />
</a-assets>
<a-camera position="0 0 0" look-controls="enabled: false" cursor="rayOrigin: mouse;" raycaster="far: 10000;
objects: .clickable"></a-camera>
<a-entity id="my-target" mindar-image-target="targetIndex: 0">
<a-plane color="#111" width="1.3" height="0.9" position="0 0 -0.01"></a-plane>
<a-image id="display-photo" src="#img1" width="1.2" height="0.8" position="0 0 0"></a-image>
<a-image
id="btn-left"
class="clickable"
src="#icon-left"
position="-0.85 0 0.01"
width="0.25"
height="0.25"
animation__click="property: scale; startEvents: click; from: 1 1 1; to: 1.2 1.2 1.2; dur: 150;
dir: alternate; loop: 1">
</a-image>
<a-image
id="btn-right"
class="clickable"
src="#icon-right"
position="0.85 0 0.01"
width="0.25"
height="0.25"
animation__click="property: scale; startEvents: click; from: 1 1 1; to: 1.2 1.2 1.2; dur: 150;
dir: alternate; loop: 1">
</a-image>
</a-entity>
</a-scene>Expliquemos el código HTML. En resumen, este código construye la parte visual de la escena:
- Interfaz de Espera: Crea una pantalla con el texto «Escaneando…» para cubrir la cámara mientras busca el objetivo.
- Configuración AR: Inicia el motor de Realidad Aumentada, carga el archivo de rastreo (targets.mind) y prepara las imágenes en memoria.
- Objetos en Pantalla: Define lo que aparece sobre el marcador real: un fondo negro, el marco para las fotos y los botones de navegación (que tienen una animación para pulsar).
Si todo sale bien, este será el resultado de tu Galería de fotos en Realidad Aumentada.
Crea un menú para cualquier restaurante en realidad aumentada: Crea un Menú de Restaurante AR: Tutorial WebAR Paso a Paso
Características de la Versión «Patreon» (Código Premium)
Que incluye la version PATREON:
- HTML Documentado linea por linea.
- CSS Comentado totalmente.
- JAVASCRIPT Documentado y explicado linea por linea.
- Archivo .Mind y marcador para que pruebes tu aplicacion inmediamtente.
- Index en su version Gratuita y en su version PATREON
El código que comparto a continuación es una versión avanzada y depurada, lista para producción. A diferencia de los ejemplos básicos de la documentación, esta versión soluciona los problemas más comunes de la AR en navegadores móviles.
Estas son las características técnicas que hacen a este código una versión «Pro«:
Motor Híbrido (Imágenes + Video)
- La mayoría de tutoriales solo enseñan a mostrar fotos. Este código gestiona inteligentemente una mezcla de imágenes estáticas y videos MP4 en el mismo carrusel. El sistema detecta automáticamente el tipo de contenido y ajusta el visor para garantizar la mejor calidad.
Gestión Inteligente de Video (Mobile-Friendly)
Uno de los mayores dolores de cabeza en WebAR es que los navegadores móviles (iOS Safari / Chrome Android) bloquean los videos con sonido por defecto. Este código incluye:
- Botón «Iniciar Experiencia»: Un User Gesture obligatorio que desbloquea el audio del navegador antes de empezar.
- Lógica de «Warm-up»: Carga, reproduce y pausa el video en milisegundos para tenerlo listo en memoria.
- Auto-Mute con Control Manual: El video inicia en silencio para garantizar la reproducción visual, pero incluye un botón flotante para activar el sonido a voluntad del usuario.
Interfaz de Usuario (UI) Profesional
Incluimos una capa HTML sobre la cámara (Overlay) que guía la experiencia:
- Indicadores de «Escaneando…» y «Objetivo Encontrado». (Mensaje en consola).
- Feedback visual de carga.
- Títulos sincronizados con el contenido 3D.
Call to Action (CTA) Dinámico
- El botón inferior no es estático. Cambia su texto y su enlace de destino según la diapositiva actual.
- Si ves una foto: El botón dice «VER DETALLES» y lleva a una web.
- Si ves un video: El botón dice «VER CANAL» y lleva a YouTube.
- Esto es vital para la conversión y ventas.
Limpieza Visual «Zero-Ghosting»
l contenido flota limpiamente en el espacio. Además, el código gestiona la visibilidad de las entidades para asegurar que nunca se superpongan texturas de video sobre fotos, evitando el molesto parpadeo (z-fighting).
Si estas interesado en ayudarme en PATREON te dejo el link en la siguiente imagen:
