Módulo 0

Bienvenida y resultado final

En este curso vas a crear una experiencia de realidad aumentada web con MindAR. La meta no es memorizar código, sino entender cada pieza: editor, archivos, navegador, cámara, target, escena, modelo 3D y eventos.

Al finalizar podrás

Instalar y usar Visual Studio Code para un proyecto web.
Crear archivos `index.html`, `style.css` y `script.js`.
Levantar un servidor local para probar en navegador.
Compilar una imagen objetivo con MindAR Web Compiler.
Mostrar un cubo, un modelo GLB o un video sobre una imagen física.
Usar `targetFound` y `targetLost` para activar interacciones.

Proyecto que vas a construir

Un poster WebAR: al escanear una imagen impresa o mostrada en otra pantalla, aparece contenido 3D alineado al plano. Cuando la imagen desaparece, la experiencia reacciona y muestra un mensaje de búsqueda.

Entiendo el objetivo del curso y tengo un computador con navegador moderno.

Módulo 1

Fundamentos de Realidad Aumentada

Antes de instalar herramientas y escribir código, necesitas entender qué tipo de experiencia estás construyendo. En esta sección verás las diferencias entre realidad aumentada, realidad virtual, realidad mixta y WebAR, además del papel de MindAR, A-Frame y JavaScript dentro del curso.

1. Qué es la Realidad Aumentada

La realidad aumentada, o AR, combina el mundo real con elementos digitales. En vez de reemplazar lo que ves, agrega información encima: un modelo 3D sobre una tarjeta, un video sobre un poster, instrucciones sobre una máquina o una animación sobre un empaque.

Idea clave

La cámara captura el mundo físico, el sistema reconoce una referencia o entiende el espacio, y el navegador dibuja contenido digital alineado con esa referencia.

2. Diferencia entre AR, VR y Realidad Mixta

TecnologíaQué haceEjemplo

Realidad AumentadaAgrega contenido digital sobre el mundo real.Escanear una imagen y ver un modelo 3D encima.

Realidad VirtualReemplaza el mundo real por un entorno 100% digital.Usar gafas VR para entrar a una sala virtual.

Realidad MixtaCombina mundo real y digital con más comprensión del espacio.Objetos digitales que se ocultan detrás de una mesa real.

En este curso trabajaremos principalmente con realidad aumentada basada en imagen objetivo: el contenido aparece cuando la cámara reconoce una imagen plana, como un poster, una tarjeta o una portada.

3. Qué es WebAR

WebAR es realidad aumentada que funciona desde el navegador. El usuario no necesita instalar una app nativa desde una tienda; entra a una URL, acepta permisos de cámara y vive la experiencia desde el sitio web.

Web HTML, CSS y JavaScript ejecutándose en el navegador.

AR Contenido digital alineado con una imagen, objeto, rostro o espacio físico.

Target Imagen que el sistema reconoce para activar el contenido.

Cámara Entrada visual que permite detectar el mundo real.

4. Ventajas de crear realidad aumentada desde el navegador

No exige instalar una aplicación nativa.
Se comparte fácilmente con un enlace o código QR.
Funciona bien para campañas, educación, catálogos, museos, eventos y prototipos.
Permite actualizar el contenido desde el servidor sin pedir al usuario que actualice una app.
Usa tecnologías web que ya son muy comunes: HTML, CSS y JavaScript.

También tiene límites: depende del navegador, del rendimiento del celular, de buena iluminación, de permisos de cámara y del peso de los modelos, videos e imágenes.

5. Qué es MindAR

MindAR es una librería de realidad aumentada para navegador. En este curso la usaremos para reconocimiento y seguimiento de imágenes. MindAR analiza una imagen objetivo, genera un archivo `.mind` y luego usa ese archivo para detectar la imagen con la cámara.

ConceptoSignificadoEn el curso

Imagen objetivoImagen que se va a escanear.Poster, tarjeta o portada.

Archivo `.mind`Archivo compilado que entiende MindAR.Lo generarás con el compilador.

TrackingSeguimiento de la imagen en cámara.Hace que el contenido se mantenga alineado.

6. Qué es A-Frame

A-Frame es un framework que permite crear escenas 3D usando etiquetas HTML. En vez de escribir todo con Three.js puro, puedes usar etiquetas como `a-scene`, `a-camera`, `a-box`, `a-video` y `a-gltf-model`.

Este ejemplo se parece a HTML, pero representa una escena 3D. La línea 1 crea la escena y la línea 3 crea un cubo.

A-Frame básico HTML 3D

<a-scene>
  <a-camera></a-camera>
  <a-box color="#0f6bff" position="0 1 -3"></a-box>
</a-scene>

7. Qué es JavaScript

JavaScript es el lenguaje que permite que la experiencia reaccione. Con JavaScript puedes cambiar textos, reproducir audio, iniciar o pausar videos, escuchar eventos de MindAR y ejecutar acciones cuando el target aparece o desaparece.

En este ejemplo, JavaScript escucha cuando el target aparece. Más adelante usarás este patrón con `targetFound` y `targetLost`.

Evento básico JavaScript

const target = document.querySelector("#main-target");

target.addEventListener("targetFound", () => {
  console.log("Imagen encontrada");
});

8. Ejemplos de aplicaciones WebAR

Educación

Libros o guías donde aparece un modelo 3D, una explicación visual o un video al escanear una página.

Marketing

Posters, empaques o tarjetas que muestran productos, animaciones, promociones o llamados a la acción.

Arquitectura

Planos o renders impresos que muestran maquetas 3D sobre una imagen objetivo.

Arte y eventos

Obras, murales, escarapelas o invitaciones que activan contenido digital interactivo.

Lectura recomendada

Si quieres reforzar las diferencias entre Realidad Aumentada, Realidad Virtual y Realidad Mixta, lee este articulo antes de seguir con el codigo. Te ayuda a usar mejor los conceptos del curso.

Conceptos AR/VR/MR Diferencias entre realidad aumentada, virtual y mixta Ideal para aclarar el vocabulario base antes de construir experiencias WebAR.

Entiendo los conceptos base de AR, WebAR, MindAR, A-Frame y JavaScript.

Módulo 1

Instalar Visual Studio Code y preparar el editor

Visual Studio Code será el editor donde escribirás HTML, CSS y JavaScript. También lo usaremos para instalar extensiones útiles y abrir el proyecto como carpeta.

1. Descargar e instalar VS Code

Entra al sitio oficial: `https://code.visualstudio.com/`.
Descarga la versión para tu sistema operativo: Windows, macOS o Linux.
Instala con las opciones por defecto.
En Windows, si el instalador lo permite, activa la opción para abrir carpetas con clic derecho.
Abre Visual Studio Code y confirma que puedes crear una ventana nueva.

Video guía Instalación de Visual Studio Code paso a paso.

2. Instalar extensiones recomendadas

Abre la barra lateral de extensiones.
Busca `Live Server`.
Instala la extensión de Ritwick Dey.
Instala opcionalmente `Prettier` para ordenar el código.

Live Server permite abrir tu HTML desde un servidor local. Esto se parece más a un sitio real que abrir el archivo directamente con doble clic.

Video guía Instalación y uso inicial de Live Server.

3. Configuración mínima del editor

Activa auto guardado si te resulta cómodo.
Usa tema claro u oscuro según preferencia.
Verifica que el panel de archivos se vea a la izquierda.
Aprende el atajo `Ctrl + S` o `Cmd + S` para guardar.

Ya instalé VS Code, Live Server y sé abrir una carpeta como proyecto.

Módulo 1

Fundamentos de HTML y JavaScript para WebAR

Antes de escribir MindAR, necesitas entender dos piezas base: HTML crea la estructura de la página y JavaScript le da comportamiento. En WebAR, HTML define la escena, la cámara, los assets y los elementos visibles; JavaScript responde a eventos como encontrar o perder el target.

1. Qué es HTML

HTML significa HyperText Markup Language. No es un lenguaje de programación: es un lenguaje de marcado. Su trabajo es describir qué elementos existen en una página y cómo están organizados.

Etiqueta Es el nombre del elemento. Por ejemplo: `h1`, `p`, `button`, `script`.

Atributo Es información adicional dentro de la etiqueta. Por ejemplo: `id`, `class`, `src`, `href`.

Contenido Es lo que vive entre la apertura y el cierre de una etiqueta.

Anidación Es colocar elementos dentro de otros. En WebAR, una escena contiene cámara, assets y targets.

Mira la línea 1 como etiqueta completa. La línea 2 muestra un atributo `id`, útil para encontrar ese elemento desde JavaScript.

Anatomía HTML Concepto

<h1>Mi experiencia WebAR</h1>
<p id="estado" class="mensaje">Busca la imagen objetivo</p>
<button type="button">Iniciar</button>

2. Estructura mínima de una página

Toda página web necesita una estructura base. El navegador lee de arriba hacia abajo: primero entiende el documento, luego carga configuración en `head` y finalmente muestra lo que está dentro de `body`.

ParteFunciónEn WebAR se usa para

`doctype`Activa modo HTML modernoEvitar comportamientos antiguos del navegador

`head`Configuración invisibleCargar A-Frame, MindAR, CSS y metadatos

`body`Contenido visibleEscena AR, mensajes, botones y visor

`script`Carga JavaScriptConectar lógica e interactividad

En este ejemplo, las líneas 3 a 7 preparan el documento y las líneas 9 a 12 son lo que verá el usuario.

Estructura HTML base Líneas importantes

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Mi primera WebAR</title>
  </head>
  <body>
    <h1>Experiencia WebAR</h1>
    <p id="estado">Preparando cámara...</p>
    <button id="boton-iniciar" type="button">Iniciar</button>
  </body>
</html>

3. Qué es JavaScript

JavaScript sí es un lenguaje de programación. Permite tomar decisiones, guardar datos temporales, escuchar acciones del usuario y modificar la página mientras está abierta.

Variable Guarda un valor. Usa `const` si no cambia y `let` si va a cambiar.

Función Agrupa instrucciones para ejecutarlas cuando sea necesario.

Evento Algo que ocurre: un clic, una carga completa o un target encontrado.

DOM Es la representación de tu HTML que JavaScript puede leer y modificar.

La línea 1 busca un elemento por su `id`. La línea 3 cambia su texto. Este patrón se repetirá con los eventos de MindAR.

JavaScript mínimo DOM

const estado = document.querySelector("#estado");

estado.textContent = "JavaScript está funcionando";

4. Conectar HTML con JavaScript

Para que JavaScript controle una página, primero necesita encontrar elementos. Por eso usamos `id` para elementos únicos y `class` para grupos de elementos que comparten estilo o comportamiento.

En el HTML, la línea 10 crea el texto que vamos a cambiar y la línea 11 crea el botón. En JavaScript, las líneas 16 y 17 los buscan, y las líneas 19 a 21 reaccionan al clic.

HTML + JavaScript juntos Ejemplo completo

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <title>Prueba de JavaScript</title>
  </head>
  <body>
    <h1>Prueba interactiva</h1>

    <p id="estado">Esperando acción del usuario</p>
    <button id="boton-iniciar" type="button">Iniciar experiencia</button>

    <script>
      const estado = document.querySelector("#estado");
      const boton = document.querySelector("#boton-iniciar");

      boton.addEventListener("click", () => {
        estado.textContent = "La experiencia ya puede iniciar";
      });
    </script>
  </body>
</html>

5. Cómo esto se conecta con MindAR

MindAR también usa HTML y JavaScript. La diferencia es que algunas etiquetas vienen de A-Frame, como `a-scene`, `a-camera`, `a-assets` y `a-entity`. Aunque se vean diferentes, siguen estando dentro del HTML y JavaScript puede escucharlas.

Lo que aprendes aquíCómo aparece en WebAREjemplo

EtiquetaElemento A-Frame`a-scene`, `a-gltf-model`

AtributoConfiguración AR`mindar-image`, `position`, `scale`

EventoTracking encontrado/perdido`targetFound`, `targetLost`

DOMActualizar interfazCambiar el texto de `#ui-status`

Entiendo qué hacen HTML y JavaScript y cómo se conectan con WebAR.

Módulo 1

Crear la carpeta del proyecto y tu primer HTML

Un proyecto web básico se organiza con archivos. En esta clase crearás la estructura que luego se convertirá en tu experiencia de realidad aumentada.

1. Crear la carpeta

Crea una carpeta llamada `mi-primer-webar`.
Abre Visual Studio Code.
Selecciona `File > Open Folder` y elige esa carpeta.
Dentro crea estas carpetas: `assets`, `models`, `targets` y `js`.

2. Crear `index.html`

El archivo `index.html` será la entrada de tu experiencia. Todo navegador busca HTML para saber qué debe mostrar.

Crea este archivo desde cero. En este primer paso el código ocupa las líneas 1 a 12.

index.html inicial Líneas 1-12

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Mi primera WebAR</title>
  </head>
  <body>
    <h1>Mi primera experiencia WebAR</h1>
    <p>Si ves este texto, tu HTML funciona.</p>
  </body>
</html>

3. Probar con Live Server

Haz clic derecho sobre `index.html`.
Selecciona `Open with Live Server`.
Tu navegador abrirá una URL parecida a `http://127.0.0.1:5500`.
Si cambias el texto y guardas, el navegador debe actualizarse.

Video guía Cómo abrir el proyecto con Live Server desde Visual Studio Code.

Tengo mi carpeta, mi `index.html` y lo puedo ver con Live Server.

Módulo 1

Crear JavaScript y conectar archivos

JavaScript nos permitirá reaccionar a eventos de MindAR, cambiar textos, reproducir audio y controlar elementos cuando el target aparece o desaparece.

1. Crear `js/app.js`

Dentro de la carpeta `js`, crea un archivo llamado `app.js`.

Este será tu segundo archivo. Por ahora solo tendrá la línea 1 para confirmar que JavaScript está conectado.

js/app.js Línea 1

console.log("Mi JavaScript está conectado");

2. Conectar JavaScript al HTML

Antes de cerrar `body`, agrega el script en la línea 11. Observa que el archivo completo ahora crece de 12 a 13 líneas.

index.html completo después de conectar JS Línea nueva: 11

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Mi primera WebAR</title>
  </head>
  <body>
    <h1>Mi primera experiencia WebAR</h1>
    <p>Si ves este texto, tu HTML funciona.</p>
    <script src="./js/app.js"></script>
  </body>
</html>

3. Ver la consola

Abre el navegador.
Presiona `F12` o clic derecho e inspeccionar.
Abre la pestaña `Console`.
Verifica el mensaje `Mi JavaScript está conectado`.

4. Crear un estado visual

Agrega el párrafo de estado en la línea 11 y deja el script en la línea 12. Luego actualiza `js/app.js` para cambiar el texto desde JavaScript.

index.html con estado visual Líneas nuevas: 11-12

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Mi primera WebAR</title>
  </head>
  <body>
    <h1>Mi primera experiencia WebAR</h1>
    <p>Si ves este texto, tu HTML funciona.</p>
    <p id="estado">Esperando experiencia AR...</p>
    <script src="./js/app.js"></script>
  </body>
</html>

js/app.js completo Líneas 1-4

console.log("Mi JavaScript está conectado");

const estado = document.querySelector("#estado");
estado.textContent = "Proyecto listo para conectar MindAR";

Puedo conectar JavaScript, abrir consola y modificar texto desde JS.

Módulo 1

CSS básico para interfaz WebAR

En WebAR no todo ocurre dentro de la escena 3D. También necesitas textos, botones, avisos y paneles sobre la cámara. CSS permite diseñar esa interfaz para que el usuario sepa qué hacer: buscar el target, esperar carga, activar audio, cerrar una ayuda o entender si la experiencia ya detectó la imagen.

1. Qué es CSS

CSS significa Cascading Style Sheets. HTML define los elementos, JavaScript les da comportamiento y CSS define cómo se ven: colores, tamaños, espacios, posición, sombras, bordes y adaptación a pantallas pequeñas.

Selector Indica qué elemento quieres diseñar. Ejemplo: `.ui-status` o `button`.

Propiedad Es lo que quieres cambiar. Ejemplo: `color`, `padding`, `position`.

Valor Es la configuración concreta. Ejemplo: `#0f6bff`, `16px`, `fixed`.

Clase Nombre reutilizable que agregas en HTML con `class` para aplicar estilos.

2. Conectar CSS al HTML

Crea un archivo llamado `style.css` en la raíz del proyecto. Luego conéctalo dentro del `head` de `index.html`.

La línea resaltada 6 carga el archivo CSS. Debe ir dentro del `head`, antes de cerrar `</head>`.

Conectar style.css index.html

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Mi primera WebAR</title>

  <link rel="stylesheet" href="./style.css" />
</head>

3. Crear un mensaje flotante sobre la cámara

Un mensaje de estado ayuda mucho. Puede decir “Busca la imagen objetivo”, “Target detectado” o “Acerca la cámara”. Como la cámara ocupa toda la pantalla, este mensaje debe quedar encima de la escena.

En HTML, la línea 1 crea el mensaje. En CSS, las líneas 5 a 18 lo fijan sobre la cámara.

UI de estado HTML + CSS

<div id="ui-status" class="ui-status">Busca la imagen objetivo</div>

/* style.css */
.ui-status {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 10;
  transform: translateX(-50%);
  padding: 10px 14px;
  color: #ffffff;
  font-weight: 700;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  backdrop-filter: blur(12px);
}

4. Botón flotante para iniciar audio o video

Los navegadores móviles suelen bloquear audio o video con sonido hasta que el usuario toca la pantalla. Por eso es útil crear un botón visible para iniciar la experiencia cuando haga falta.

La línea 1 crea el botón. Las líneas 5 a 21 lo ubican abajo y lo diseñan como acción principal.

Botón flotante HTML + CSS

<button id="start-button" class="ar-button" type="button">Iniciar experiencia</button>

/* style.css */
.ar-button {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 10;
  transform: translateX(-50%);
  min-width: 220px;
  padding: 13px 18px;
  color: #ffffff;
  font-weight: 800;
  background: #0f6bff;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(15, 107, 255, 0.35);
  cursor: pointer;
}

5. Reglas básicas de UI en WebAR

ReglaPor qué importaEjemplo

Usa `position: fixed`La UI queda sobre la cámara.Mensaje de estado.

Usa `z-index`Evita que la escena tape los botones.`z-index: 10`.

Contraste altoLa cámara puede tener fondos claros u oscuros.Texto blanco sobre fondo oscuro.

Botones grandesEn móvil se toca con el dedo.Mínimo 44px de alto.

Tengo una interfaz básica con mensaje y botón sobre la cámara.

Módulo 1

Servidor local, permisos de cámara y HTTPS

La cámara no se comporta igual en todos los contextos. En escritorio puedes probar muchas cosas con `localhost`, pero en móvil normalmente necesitarás HTTPS para que el navegador permita la cámara.

Reglas importantes

No abras la experiencia como `file://archivo.html`.
Usa Live Server o un servidor local.
Prueba cámara primero, antes de culpar a MindAR.
En móvil, publica una versión temporal en HTTPS para pruebas reales.

Opciones para probar en móvil

Subir el proyecto a Netlify, Vercel, Cloudflare Pages o GitHub Pages con HTTPS.
Usar un túnel HTTPS de desarrollo si ya conoces herramientas como ngrok.
Probar primero en escritorio y pasar a móvil cuando la escena base cargue.

Diagnóstico rápido

ProblemaPosible causaAcción

No abre cámaraURL insegura o permiso bloqueadoRevisar HTTPS y permisos

Pantalla negraError WebGL, cámara o scriptMirar consola

No carga modeloRuta o peso del GLBProbar archivo directo

Target inestableImagen pobre o iluminación malaCambiar target

Entiendo por qué se necesita servidor local y cuándo usar HTTPS.

Módulo 2

Crear la primera escena WebAR con MindAR

Ahora reemplazamos el HTML de prueba por una escena real con A-Frame y MindAR. Primero usaremos una geometría simple para confirmar que el tracking funciona antes de cargar modelos.

1. Agregar scripts externos

Ahora vamos a convertir tu HTML normal en una base para WebAR. Para eso debes agregar dos scripts dentro del `head`, justo después del `title`. En el ejemplo están resaltadas las líneas 7 y 8: esas son las líneas nuevas que debes copiar en tu archivo.

`head` Es la zona donde el navegador lee configuración, título, estilos y librerías antes de mostrar el contenido.

Script externo Es un archivo JavaScript que no escribimos nosotros, pero que importamos para usar sus funciones.

A-Frame Permite crear escenas 3D usando etiquetas HTML como `a-scene`, `a-camera` y `a-entity`.

MindAR Agrega el reconocimiento de imágenes y conecta ese tracking con la escena de A-Frame.

CDN Es una URL pública desde donde cargamos librerías sin descargarlas manualmente al proyecto.

Copia las líneas resaltadas 7 y 8 y pégalas dentro de `head`, debajo de la línea 6. No las pongas dentro de `body`, porque queremos que las librerías estén listas antes de crear la escena AR.

index.html con A-Frame y MindAR Líneas nuevas: 7-8

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Mi primera WebAR</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>
    <p id="estado">Esperando experiencia AR...</p>
    <script src="./js/app.js"></script>
  </body>
</html>

Cómo comprobar que lo hiciste bien

Guarda el archivo con `Ctrl + S`.
Abre el proyecto con Live Server.
Abre la consola del navegador.
Si no aparece un error rojo diciendo que A-Frame o MindAR no cargaron, puedes continuar.

2. Crear escena base

El archivo `poster.mind` todavía lo crearás en la siguiente clase. Por ahora deja la ruta preparada dentro de `targets`.

Aquí el bloque resaltado completo es nuevo. Cópialo dentro de `body`, debajo del mensaje `ui-status` y antes del script `./js/app.js`. En el archivo completo, esta escena ocupará las líneas 13 a 25.

Escena mínima MindAR

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

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

  <a-entity id="main-target" mindar-image-target="targetIndex: 0">
    <a-box position="0 0 0.1" depth="0.2" height="0.5" width="0.5" color="#0f6bff"></a-box>
  </a-entity>
</a-scene>

En esta versión completa, las líneas 7 y 8 cargan las librerías, la línea 11 crea el mensaje visual y las líneas 13 a 25 crean la escena AR.

index.html completo con escena MindAR Archivo acumulado

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Mi primera WebAR</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>
    <div id="ui-status">Busca la imagen objetivo</div>

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

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

      <a-entity id="main-target" mindar-image-target="targetIndex: 0">
        <a-box position="0 0 0.1" depth="0.2" height="0.5" width="0.5" color="#0f6bff"></a-box>
      </a-entity>
    </a-scene>

    <script src="./js/app.js"></script>
  </body>
</html>

Qué significa cada parte

`mindar-image`: activa el sistema de reconocimiento de imágenes.
`imageTargetSrc`: apunta al archivo `.mind` compilado.
`a-camera`: representa la cámara de la escena.
`mindar-image-target`: indica qué contenido seguirá al target detectado.
`a-box`: cubo temporal para validar que la experiencia funciona.

Tengo la escena base preparada y entiendo dónde va el target.

Módulo 2

Elegir imagen, compilar target y generar `.mind`

MindAR no rastrea cualquier imagen con la misma calidad. La estabilidad empieza antes del código: empieza con una buena imagen objetivo.

Cómo elegir una buena imagen

Debe tener textura, contraste y detalles en varias zonas.
Evita fondos lisos, logos demasiado simples y patrones repetidos.
No uses imágenes borrosas o con mucho brillo.
Prueba que se vea bien impresa o en pantalla.

Compilar con la herramienta integrada del curso

En vez de salir a otra página, usaremos este compilador dentro del aula. Selecciona una o varias imágenes, analiza la calidad de la primera, compila el archivo `.mind`, prueba el tracking en una ventana interna y descarga el resultado cuando estés conforme.

Selecciona una imagen con buen contraste y detalles.
Presiona `Analizar calidad` para tener una idea rápida de la estabilidad.
Presiona `Compilar target .mind` para generar el marcador.
Usa `Probar en cámara` para validar el tracking sin salir del curso.
Descarga el archivo y guárdalo como `targets/poster.mind` dentro de tu proyecto.

Herramienta práctica

Compilador de targets MindAR

Sube imágenes en formato JPG, PNG o WebP. Para este curso te recomendamos empezar con una sola imagen.

Seleccionar imágenes JPG, PNG o WebP. Puedes elegir hasta 5 para practicar multitarget.

Selecciona una imagen para comenzar.

Prueba de calidad

PruebaEsperadoSi falla

Distancia cortaDetecta rápidoRevisa enfoque

Distancia mediaMantiene trackingMejora imagen

Ángulo inclinadoNo pierde de inmediatoReduce inclinación o cambia target

Luz bajaPuede detectar con dificultadAumenta contraste o iluminación

Ya tengo `targets/poster.mind` y una imagen objetivo probada.

Módulo 2

Cargar un modelo 3D GLB/GLTF

Una vez que el tracking funciona con un cubo, puedes reemplazarlo por un modelo 3D. Es importante empezar liviano para que el móvil no se sature.

Preparar el modelo

Descarga o exporta un modelo en formato `.glb`. Para WebAR, `.glb` es ideal porque junta geometría, materiales, texturas y animaciones en un solo archivo.
Renómbralo con un nombre simple: `modelo.glb`. Evita espacios, acentos y símbolos raros porque después la ruta se escribe dentro del HTML.
Guárdalo en la carpeta `models` o en una carpeta similar dentro del proyecto. En este curso usaremos `./models/modelo.glb` como ejemplo.
Antes de ponerlo en MindAR, pruébalo en el visor de abajo. Si se ve muy pesado o tarda mucho, toca optimizarlo.

GLB Archivo único. Es el formato más cómodo para subir a una experiencia WebAR.

GLTF Puede venir con archivos externos como `.bin` y texturas. Para estudiantes, conviene convertirlo a `.glb`.

Draco Compresión para geometría. Reduce peso, pero necesita decodificador en el visor.

Meshopt Optimización moderna para mallas. Ayuda a cargar más rápido en web y móvil.

Herramientas para conseguir y optimizar modelos

Optimizar AR Optimizer Comprime y prepara modelos 3D para experiencias de realidad aumentada web. Crear con IA Meshy AI Genera modelos 3D con inteligencia artificial cuando no tienes uno propio. Descargar Sketchfab Busca modelos descargables y revisa siempre la licencia antes de usarlos.

Visor GLB/GLTF para probar tu modelo

Carga tu archivo antes de llevarlo a MindAR. Este visor usa Three.js con soporte para modelos comprimidos con Draco y Meshopt. Si tu modelo tiene animaciones, se reproducen automáticamente.

GLB · GLTF · Draco · Meshopt

Cargar modelo 3D

Modelos del curso

Puedes visualizarlos aquí y descargarlos para guardarlos en la carpeta `models` de tu proyecto.

Robot 10.2 MB · personaje rígido para practicar escala y posición.

Descargar GLB

Construction 19.5 MB · escena más pesada para entender límites de rendimiento.

Descargar GLB

Kai Animación 6.9 MB · modelo con animación para pruebas más avanzadas.

Descargar GLB

Nature 4.4 MB · opción liviana para pruebas rápidas en móvil.

Descargar GLB

Tech 4.0 MB · modelo liviano recomendado para primeras pruebas.

Descargar GLB

Tactical 8.9 MB · buen punto medio para probar materiales y detalle.

Descargar GLB

Preparando visor 3D... Recomendación: para WebAR básico intenta usar modelos de menos de 10 MB cuando sea posible.

Arrastra para rotar Carga un archivo o elige un modelo del curso para verlo aquí.

Si eliges un `.gltf` con texturas externas, el navegador puede no encontrar los archivos asociados. Para evitar problemas en clase, exporta o convierte a `.glb` antes de usarlo en MindAR.

Cargarlo como asset

Copia estas 3 líneas dentro de `a-scene`, antes de la cámara. En el archivo completo quedarán como líneas 20 a 22.

Assets A-Frame

<a-assets>
  <a-asset-item id="modelo" src="./models/modelo.glb"></a-asset-item>
</a-assets>

Mostrarlo sobre el target

Este bloque reemplaza el cubo anterior. El lugar exacto es dentro de `main-target`, donde antes estaba `a-box`. En el archivo completo, fíjate en las líneas resaltadas 26 a 34.

Modelo sobre target HTML

<a-entity id="main-target" mindar-image-target="targetIndex: 0">
  <a-gltf-model
    src="#modelo"
    position="0 0 0.1"
    rotation="90 0 0"
    scale="0.25 0.25 0.25">
  </a-gltf-model>
</a-entity>

En el archivo acumulado, las líneas 20 a 22 registran el modelo GLB y las líneas 26 a 33 lo colocan dentro del target para que siga la imagen.

index.html completo con modelo 3D Archivo acumulado

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Mi primera WebAR</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>
    <div id="ui-status">Busca la imagen objetivo</div>

    <a-scene
      mindar-image="imageTargetSrc: ./targets/poster.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="./models/modelo.glb"></a-asset-item>
      </a-assets>

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

      <a-entity id="main-target" mindar-image-target="targetIndex: 0">
        <a-gltf-model
          src="#modelo"
          position="0 0 0.1"
          rotation="90 0 0"
          scale="0.25 0.25 0.25">
        </a-gltf-model>
      </a-entity>
    </a-scene>

    <script src="./js/app.js"></script>
  </body>
</html>

Ajustes típicos

Si no se ve: baja o sube `scale`.
Si aparece acostado: cambia `rotation`.
Si aparece lejos del centro: modifica `position`.
Si aparece negro: agrega o ajusta luces.

Reemplacé el cubo por un modelo GLB visible y centrado.

Módulo 2

Colocar videos sobre el target

Además de modelos 3D, una experiencia WebAR puede mostrar video sobre una imagen objetivo. Esto sirve para posters interactivos, empaques, tarjetas, catálogos, portafolios y piezas educativas. La idea es usar el video como una textura plana que aparece alineada al target.

1. Preparar el archivo de video

Para WebAR conviene usar videos livianos. El navegador tiene que leer cámara, tracking, WebGL y video al mismo tiempo, así que un archivo pesado puede hacer que la experiencia se sienta lenta en móvil.

RecomendaciónValor sugeridoPor qué importa

Formato`.mp4` con H.264Es el formato más compatible en navegadores móviles.

Duración5 a 20 segundosCarga rápido y mantiene buena experiencia.

PesoMenos de 10 MBReduce espera, consumo de memoria y cortes.

AudioOpcional, mejor iniciar en silencioLos móviles bloquean autoplay con sonido.

Crea una carpeta llamada `assets` dentro del proyecto.
Guarda el video como `video-demo.mp4`.
La ruta que usaremos será `./assets/video-demo.mp4`.

2. Cargar el video como asset

En A-Frame, lo más ordenado es registrar primero el video dentro de `a-assets`. Así la escena sabe qué archivo va a usar antes de intentar dibujarlo sobre el target.

Agrega estas líneas dentro de `a-assets`. Si ya tenías el modelo 3D, puedes dejarlo o reemplazarlo por el video. Las líneas resaltadas 2 a 9 son el nuevo asset de video.

Video como asset A-Frame

<a-assets>
  <video
    id="video-ar"
    src="./assets/video-demo.mp4"
    preload="auto"
    loop
    muted
    playsinline
    webkit-playsinline></video>
</a-assets>

`muted` Permite que el video pueda reproducirse sin que el navegador bloquee el autoplay.

`playsinline` Evita que el video se abra a pantalla completa en móviles, especialmente en iPhone.

`loop` Hace que el video se repita mientras el target esté visible.

`preload` Le pide al navegador que prepare el archivo antes de reproducirlo.

3. Mostrar el video sobre la imagen

Para poner el video sobre el target usamos `a-video`. Funciona como un plano rectangular que recibe el video como textura. Si quieres que se vea como un video horizontal 16:9, puedes usar `width="1.2"` y `height="0.675"`.

Este bloque va dentro de `main-target`, donde antes pusiste el cubo o el modelo 3D. Las líneas 2 a 8 son el video visible.

Video sobre target HTML

<a-entity id="main-target" mindar-image-target="targetIndex: 0">
  <a-video
    src="#video-ar"
    position="0 0 0.05"
    rotation="0 0 0"
    width="1.2"
    height="0.675">
  </a-video>
</a-entity>

4. Reproducir y pausar con el tracking

Lo ideal es que el video se reproduzca cuando MindAR encuentra la imagen y se pause cuando la pierde. Esto ahorra recursos y hace que la experiencia se sienta más controlada.

Este JavaScript va en `js/app.js`. Las líneas 1 y 2 buscan el target y el video. Las líneas 4 a 11 controlan reproducción y pausa.

Controlar video con eventos js/app.js

const target = document.querySelector("#main-target");
const video = document.querySelector("#video-ar");

target.addEventListener("targetFound", () => {
  video.currentTime = 0;
  video.play();
});

target.addEventListener("targetLost", () => {
  video.pause();
});

Si quieres audio, primero empieza con el video en silencio. Luego puedes agregar un botón visible de “Activar audio”, porque los navegadores móviles suelen exigir una acción del usuario antes de reproducir sonido.

5. Archivo completo con video

En este archivo acumulado, las líneas 20 a 29 cargan el video y las líneas 33 a 41 lo colocan sobre el target.

index.html completo con video Archivo acumulado

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Mi primera WebAR</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>
    <div id="ui-status">Busca la imagen objetivo</div>

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

      <a-assets>
        <video
          id="video-ar"
          src="./assets/video-demo.mp4"
          preload="auto"
          loop
          muted
          playsinline
          webkit-playsinline></video>
      </a-assets>

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

      <a-entity id="main-target" mindar-image-target="targetIndex: 0">
        <a-video
          src="#video-ar"
          position="0 0 0.05"
          rotation="0 0 0"
          width="1.2"
          height="0.675">
        </a-video>
      </a-entity>
    </a-scene>

    <script src="./js/app.js"></script>
  </body>
</html>

Errores comunes con video

ProblemaCausa probableSolución

No reproduceVideo con audio y sin gesto del usuarioUsa `muted` o agrega botón para iniciar.

Se abre pantalla completaFalta `playsinline`Agrega `playsinline` y `webkit-playsinline`.

Se ve negroFormato no compatible o archivo pesadoExporta `.mp4` H.264 y comprime.

Se ve deformadoMedidas incorrectasAjusta `width` y `height` según la proporción del video.

Puedo cargar un video MP4 y mostrarlo sobre el target.

Módulo 2

Agregar eventos `targetFound` y `targetLost`

La experiencia se siente más profesional cuando responde al usuario. MindAR emite eventos cuando encuentra o pierde el target.

Agregar una interfaz de estado

Si todavía no tienes este mensaje, agrégalo justo antes de `a-scene`. Será el texto que cambia cuando MindAR encuentra o pierde la imagen.

Mensaje visible HTML

<div id="ui-status">Busca la imagen objetivo</div>

Escuchar eventos

Copia este código en `js/app.js`. Las líneas resaltadas crean las referencias al target y al mensaje, y luego escuchan los eventos `targetFound` y `targetLost`.

Eventos MindAR JavaScript

const target = document.querySelector("#main-target");
const status = document.querySelector("#ui-status");

target.addEventListener("targetFound", () => {
  status.textContent = "Target detectado";
  status.classList.add("is-found");
});

target.addEventListener("targetLost", () => {
  status.textContent = "Busca la imagen objetivo";
  status.classList.remove("is-found");
});

Código completo final del curso básico

Al terminar esta sección, tus dos archivos principales deben verse así. Este es el acumulado final que el estudiante puede comparar con su proyecto.

index.html final Archivo completo

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Mi primera WebAR</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>
    <div id="ui-status">Busca la imagen objetivo</div>

    <a-scene
      mindar-image="imageTargetSrc: ./targets/poster.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="./models/modelo.glb"></a-asset-item>
      </a-assets>

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

      <a-entity id="main-target" mindar-image-target="targetIndex: 0">
        <a-gltf-model
          src="#modelo"
          position="0 0 0.1"
          rotation="90 0 0"
          scale="0.25 0.25 0.25">
        </a-gltf-model>
      </a-entity>
    </a-scene>

    <script src="./js/app.js"></script>
  </body>
</html>

js/app.js final Archivo completo

const target = document.querySelector("#main-target");
const status = document.querySelector("#ui-status");

target.addEventListener("targetFound", () => {
  status.textContent = "Target detectado";
  status.classList.add("is-found");
});

target.addEventListener("targetLost", () => {
  status.textContent = "Busca la imagen objetivo";
  status.classList.remove("is-found");
});

Ideas de interacción básica

Reproducir audio corto al detectar el target.
Activar una animación del modelo.
Mostrar un botón para abrir una página externa.
Cambiar color, escala o visibilidad de un elemento.

Mi experiencia cambia visualmente al encontrar y perder el target.

Módulo 3

Publicar tu experiencia WebAR con HTTPS

Una experiencia WebAR no está completa hasta que puedes abrirla desde un celular con una URL real. Para que la cámara funcione fuera de pruebas locales, el sitio debe estar publicado con HTTPS.

1. Por qué HTTPS es obligatorio

Los navegadores protegen el acceso a la cámara. Por seguridad, no permiten que cualquier archivo local o sitio inseguro active la cámara del usuario. Por eso, en móvil necesitas una URL con `https://`.

Contexto¿Cámara funciona?Uso recomendado

`file://`No confiableEvítalo para WebAR.

`localhost`Sí, para pruebas localesDesarrollo en tu computador.

`http://` públicoNormalmente noNo recomendado.

`https://` públicoSíPublicación real para estudiantes/clientes.

2. Estructura final antes de publicar

Antes de subir el proyecto, revisa que todas las rutas estén organizadas. Si una ruta funciona en tu computador pero no en hosting, normalmente es por mayúsculas, espacios, acentos o archivos en carpetas incorrectas.

Estructura recomendada Proyecto final

mi-primer-webar/
  index.html
  style.css
  js/
    app.js
  assets/
    video-demo.mp4
  models/
    modelo.glb
  targets/
    poster.mind

Evita nombres como `Mi Modelo Final.glb`; usa `modelo.glb`.
Evita acentos y caracteres especiales en nombres de archivo.
Respeta mayúsculas y minúsculas: `Model.glb` no es lo mismo que `model.glb` en muchos servidores.

3. Opciones sencillas para publicar

Fácil Netlify Permite arrastrar una carpeta o conectar un repositorio. Incluye HTTPS automático. Gratis GitHub Pages Buena opción si ya usas GitHub. Publica sitios estáticos con HTTPS. Profesional Vercel Muy usado para proyectos web modernos. También ofrece HTTPS automático.

4. Prueba final en celular

Abre la URL publicada desde el celular.
Acepta el permiso de cámara.
Escanea el target con buena iluminación.
Confirma que el modelo o video aparece centrado.
Prueba perder y volver a encontrar el target.
Revisa que los botones y textos sean cómodos de tocar y leer.

Lectura recomendada

Esta guia complementa la clase de publicacion. Explica como subir una pagina a internet gratis y obtener una URL con HTTPS para probar la camara desde celular.

Publicacion HTTPS Como publicar tus apps de realidad aumentada gratis Guia desde cero para subir el proyecto a internet y probarlo con HTTPS.

Entiendo cómo publicar una experiencia WebAR en HTTPS y probarla en celular.

Módulo 3

Checklist de errores comunes en WebAR

En WebAR es normal que algo falle al principio: cámara, rutas, target, modelo, video o permisos. Esta checklist te ayuda a diagnosticar el problema sin borrar todo ni empezar desde cero.

1. Problemas con la cámara

ProblemaCausa probableSolución

La cámara no abreEstás usando `file://` o no hay HTTPSUsa Live Server, localhost o publica con HTTPS.

Permiso bloqueadoEl navegador negó la cámaraRevisa permisos del sitio y vuelve a cargar.

Pantalla negraConflicto de cámara o navegadorCierra otras apps, recarga y prueba otro navegador.

Funciona en PC pero no móvilURL insegura o archivo pesadoPublica con HTTPS y optimiza assets.

2. Problemas con el target

ProblemaCausa probableSolución

No detecta imagenTarget con pocos detallesUsa una imagen con textura, contraste y puntos visuales.

Detecta y se pierde rápidoLuz baja, reflejos o imagen borrosaMejora iluminación y evita brillo.

Error cargando `.mind`Ruta incorrectaRevisa `imageTargetSrc: ./targets/poster.mind`.

Escanea otra imagenArchivo `.mind` equivocadoVuelve a compilar el target correcto.

3. Problemas con modelo 3D

ProblemaCausa probableSolución

No apareceRuta incorrecta o escala muy pequeñaPrueba abrir el `.glb` directo y sube `scale`.

Aparece giganteEscala del modelo muy grandeBaja `scale` a `0.1` o menos.

Aparece acostadoRotación de exportación distintaAjusta `rotation`, por ejemplo `90 0 0`.

Va lentoModelo pesadoOptimiza con Draco/Meshopt y reduce texturas.

4. Problemas con video y audio

ProblemaCausa probableSolución

Video no reproduceAutoplay bloqueadoUsa `muted`, `playsinline` y un botón de inicio si hay audio.

Video negroFormato incompatibleExporta `.mp4` con H.264.

Se deformaProporción incorrectaAjusta `width` y `height` según 16:9, 1:1 o vertical.

Audio no suenaFalta gesto del usuarioAgrega botón “Activar audio”.

5. Orden recomendado para depurar

Confirma que la página abre desde `localhost` o `https://`.
Abre la consola del navegador y busca errores rojos.
Verifica rutas de `.mind`, `.glb`, `.mp4` y `app.js`.
Prueba primero con un cubo simple antes de usar modelos o videos.
Prueba en escritorio y luego en móvil.
Cambia una sola cosa a la vez para saber qué corrigió el problema.

Herramienta recomendada

Cuando tu proyecto no abre camara, no carga modelos o falla el tracking, usa esta herramienta para diagnosticar problemas comunes de WebAR con MindAR, A-Frame y Three.js.

Diagnostico WebAR WebAR DevTools para MindAR, A-Frame y Three.js Herramienta para revisar errores de camara, HTTPS, rutas, modelos, performance y librerias.

Sé diagnosticar errores comunes de cámara, target, modelos, videos y rutas.

Cierre

Archivos descargables del curso

Antes del proyecto final, descarga los recursos base del curso. Estos archivos te ayudan a practicar sin empezar desde cero: una plantilla inicial, un target de práctica, modelos 3D y una estructura de carpetas recomendada.

1. Recursos principales

ZIP base Plantilla WebAR básica Incluye `index.html`, `style.css`, `js/app.js`, carpetas `assets`, `models` y `targets`. Target Imagen de práctica Úsala en el compilador MindAR para generar un archivo `.mind` de prueba. Modelo Robot.glb Modelo de práctica para probar escala, posición y carga de GLB.

2. Modelos 3D incluidos

Estos modelos también están disponibles en la lección de modelos 3D, pero aquí quedan agrupados como biblioteca de descarga. Empieza con los más livianos y deja los pesados para pruebas de rendimiento.

ModeloPeso aprox.Descarga

Tech4.0 MBDescargar Tech.glb

Nature4.4 MBDescargar Nature.glb

Kai Animación6.9 MBDescargar Kai-Animacion.glb

Tactical8.9 MBDescargar Tactical.glb

Robot10.2 MBDescargar Robot.glb

Construction19.5 MBDescargar Construction.glb

3. Estructura de carpetas recomendada

Esta es la estructura mínima que debe tener tu proyecto final. Si usas la plantilla ZIP, ya viene preparada.

Proyecto WebAR básico Estructura

mi-primer-webar/
  index.html
  style.css
  js/
    app.js
  assets/
    video-demo.mp4
  models/
    modelo.glb
  targets/
    poster.mind

4. Cómo usar la plantilla

Descarga `plantilla-webar-basica.zip`.
Descomprime la carpeta en tu computador.
Ábrela con Visual Studio Code.
Abre `index.html` con Live Server.
Compila tu target y guarda el resultado como `targets/poster.mind`.
Reemplaza el cubo por un modelo GLB o video, según tu proyecto final.

Descargué la plantilla, el target de práctica y al menos un modelo 3D.

Cierre

Mini evaluación final

Esta evaluación no busca memorizar definiciones. Sirve para confirmar que entiendes las piezas principales antes de construir y publicar tu proyecto final.

Preguntas clave

PreguntaRespuesta esperadaSeñal de dominio

¿Qué hace MindAR?Reconoce y sigue una imagen objetivo desde la cámara.Puedes explicar tracking y target.

¿Para qué sirve `.mind`?Es el archivo compilado que MindAR usa para detectar la imagen.Sabes generarlo y ubicarlo en `targets`.

¿Dónde va `a-assets`?Dentro de `a-scene`, antes de usar modelos, videos o recursos.Sabes registrar assets antes de mostrarlos.

¿Por qué HTTPS es importante?Porque el navegador exige contexto seguro para usar cámara en móvil.No intentas publicar WebAR en `http://` público.

¿Qué revisar si la cámara no abre?URL, permisos, HTTPS, navegador, consola y si estás usando `file://`.Sigues una checklist en vez de borrar código.

Checklist de preparación

Puedo explicar qué hace MindAR. Sé para qué sirve el archivo `.mind`. Sé dónde colocar `a-assets` y por qué es útil. Entiendo por qué necesito HTTPS para probar en móvil. Sé qué revisar cuando la cámara no abre.

Resultado esperado

Si puedes responder estas cinco preguntas sin mirar el código, ya tienes la base conceptual para construir el proyecto final. Si una respuesta todavía se siente confusa, vuelve a la lección correspondiente antes de continuar.

Completé la mini evaluación y estoy listo para el proyecto final.

Cierre

Proyecto final: experiencia WebAR básica completa

Tu entrega final demuestra que puedes construir una experiencia WebAR completa de principio a fin: preparar archivos, compilar un target, mostrar contenido, reaccionar con eventos y publicarla con HTTPS.

1. Requisitos obligatorios

RequisitoDebe incluirCómo se verifica

Target propioUna imagen elegida por ti y compilada como `.mind`.Existe `targets/poster.mind` y detecta estable.

Modelo o videoUn `.glb` en `models` o un `.mp4` en `assets`.Aparece sobre el target al escanear.

UI de estadoTexto visible sobre cámara.Cambia entre buscar, detectado y perdido.

`targetFound`Evento que se ejecuta al encontrar la imagen.Activa texto, video, audio o animación.

`targetLost`Evento que se ejecuta al perder la imagen.Pausa o reinicia el estado de la experiencia.

HTTPSProyecto publicado en una URL segura.Abre en móvil con cámara funcionando.

2. Entregables

Carpeta del proyecto organizada con `index.html`, `style.css`, `js`, `assets`, `models` y `targets`.
`index.html` con scripts de A-Frame y MindAR, escena, cámara, target y assets.
`js/app.js` con eventos `targetFound` y `targetLost` funcionando.
`targets/poster.mind` generado desde una imagen propia o desde el target de práctica.
Un contenido principal: modelo `.glb` o video `.mp4`.
UI de estado visible sobre la cámara.
URL publicada con HTTPS.
Video corto de evidencia mostrando detección, tracking, pérdida del target y URL publicada.

3. Checklist antes de entregar

Mi proyecto usa un target propio o target de práctica compilado como `.mind`. Mi experiencia muestra un modelo 3D o video sobre el target. Tengo una UI de estado visible sobre la cámara. Mi evento `targetFound` ejecuta una acción clara. Mi evento `targetLost` pausa, reinicia o actualiza la interfaz. Mi proyecto está publicado con HTTPS y probado en celular.

4. Rúbrica

CriterioPesoQué se evalúa

Estructura15%Carpetas, rutas, nombres de archivos y scripts correctos.

Target20%Imagen con buena detección y archivo `.mind` bien enlazado.

Contenido AR20%Modelo o video visible, centrado, escalado y optimizado.

Interactividad20%`targetFound`, `targetLost` y UI de estado funcionando.

Publicación15%URL HTTPS funcional en móvil con permisos de cámara.

Presentación10%Video de evidencia claro y explicación breve del proyecto.

5. Preparación para nivel intermedio

Si completaste esta entrega, ya puedes estudiar múltiples targets, optimización avanzada, animaciones, UI sobre cámara, analítica, despliegue profesional y experiencias comerciales.

Completé el proyecto final y estoy listo para el nivel intermedio.

Ingresa tu código de estudiante

Bienvenida y resultado final

Al finalizar podrás

Proyecto que vas a construir

Fundamentos de Realidad Aumentada

1. Qué es la Realidad Aumentada

Idea clave

2. Diferencia entre AR, VR y Realidad Mixta

3. Qué es WebAR

4. Ventajas de crear realidad aumentada desde el navegador

5. Qué es MindAR

6. Qué es A-Frame

7. Qué es JavaScript

8. Ejemplos de aplicaciones WebAR

Educación

Marketing

Arquitectura

Arte y eventos

Lectura recomendada

Instalar Visual Studio Code y preparar el editor

1. Descargar e instalar VS Code

2. Instalar extensiones recomendadas

3. Configuración mínima del editor

Fundamentos de HTML y JavaScript para WebAR

1. Qué es HTML

2. Estructura mínima de una página

3. Qué es JavaScript

4. Conectar HTML con JavaScript

5. Cómo esto se conecta con MindAR

Crear la carpeta del proyecto y tu primer HTML

1. Crear la carpeta

2. Crear `index.html`

3. Probar con Live Server

Crear JavaScript y conectar archivos

1. Crear `js/app.js`

2. Conectar JavaScript al HTML

3. Ver la consola

4. Crear un estado visual

CSS básico para interfaz WebAR

1. Qué es CSS

2. Conectar CSS al HTML

3. Crear un mensaje flotante sobre la cámara

4. Botón flotante para iniciar audio o video

5. Reglas básicas de UI en WebAR

Servidor local, permisos de cámara y HTTPS

Reglas importantes

Opciones para probar en móvil

Diagnóstico rápido

Crear la primera escena WebAR con MindAR

1. Agregar scripts externos

Cómo comprobar que lo hiciste bien

2. Crear escena base

Qué significa cada parte

Elegir imagen, compilar target y generar `.mind`

Cómo elegir una buena imagen

Compilar con la herramienta integrada del curso

Compilador de targets MindAR

Prueba de calidad

Cargar un modelo 3D GLB/GLTF

Preparar el modelo

Herramientas para conseguir y optimizar modelos

Visor GLB/GLTF para probar tu modelo

Cargarlo como asset

Mostrarlo sobre el target

Ajustes típicos

Colocar videos sobre el target

1. Preparar el archivo de video

2. Cargar el video como asset

3. Mostrar el video sobre la imagen

4. Reproducir y pausar con el tracking

5. Archivo completo con video

Errores comunes con video

Agregar eventos `targetFound` y `targetLost`

Agregar una interfaz de estado

Escuchar eventos

Código completo final del curso básico

Ideas de interacción básica

Publicar tu experiencia WebAR con HTTPS

1. Por qué HTTPS es obligatorio

2. Estructura final antes de publicar