Aprende a crear Realidad Aumentada con MindAR y JavaScript

La realidad aumentada web (WebAR) permite crear experiencias interactivas directamente desde el navegador sin instalar aplicaciones. Gracias a librerías como MindAR, es posible detectar imágenes, mostrar modelos 3D y crear experiencias inmersivas utilizando únicamente JavaScript, HTML y WebGL.

En este tutorial aprenderás cómo crear una aplicación de realidad aumentada con MindAR paso a paso utilizando A-Frame y JavaScript.

Si quieres entender primero cómo funciona WebAR y qué frameworks existen, te recomiendo leer la siguiente guía completa:

👉 Guía Definitiva de WebAR en 2026

Qué es MindAR y para qué sirve

MindAR es una biblioteca open source de realidad aumentada para JavaScript que permite crear aplicaciones WebAR directamente en el navegador.

Entre sus principales características se encuentran:

Detección de imágenes (image tracking).
Reconocimiento facial.
Integración con A-Frame.
Compatibilidad con Three.js.
Funcionamiento en navegadores móviles Android, iOS y escritorio.

Una gran ventaja de MindAR es que no requiere instalar aplicaciones. Todo funciona directamente desde el navegador.

La documentación oficial de MindAR se encuentra aquí:

MindAR Documentation

Qué necesitas para crear una aplicación WebAR

Para crear tu primera experiencia de realidad aumentada con MindAR necesitas algunos elementos básicos.

Editor de código

Puedes utilizar cualquier editor de código, pero uno de los más recomendados es Visual Studio Code.

Este editor es gratuito y permite instalar extensiones que facilitan el desarrollo web.

Servidor local

Para probar aplicaciones WebAR es recomendable usar un servidor local.

Una extensión muy popular para esto es:

Live Server

Esta extensión permite ejecutar tu proyecto y verlo directamente en el navegador.

Modelo 3D

Necesitamos un modelo 3D para mostrar en la escena de realidad aumentada.

Los modelos más utilizados son:

GLTF
GLB

Puedes descargar modelos gratuitos o como el que utilizamos en este tutorial desde la comunidad de sketchfab

Marcador de imagen (target)

MindAR utiliza imágenes especiales llamadas targets.

Estas imágenes se convierten en archivos con extensión:

.mind

Puedes generar estos archivos utilizando el compilador oficial: Image Target Compiler

También puedes utilizar el compilador que hice para la comunidad de Realidad Aumentada: Compilador de Marcadores AR | Crea Realidad Aumentada Gratis

La imagen que utilizaremos para este proyecto de realidad aumentada web.

Ironman - Augmented Reality — Ironman – Augmented Reality

Archivos necesarios para el proyecto de realidad aumentada web

Para crear esta aplicación necesitaremos tres elementos principales:

modelo 3D
marcador de imagen en formato .mind
código HTML con JavaScript

Código completo para crear una aplicación WebAR con MindAR – Realidad Aumentada Web

Ahora vamos a crear el archivo principal de la aplicación.

Crea un archivo llamado:

index.html

y copia el siguiente código.

<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1" />

<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js"></script>

</head>

<body>

<a-scene mindar-image="imageTargetSrc: ./targets.mind;"
color-space="sRGB"
renderer="colorManagement: true, physicallyCorrectLights"
vr-mode-ui="enabled: false"
device-orientation-permission-ui="enabled: false">

<a-assets>
<a-asset-item id="avatarModel" src="Models/scene.gltf"></a-asset-item>
</a-assets>

<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

<a-entity mindar-image-target="targetIndex: 0">

<a-gltf-model
rotation="0 0 0"
position="0 -1 0"
src="#avatarModel">

</a-gltf-model>

</a-entity>

</a-scene>

</body>
</html>

Cómo funciona el código

Vamos a entender qué hace cada parte del código.

a-scene

Este es el contenedor principal de la escena 3D en A-Frame.

Aquí se carga el motor de renderizado y la integración con MindAR.

mindar-image

Este componente activa el sistema de detección de marcadores.

mindar-image="imageTargetSrc: ./targets.mind"

Aquí indicamos dónde se encuentra el archivo .mind.

a-assets

Esta sección se utiliza para cargar recursos como:

modelos 3D
imágenes
videos
Esto mejora el rendimiento de la aplicación.

a-camera

Representa la cámara virtual dentro de la escena.

En WebAR la cámara del dispositivo se sincroniza con esta cámara virtual.

a-gltf-model

Esta etiqueta se utiliza para mostrar modelos 3D en formato GLTF o GLB.

En este ejemplo se carga el modelo llamado: scene.gltf con el id llamado avatarModel

Cómo probar tu aplicación de realidad aumentada web

Para probar la aplicación sigue estos pasos:

Abre el proyecto en Visual Studio Code.
Instala la extensión Live Server.
Haz clic en Open with Live Server.

Esto abrirá tu aplicación en el navegador.

Ahora solo debes:

Permitir acceso a la cámara.
Apuntar al marcador.
El modelo 3D aparecerá sobre la imagen.

Este será el resultado de tu aplicación de realidad aumentada Web

MindAR - Aplicacion de realidad aumentada — MindAR – Aplicacion de realidad aumentada

Problemas comunes al usar MindAR

Al trabajar con WebAR pueden aparecer algunos problemas comunes.

La cámara no se activa

Esto suele ocurrir cuando la aplicación se ejecuta sin HTTPS.

Muchos navegadores requieren conexión segura para acceder a la cámara.

El marcador no se detecta

Esto puede deberse a:

Nombre mal escrito en el código.
Poca iluminación.
Imagen con poco contraste.
Mala calidad del target.

El modelo 3D no aparece en pantalla

Asegúrate de verificar:

Ruta correcta del modelo en tu codigo.
Formato GLTF o GLB.
Escala del modelo.

Más tutoriales de realidad aumentada

Si quieres seguir aprendiendo WebAR, aquí tienes algunos tutoriales recomendados:

Por último, si tienes alguna pregunta o encuentras problemas al intentar ejecutar este ejemplo de realidad aumentada con MindAR, no dudes en escribirme. Puedes contactarme directamente a través de la Fan Page oficial de Realidad Aumentada Empezando Desde Cero. o en la comunidad de WhatsApp de Realidad Aumentada.