La Realidad Aumentada Web, también conocida como WebAR, permite crear experiencias interactivas directamente desde el navegador, sin instalar aplicaciones móviles. Esto la convierte en una tecnología ideal para tarjetas de presentación, menús interactivos, catálogos comerciales, educación, marketing, turismo, inmobiliarias y campañas publicitarias.
En este tutorial vamos a analizar cómo funciona una experiencia WebAR multimarcador con video utilizando MindAR, Three.js y JavaScript. La idea principal es sencilla, pero muy poderosa: el usuario apunta la cámara a diferentes imágenes físicas y cada marcador reproduce un video distinto encima de la imagen reconocida.
Este tipo de proyecto puede usarse para crear tarjetas de negocio con video, folletos interactivos, catálogos de productos, menús de restaurante con platos en movimiento, portafolios impresos con presentación audiovisual o campañas de marketing con realidad aumentada.
En este artículo no voy a publicar todo el código completo línea por línea, porque forma parte del material premium disponible en mi Patreon. Sin embargo, sí te voy a explicar las partes más importantes del funcionamiento para que entiendas la arquitectura del proyecto, la lógica de MindAR, el uso de Three.js y los puntos críticos que debes dominar si quieres crear experiencias WebAR profesionales.
¿Qué es un multimarcador en realidad aumentada WebAR?
Un multimarcador en WebAR es una experiencia de realidad aumentada capaz de reconocer más de una imagen objetivo dentro de la misma aplicación.
En un proyecto básico de MindAR, normalmente se reconoce una sola imagen. Por ejemplo, apuntas la cámara a una tarjeta y aparece un modelo 3D, una imagen, un botón o un video.
En un proyecto multimarcador, la aplicación puede reconocer varias imágenes diferentes. Cada una puede activar un contenido distinto. En este caso, usamos dos marcadores:
- El marcador 1 reproduce un video horizontal.
- El marcador 2 reproduce un video vertical.
Esto permite crear experiencias más completas. Por ejemplo, una empresa podría tener un catálogo impreso donde cada producto activa un video diferente, o un restaurante podría tener varias imágenes en su menú y cada una mostrar un plato distinto en realidad aumentada.
Crear experiencias de realidad aumentada WebAR con librerias Javascript Guía Definitiva de WebAR en 2026: Cómo Crear Realidad Aumentada en la Web | Aprende a crear Apps de Realidad Aumentada desde cero
En este ejemplo hacemos una interacción multimarcador: Cómo hacer una app de Realidad Aumentada: Interacción entre marcadores
Tecnologías utilizadas en este proyecto de realidad aumentada
Para este ejemplo usamos tres tecnologías principales:
MindAR
MindAR es la librería encargada del reconocimiento de imágenes. Es decir, detecta el marcador físico usando la cámara del dispositivo y calcula la posición donde debe aparecer el contenido de realidad aumentada.
En este proyecto usamos MindAR con integración directa para Three.js, no con A-Frame. Esto nos da más control sobre la escena, los materiales, las texturas y el renderizado.
Three.js
Three.js es la librería 3D que nos permite crear la escena, los planos donde se mostrarán los videos y los materiales necesarios para renderizar el contenido sobre los marcadores.
En lugar de cargar un modelo 3D, creamos un plano 3D y usamos el video como textura.
JavaScript
JavaScript controla la lógica de la experiencia: el botón de inicio, la reproducción de los videos, los eventos cuando se encuentra o se pierde un marcador, y el inicio del motor de realidad aumentada.
¿Cómo funciona la experiencia WebAR multimarcador de realidad aumentada?
La lógica general del proyecto funciona así:
- El usuario abre la página desde su navegador móvil.
- Aparece una pantalla inicial con un botón para comenzar.
- El usuario toca el botón.
- Ese toque desbloquea la reproducción de video en el navegador.
- Se inicia MindAR.
- La cámara empieza a buscar los marcadores.
- Cuando MindAR detecta el marcador 1, se reproduce el video 1.
- Cuando detecta el marcador 2, se reproduce el video 2.
- Si el usuario deja de apuntar al marcador, el video correspondiente se pausa.
Esta lógica hace que la experiencia sea más eficiente, más profesional y más amigable para dispositivos móviles.
Parte 1: La pantalla inicial para desbloquear los videos en realidad aumentada
Uno de los errores más comunes al trabajar con video en WebAR es intentar reproducir el video automáticamente sin interacción del usuario.
En navegadores móviles como Safari en iPhone y Chrome en Android, la reproducción automática de videos con sonido puede ser bloqueada por seguridad y experiencia de usuario. Por eso es importante crear una pantalla inicial con un botón.
La idea es que el usuario toque el botón “Comenzar Experiencia”. Ese clic funciona como una autorización para que el navegador permita controlar los videos desde JavaScript.
Ejemplo simplificado:
startBtn.addEventListener('click', () => {
uiLayer.style.display = 'none';
video1.play().then(() => video1.pause());
video2.play().then(() => video2.pause());
startAR(); });Esta parte es muy importante porque evita que los videos fallen al momento de aparecer sobre los marcadores.
El truco está en reproducir y pausar rápidamente cada video después del clic del usuario. De esta manera, el navegador entiende que el usuario ya interactuó con la página y permite que el código controle los videos durante la experiencia AR.
Parte 2: Los elementos de video ocultos en HTML
Antes de enviar un video a Three.js, primero necesitamos tenerlo cargado como elemento HTML.
En el proyecto usamos dos videos ocultos:
<video id="video1" src="./video1.mp4" loop crossorigin="anonymous" playsinline></video>
<video id="video2" src="./video2.mp4" loop crossorigin="anonymous" playsinline></video>Aunque el usuario no ve estos videos directamente en la página, Three.js sí los utiliza como fuente para crear texturas de video.
El atributo playsinline es especialmente importante en iPhone, porque ayuda a que el video se reproduzca dentro de la experiencia y no se abra en el reproductor nativo de pantalla completa.
El atributo loop permite que el video se repita automáticamente mientras el marcador siga visible.
El atributo crossorigin=»anonymous» es útil cuando trabajas con archivos servidos desde otro dominio o CDN, aunque también debes asegurarte de que el servidor permita CORS correctamente.
Parte 3: Configurar MindAR para reconocer varios marcadores en realidad aumentada WebAR
La parte central del proyecto está en la configuración de MindAR.
En una experiencia de un solo marcador, normalmente solo necesitas cargar un archivo .mind y agregar un anchor. Pero en una experiencia multimarcador debes indicarle a MindAR que puede rastrear más de una imagen.
Ejemplo simplificado:
const mindarThree = new MindARThree({
container: document.querySelector("#container"),
imageTargetSrc: "./targets.mind",
maxTrack: 2
});La propiedad más importante aquí es:
maxTrack: 2Esto le indica a MindAR que debe intentar rastrear hasta dos imágenes al mismo tiempo.
También es importante entender que el archivo targets.mind debe haber sido generado con las imágenes que vas a usar como marcadores. Si tu archivo .mind contiene dos imágenes, esas imágenes normalmente se manejan como índice 0 e índice 1.
Por eso luego podemos usar:
mindarThree.addAnchor(0);
mindarThree.addAnchor(1);El anchor 0 corresponde al primer marcador del archivo .mind.
El anchor 1 corresponde al segundo marcador del archivo .mind.
Parte 4: Convertir un video en textura con Three.js para realidad aumentada WebAR
Para mostrar un video en realidad aumentada, no colocamos el video directamente sobre la cámara. Lo que hacemos es convertir ese video en una textura de Three.js.
Ejemplo simplificado:
const texture1 = new THREE.VideoTexture(video1);
const material1 = new THREE.MeshBasicMaterial({ map: texture1 });
const plane1 = new THREE.Mesh(
new THREE.PlaneGeometry(1, 0.5625),
material1
);Aquí suceden tres cosas importantes:
Primero, THREE.VideoTexture(video1) convierte el video HTML en una textura que Three.js puede usar.
Segundo, MeshBasicMaterial crea un material simple que muestra esa textura sin depender de luces. Esto es ideal para videos, porque queremos que se vean claros y constantes.
Tercero, PlaneGeometry crea el plano donde se proyectará el video.
En este ejemplo usamos:
new THREE.PlaneGeometry(1, 0.5625)
Esa proporción corresponde a un video horizontal 16:9.
Si quieres usar un video vertical tipo Reels, Shorts o TikTok, puedes invertir la proporción:
new THREE.PlaneGeometry(0.5625, 1)
Esto permite adaptar la experiencia a videos horizontales, verticales o cuadrados.
Parte 5: Asociar cada video a un marcador WebAR diferente
Después de crear el plano con el video, debemos agregarlo al marcador correspondiente.
Ejemplo para el primer y segundo marcador:
const anchor1 = mindarThree.addAnchor(0);
anchor1.group.add(plane1);
const anchor2 = mindarThree.addAnchor(1);
anchor2.group.add(plane2);
Esto significa que el plano del video 1 aparecerá sobre el marcador con índice 0 y el plano del video 2 sobre el índice 1.
Esto permite que cada marcador tenga su propio contenido independiente.
En un proyecto más avanzado, podrías usar esta misma lógica para agregar botones, modelos 3D, imágenes, audios, textos flotantes, enlaces a WhatsApp, formularios o animaciones.
Parte 6: Reproducir y pausar el video según el tracking del marcador WebAR
Una experiencia profesional de WebAR no debe dejar el video reproduciéndose si el usuario ya no está apuntando al marcador.
Por eso usamos los eventos de MindAR:
anchor1.onTargetFound = () => {
video1.play();
};
anchor1.onTargetLost = () => {
video1.pause();
};Cuando MindAR encuentra el marcador, el video se reproduce.
Cuando MindAR pierde el marcador, el video se pausa.
Esto tiene varias ventajas:
- Ahorra batería.
- Evita que el audio siga sonando sin sentido.
- Reduce el consumo de recursos.
- Mejora la experiencia del usuario.
- Hace que el proyecto se sienta más profesional.
La misma lógica se repite para el segundo marcador.
Parte 7: Iniciar el motor de realidad aumentada con Three.js
Después de configurar MindAR, los videos, las texturas, los planos y los anchors, iniciamos el motor AR:
await mindarThree.start();
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
});La función mindarThree.start() activa la cámara, carga el sistema de tracking y comienza a buscar los marcadores.
Luego, renderer.setAnimationLoop() mantiene la escena actualizándose constantemente para que el contenido 3D se renderice correctamente sobre la cámara.
Esta parte es esencial porque conecta la cámara, la escena 3D y el seguimiento de imágenes en tiempo real.
EL VIDEO VA AQUI.
Errores comunes al crear WebAR con video y multimarcador
El video no se reproduce
Esto suele pasar cuando no hubo interacción previa del usuario. La solución es usar un botón inicial antes de iniciar la experiencia AR.
El video se abre en pantalla completa en iPhone
Para evitar esto, usa el atributo playsinline en el elemento
El marcador no se reconoce bien
Asegúrate de usar imágenes con buen contraste, suficientes detalles visuales y buena iluminación. Evita imágenes borrosas, repetitivas o con grandes áreas vacías.
El video aparece deformado
Revisa la proporción del plano en Three.js. Para video horizontal 16:9 puedes usar PlaneGeometry(1, 0.5625). Para video vertical 9:16 puedes usar PlaneGeometry(0.5625, 1).
La cámara no abre
Verifica que tu proyecto esté publicado con HTTPS. Los navegadores normalmente requieren HTTPS para permitir acceso a la cámara.
El proyecto funciona en computador pero no en celular
WebAR debe probarse siempre en dispositivos reales. También debes revisar el peso de los videos, la conexión, los permisos de cámara y la compatibilidad del navegador.
Ideas para vender este tipo de experiencia WebAR
Este proyecto no es solo un ejercicio técnico. También puede convertirse en un servicio real para clientes.
Algunas ideas comerciales son:
Tarjetas de presentación con video en realidad aumentada
Una tarjeta física puede activar un video de presentación, un portafolio, redes sociales o botones de contacto.
Crear una experiencia de Realidad Aumentada desde cero es muy facil si sigues Crea Tarjetas de Presentación con Realidad Aumentada
Crear la experiencia de Realidad Aumentada WebAR sin escribir una sola línea de código con Plataforma WebAR sin Código | Crea Campañas de Realidad Aumentada con QR
Menús de restaurante en realidad aumentada con videos
Cada plato del menú puede activar un video corto mostrando la preparación, presentación o promoción especial.
Tambien puedes hacer este ejemplo utilizando modelos 3D hyper-realistas: Crea un Menú de Restaurante AR: Tutorial WebAR Paso a Paso
Catálogos inmobiliarios
Una constructora puede usar folletos impresos donde cada imagen active un video del apartamento, la maqueta o el recorrido virtual. WebAR Hiperrealista: Tutorial de Gaussian Splatting
Educación interactiva
Libros, guías o material educativo pueden mostrar explicaciones en video encima de ilustraciones o imágenes impresas. Hagamos un chatbot en realidad aumentada con Google Gemini
Marketing para eventos
Afiches, entradas o flyers pueden activar videos promocionales, mensajes de artistas, patrocinadores o información del evento. Tutorial WebAR: Tarjeta de Cumpleaños Explosiva con MindAR
Museos y turismo
Una imagen histórica, mapa o señal turística puede activar un video explicativo directamente desde el navegador. Tutorial AR Universal: Realidad Aumentada sin WebXR
Código completo disponible en PATREON
Si quieres acceder al código completo listo para usar, con la estructura HTML, CSS y JavaScript organizada, puedes encontrarlo en mi Patreon.
En el código completo encontrarás:
- Proyecto completo en HTML.
- Configuración de MindAR con maxTrack.
- Dos videos funcionando sobre dos marcadores distintos.
- Uso de THREE.VideoTexture.
- Pantalla inicial para desbloquear reproducción de video.
- Eventos onTargetFound y onTargetLost.
- Estructura lista para subir a un servidor web.
- Base ideal para modificar y vender tus propias experiencias WebAR.
Este código es perfecto si quieres aprender más rápido, crear demos para clientes o construir tus propios proyectos de realidad aumentada web.
Conclusión
Crear un multimarcador de video con MindAR y Three.js es una de las mejores formas de entender el verdadero potencial del WebAR.
Con esta técnica puedes transformar imágenes impresas en experiencias interactivas, reproducir videos sobre tarjetas físicas, crear catálogos aumentados, mejorar campañas de marketing y ofrecer soluciones innovadoras a negocios locales e internacionales.
La clave está en entender cómo se conectan las partes principales: MindAR reconoce los marcadores, Three.js renderiza el contenido 3D, JavaScript controla la lógica y los videos se convierten en texturas interactivas dentro de la escena.
Si estás aprendiendo realidad aumentada web, este proyecto es una excelente base para avanzar hacia experiencias más profesionales, comerciales y monetizables.
Preguntas frecuentes sobre WebAR multimarcador con video
¿Qué es un multimarcador en MindAR?
Un multimarcador es una experiencia donde MindAR puede reconocer varias imágenes objetivo dentro del mismo proyecto. Cada imagen puede activar un contenido diferente, como videos, modelos 3D, textos, botones o animaciones.
¿Puedo usar más de dos marcadores con MindAR?
Sí. Puedes usar más marcadores si tu archivo .mind contiene varias imágenes y configuras correctamente la cantidad de targets que quieres rastrear. Sin embargo, mientras más marcadores rastrees al mismo tiempo, más recursos puede consumir el dispositivo.
¿Puedo usar videos verticales?
Sí. Solo debes ajustar la geometría del plano en Three.js. Para videos verticales tipo Reels o TikTok puedes usar una proporción como PlaneGeometry(0.5625, 1).
¿Necesito HTTPS para WebAR?
Sí. Para acceder a la cámara del celular, normalmente necesitas publicar el proyecto en un servidor con HTTPS. Servicios como Netlify, GitHub Pages o un hosting con certificado SSL pueden funcionar. Cómo publicar tus apps de realidad aumentada gratis: guía desde cero
¿Funciona en iPhone y Android?
Sí, puede funcionar en ambos, pero debes cuidar detalles importantes como playsinline, el peso de los videos, los permisos de cámara, la compatibilidad del navegador y la optimización de archivos.
¿Puedo vender este tipo de proyecto a negocios?
Sí. Este tipo de experiencia puede venderse a restaurantes, inmobiliarias, profesionales independientes, marcas, colegios, eventos, museos, agencias de marketing y empresas que quieran convertir material impreso en contenido interactivo.
¿Dónde puedo conseguir el código completo?
El código completo del proyecto está disponible en mi Patreon, junto con la estructura lista para modificar, probar y subir a un servidor web.