Cómo Crear una Aplicación de Realidad Aumentada con MindAR (Guía Paso a Paso)

La realidad aumentada web (WebAR) permite crear experiencias interactivas directamente en el navegador sin necesidad de instalar aplicaciones móviles.

En esta guía aprenderás paso a paso cómo crear una aplicación de realidad aumentada utilizando JavaScript, MindAR, A-Frame y Three.js, empleando herramientas gratuitas y tecnologías open source que funcionan en Android, iOS y navegadores modernos.

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

👉 Guía Definitiva de WebAR en 2026

Si eres un desarrollador o un entusiasta con conocimientos básicos de HTML y JavaScript y quieres adentrarte en este emocionante campo, esta guía te ayudará a crear tu primera experiencia de realidad aumentada en la web desde cero.

Índice del contenido

Índice de la guía

Preparando tu entorno de desarrollo para realidad aumentada

Antes de comenzar a escribir código, necesitamos preparar el entorno de desarrollo que utilizaremos para crear nuestra aplicación WebAR.

En este tutorial utilizaremos:

Visual Studio Code.
Extensión Live Server.
MindAR.
A-Frame.
Three.js.

Estas herramientas permiten crear aplicaciones de realidad aumentada directamente en el navegador.

Instalar Visual Studio Code

Visual Studio Code es uno de los editores de código más populares para desarrollo web.

Pasos:

Ir a la página oficial de Visual Studio Code. Visual Studio Code – The open source AI code editor
Descargar la versión para tu sistema operativo.
Ejecutar el instalador.
Una vez instalado podrás comenzar a crear tus proyectos WebAR.

Instalar la extensión Live Server

Live Server permite ejecutar un servidor local para probar aplicaciones web.

Pasos:

Abrir Visual Studio Code
Ir al panel Extensiones – Barra lateral izquierda (El icono de los cuatro cuadrados).
Buscar Live Server.
Instalar la extensión creada por Ritwick Dey.

Esta herramienta permitirá ver los cambios del proyecto automáticamente en el navegador.

Librería JavaScript para crear aplicaciones de realidad aumentada WebAR

Para desarrollar aplicaciones de realidad aumentada en la web utilizamos varias librerías JavaScript que trabajan en conjunto. En este tutorial nos enfocaremos en la libreria Mindar.

MindAR

MindAR es una librería de realidad aumentada diseñada para ejecutarse directamente en el navegador.

Esta libreria para WebAR permite:

Image tracking.
Face tracking.
Experiencias WebAR rápidas.
Integración con A-Frame y Three.js.

Es una de las mejores opciones open source para crear WebAR.

Crear tu primera aplicación de realidad aumentada con MindAR

En esta sección construiremos un ejemplo básico donde un modelo 3D aparecerá sobre una imagen marcador.

Crear la carpeta del proyecto

Crea una nueva carpeta en tu computadora para tu proyecto (ejemplo: mi-primer-webar).

Dentro de ella crearemos el archivo principal del proyecto.

Agregar carpeta al espacio de trabajo – Add Folder To Workspace en Visual Studio Code

Para que nuestra app de realidad aumentada WebAR funcione sin ningún contratiempo haremos lo siguiente:

Vamos a la opción del menú superior y buscamos Archivo o File es el primer elemento en el menú.
Le damos clic al botón de Agregar al espacio de trabajo o Add Folder to Workspace.
Ahora damos clic en File (Archivo) y seleccionamos New Text File o Nuevo archivo de texto.
Presionamos Ctrl + S.
Veremos una nueva ventana que nos permite guardar nuestro archivo, pero en este momento el archivo estará en formato .txt. (Untitled-1.txt).
Borramos ese nombre y lo llamaremos Index.html

Código de la aplicación WebAR

<!DOCTYPE html> 
<html> 
    <head> 
        <meta name="viewport" content="width=device-width, initial-scale=1" /> 
        <title>Mi Primer WebAR con MindAR</title> 
        <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: ./Marcador.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="Modelo" src="./Modelo3D.glb"></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 position="0 0 0" rotation="0 360 0" scale="0.869565 0.869565 0.869565" src="#Modelo"></a-gltf-model> 
</a-entity> 
</a-scene> 
</body> 
</html>

Explicación del código

Si quieres aprender Html y CSS te recomiendo esta web: Aprende HTML y CSS – Curso Desde Cero

Te explico, HTML maneja etiquetas que inician con < y terminan en > Adicional a esto las etiquetas siempre se deben de cerrar después de que tengan unas instrucciones dentro de ellas y se cierran utilizando / por ejemplo: <a-scene>Contenido y cierra con: </a-scene>

<html>: Este es el elemento raíz de cualquier página web HTML. Todo el contenido de la página va dentro de esta etiqueta.
<head>: Esta sección contiene metadatos sobre el documento HTML. Los metadatos no se muestran directamente en la página web, pero proporcionan información importante para el navegador y los motores de búsqueda.
<meta name=»viewport» content=»width=device-width, initial-scale=1″ />: Esta etiqueta meta es crucial para el diseño responsivo y, especialmente, para las aplicaciones WebAR que se ejecutan en dispositivos móviles.
- name=»viewport»: Indica que esta meta-información es sobre el viewport (el área visible del usuario en una página web).
- width=device-width: Le dice al navegador que el ancho del viewport debe ser igual al ancho del dispositivo en píxeles independientes del dispositivo (es decir, el ancho real del dispositivo). Esto evita que los navegadores móviles escalen la página por defecto y la muestren como si fuera un escritorio.
- initial-scale=1: Establece el nivel de zoom inicial cuando la página se carga por primera vez. Un valor de 1 significa que no hay zoom, mostrando el contenido en su tamaño real.
<title>Mi Primer WebAR con MindAR</title>: Esta etiqueta define el título de la página web. Este título se muestra en la pestaña del navegador o en la barra de título de la ventana del navegador. Es útil para identificar rápidamente la página entre varias pestañas y es importante para el SEO (Optimización para Motores de Búsqueda).
<script src=»https://aframe.io/releases/1.5.0/aframe.min.js»></script>: Esta etiqueta <script> es fundamental para incluir la librería A-Frame en tu proyecto.
<script src=»https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js»></script>: Esta es otra etiqueta <script> que incluye la librería MindAR.
</head>: Cierra la sección de metadatos del documento.
<body>: Esta sección contiene todo el contenido visible de la página web: texto, imágenes, videos, y en este caso, la propia escena de Realidad Aumentada de A-Frame.
a-scene: El contenedor principal para nuestra experiencia AR/VR en A-Frame.
mindar-image: El componente de MindAR que le dice a A-Frame que es una escena de realidad aumentada basada en imágenes.
imageTargetSrc: ./targets.mind: Aquí le indicamos dónde está nuestro archivo. La imagen que vamos a utilizar como marcador.
Los otros parámetros (maxTrack, filterMinCF, etc.) son ajustes de rendimiento y estabilidad del seguimiento de MindAR.
a-assets: Aquí pre-cargamos recursos como modelos 3D (a-asset-item).
- En este ejemplo, estamos usando un modelo de la comunidad de Sketchfab, puedes descargar el modelo del siguiente link: (1) Sexy Emerald Female Fantasy Ranger Free Download – Download Free 3D model by tommysticks87 (@tommysticks87) [33ad134]
a-camera: La cámara de A-Frame. Para AR, generalmente se configura para no tener controles de vista ya que la cámara real del dispositivo es la que se mueve.
a-entity mindar-image-target=»targetIndex: 0″: Este es el corazón de la interacción. Indica que lo que esté dentro de este a-entity aparecerá cuando se detecte el marcador con targetIndex: 0 (el primer marcador definido en targets.mind).
<a-gltf-model position=»0 0 0″ rotation=»0 360 0″ scale=»0.869565 0.869565 0.869565″ src=»#Modelo»>: Aquí vinculamos el modelo 3D que cargamos en a-assets para que aparezca sobre el marcador, su posición, escala del modelo 3D.

Crear el marcador para la realidad aumentada .mind

Para que MindAR pueda mostrar tu contenido en realidad aumentada necesitas crear un archivo de marcadores (.mind).

Elige tu imagen Marcador

Selecciona una imagen con buen contraste y detalles únicos. Evita imágenes con patrones repetitivos o muy simples. Guárdala en tu carpeta del proyecto (ej., marker.jpg).

La imagen debe de tener:

Buen contraste.
Detalles únicos, bordes y esquinas.
Texturas.

Ejemplos buenos:

Ilustraciones.
Códigos QR. Realidad Aumentada WebAR lee codigos QR y Codigos de barras
Portadas.

Para este tutorial la imagen que vamos a utilizar como marcador es:

Realidad Aumentada Empezando Desde Cero con WebAR

Cómo generar un archivo .mind

Para generar un archivo .mind vamos a utilizar el Compilador de Marcadores AR | Crea Realidad Aumentada Gratis

MindAR tambien proporciona una herramienta online para generar este archivo: Image Targets Compiler | mind-ar-js

Pasos a seguir:

Clic en el botón elegir archivos.
Selecciona la imagen que vas a utilizar como marcador.
Da clic sobre el botón de color verde que dice Analizar Calidad. Espera el resultado de calidad.
Ahora puedes dar clic en el botón de color azul que dice Compilar y Probar Marcador.
Se activa la cámara web y podrás probar la calidad de reconocimiento de tu imagen.
En la parte superior izquierda da clic en Atras para descargar .mind
Ahora tendrás la opción de Descargar el archivo .mind que MindAR reconocerá para tu app WebAR.

Cómo probar tu aplicación WebAR en Android y iOS

Es hora de ver nuestra aplicacion WebAR funcionando:

Estando en la ventana de Visual Studio Code. Haz clic derecho en cualquier parte del código y selecciona «Open with Live Server» o en español Abrir con Live Server.
Esto abrirá tu navegador con una URL como http://127.0.0.1:5500/index.html.
Importante: Para que la cámara funcione, necesitas acceder a esta página usando HTTPS. Live Server por sí solo sirve por HTTP. Este ejemplo generalmente sirve en computadoras de mesa y portátiles. Si quieres utilizar dispositivos Android y iOS para pruebas de tus aplicaciones de realidad aumentada te recomiendo instales, XAMPP Download XAMPP asi puedes utilizar Https://

Si instalas Xampp para utilizar el Https tendrás que hacer los siguientes pasos:

Después de instalar Xampp debes de ir a la carpeta de instalación normalmente se encuentra en tu disco local C.
ingresa a la carpeta xampp y busca la carpeta htdocs.
Crea una carpeta con cualquier nombre, hagamos el ejemplo con (MiWebAR) y dentro de ella copia y pega los archivos index.html, Marcador.mind y Modelo3D.glb.
Ahora abre el panel de xampp desde tu escritorio o busca el archivo desde la barra de tareas o icono de Windows.

Da clic en el botón de Start de Apache.

Aquí viene una parte importante para poder ingresar desde tu teléfono Android o iOS.

Para poder ver la aplicación de realidad aumentada en tu teléfono necesitas una dirección web https y para poder ingresar deberás de tener conectado tu teléfono a la misma red o red wifi que tu computador Windows, Mac o linux y saber la direccion IP donde estas corriendo el Xampp.

Para ello utiliza CMD, Command o ejecutar, si no sabes cómo hacerlo re recomiendo este articulo: Guía paso a paso: Cómo abrir el CMD en diferentes sistemas operativos

luego de abrir la terminal en Windows y escribe el comando ipconfig y en Mac y Linux ifconfig. Presiona la tecla ENTER y veras la dirección ip de tu equipo.

¿Como identificar fácilmente la IP en la terminal? Busca la línea que dice Dirección IPv4 y esa es la Dirección IP de tu equipo.

Teniendo esta información lo que vas a hacer ahora es ingresar al navegador de tu teléfono:

En la barra de direcciones escribe lo siguiente: https://TU IP/MiWebAR/index.html
Tu aplicación abrirá y te pedirá acceder a la cámara de tu dispositivo, da clic en permitir.
Enfoca la imagen que utilizaste como marcador y disfruta de tu primera aplicación de realidad aumentada WebAR.

Siguientes pasos para aprender WebAR

Ahora que ya creaste tu primera aplicación WebAR, puedes seguir explorando:

En este blog encontrarás más de 160 artículos sobre desarrollo de realidad aumentada Blog de Realidad Aumentada | Tutoriales WebAR, MindAR y más

Conclusión

Crear aplicaciones de realidad aumentada en la web es cada vez más accesible gracias a tecnologías como JavaScript, WebGL y frameworks open source como MindAR.

Con herramientas gratuitas es posible construir experiencias interactivas que funcionan directamente en el navegador sin necesidad de descargar aplicaciones.

Este tutorial muestra los fundamentos para crear tu primera experiencia WebAR, y a partir de aquí podrás seguir explorando técnicas más avanzadas.