Aula privada intermedia
Este contenido es exclusivo para estudiantes que compraron el curso intermedio. Aqui pasamos de una experiencia basica a un proyecto WebAR organizado, multi-target y listo para publicar.
Modulo 0
En el curso basico creaste una experiencia con un target. En este curso vas a construir una experiencia multi-target con codigo separado, UI sobre camara, multimedia, optimizacion y template final.
Un archivo .mind con dos imagenes objetivo.
Un target muestra un modelo 3D y otro reproduce video.
Al final tendras un ZIP con todo armado para practicar.
Modulo 1
Primero creamos una estructura de carpetas clara. Esto evita rutas confusas cuando el proyecto crece.
webar-intermedio/
index.html
css/
styles.css
js/
app.js
targets/
galeria.mind
models/
robot.glb
videos/
intro.mp4
audio/
ambiente.mp3targetsArchivos compilados de MindAR.galeria.mindmodelsModelos 3D.robot.glbjsLogica de eventos.app.jsEsta primera parte no parece codigo, pero es una decision tecnica importante. En WebAR vas a trabajar con varios tipos de archivos al mismo tiempo: una escena HTML, estilos CSS, logica JavaScript, modelos 3D, videos, audios y targets compilados. Si todo queda mezclado en una sola carpeta, al primer error de ruta sera dificil saber que revisar.
index.htmlEs la pagina principal. Ahi vive la escena A-Frame, los targets de MindAR y la conexion con CSS y JavaScript.css/styles.cssGuarda el diseno de la interfaz: paneles, botones, colores, tamanos y posicion sobre la camara.js/app.jsGuarda el comportamiento: detectar targets, reproducir video, cambiar textos, activar audio y responder al usuario.targets/galeria.mindEs el archivo generado por el compilador de MindAR. Sin este archivo, la escena no sabe que imagenes debe reconocer.models/robot.glbContiene el modelo 3D. El formato GLB es comodo porque empaqueta geometria, materiales y a veces animaciones.videos/intro.mp4Guarda el video que se va a mostrar sobre uno de los targets. Conviene que sea corto y comprimido.audio/ambiente.mp3Es opcional. Lo usamos para explicar permisos de audio en navegadores moviles.
Error comun: escribir model/robot.glb cuando la carpeta se llama models, o guardar
galeria.mind fuera de targets. En WebAR una sola letra distinta en una ruta hace
que el recurso no cargue.
Modulo 1
Ahora conectamos los tres archivos principales. HTML estructura, CSS disena y JavaScript controla eventos.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>WebAR intermedio</title>
<link rel="stylesheet" href="css/styles.css" />
<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>
<main class="ar-ui">
<p id="status">Apunta la camara al marcador</p>
</main>
<script src="js/app.js" defer></script>
</body>
</html>styles.cssConecta el diseno visual.A-FramePermite crear escenas 3D con etiquetas HTML.MindARAgrega reconocimiento de imagenes.deferEjecuta JavaScript cuando el HTML ya existe.const statusText = document.querySelector("#status");
statusText.textContent = "Proyecto intermedio cargado";
console.log("WebAR listo para iniciar");Este bloque crea la base de la pagina. Todavia no hay realidad aumentada visible, pero ya estamos preparando el navegador para cargar A-Frame, MindAR, la interfaz y nuestro archivo JavaScript. Es importante entender esta parte porque casi todos los errores iniciales vienen de scripts mal importados o archivos conectados en el orden incorrecto.
<!doctype html>Le dice al navegador que el documento usa HTML moderno. Sin esto, algunos navegadores pueden interpretar la pagina en modo antiguo.lang="es"Indica que el contenido esta en espanol. Ayuda a accesibilidad, lectores de pantalla y motores de busqueda.charset="utf-8"Permite usar caracteres como tildes, eñes y simbolos sin que se rompan visualmente.viewportHace que la pagina se adapte al ancho del celular. En WebAR esto es fundamental porque casi siempre se prueba en movil.link rel="stylesheet"Conecta el archivo CSS. Si esta ruta falla, la experiencia puede funcionar, pero se vera sin diseno.aframe.min.jsCarga A-Frame. A-Frame nos permite escribir una escena 3D usando etiquetas como a-scene, a-camera y a-gltf-model.mindar-image-aframeConecta MindAR con A-Frame. Esta libreria agrega los componentes mindar-image y mindar-image-target.main class="ar-ui"Es la interfaz HTML que va encima de la camara. No pertenece al mundo 3D: es UI normal de pagina web.deferEvita que el JavaScript busque elementos antes de que existan. Si quitas defer, querySelector podria devolver null.
En el archivo app.js, document.querySelector("#status") busca en el HTML un elemento
con el id status. Guardamos ese elemento en una constante llamada statusText para
cambiar su texto desde JavaScript. Despues usamos textContent, que reemplaza el texto visible del
elemento. Finalmente console.log no cambia la pagina: solo escribe un mensaje en la consola para
comprobar que el archivo JavaScript cargo correctamente.
Modulo 1
Guardamos la informacion de cada target en un arreglo para que el proyecto sea escalable.
const targets = [
{
id: 0,
name: "Robot",
title: "Robot de bienvenida",
type: "model",
src: "models/robot.glb",
scale: "0.35 0.35 0.35"
},
{
id: 1,
name: "Video",
title: "Video de presentacion",
type: "video",
src: "videos/intro.mp4",
width: 1.2,
height: 0.68
}
];idNumero del target.Relacionarlo con targetIndex.typeTipo de recurso.Saber si es modelo o video.srcRuta del archivo.Cargar el recurso correcto.const statusText = document.querySelector("#status");
statusText.textContent = "Proyecto intermedio cargado";
console.log("WebAR listo para iniciar");
const targets = [
{
id: 0,
name: "Robot",
title: "Robot de bienvenida",
type: "model",
src: "models/robot.glb",
scale: "0.35 0.35 0.35"
},
{
id: 1,
name: "Video",
title: "Video de presentacion",
type: "video",
src: "videos/intro.mp4",
width: 1.2,
height: 0.68
}
];
El arreglo targets funciona como una pequena base de datos dentro del proyecto. En vez de tener
informacion regada por todo el HTML, reunimos los datos de cada marcador en un solo lugar. Esto es una practica
muy usada en proyectos reales porque facilita agregar, quitar o cambiar contenidos sin reescribir toda la escena.
const targets = [Crea un arreglo. Un arreglo es una lista ordenada. Aqui cada elemento representa un target del proyecto.{ } agrupan la informacion del target 0. Este target mostrara un modelo 3D.id: 0Este numero debe coincidir con targetIndex: 0 en la escena. Es la forma de relacionar datos con marcador.type: "model"Describe el tipo de contenido. No lo usa MindAR automaticamente; lo usamos nosotros para organizar la logica.srcEs la ruta del archivo. Si el modelo no carga, esta es una de las primeras lineas que debes revisar.scaleDefine el tamano inicial del modelo. En WebAR los modelos suelen venir demasiado grandes o pequenos.width y height.Aunque en esta clase todavia escribimos algunas cosas manualmente en HTML, esta configuracion prepara al estudiante para proyectos mas avanzados donde el contenido se puede generar dinamicamente desde JavaScript, desde un archivo JSON o incluso desde una API.
Modulo 2
MindAR puede reconocer varias imagenes desde un mismo archivo .mind. El orden de carga define los indices.
galeria.mind.targets.Herramienta practica
Sube imagenes JPG, PNG, SVG o WebP. Para este curso usa entre 2 y 5 targets.
<a-scene
mindar-image="imageTargetSrc: targets/galeria.mind; maxTrack: 2; filterMinCF: 0.001; filterBeta: 0.01"
color-space="sRGB"
renderer="colorManagement: true, physicallyCorrectLights"
vr-mode-ui="enabled: false"
device-orientation-permission-ui="enabled: false">
<a-assets></a-assets>
<a-entity mindar-image-target="targetIndex: 0" id="target-robot"></a-entity>
<a-entity mindar-image-target="targetIndex: 1" id="target-video"></a-entity>
<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
</a-scene>imageTargetSrcIndica donde esta el archivo .mind.Debe existir en targets.maxTrack: 2Define cuantos targets se pueden rastrear de forma simultanea.Usa 2 porque el proyecto final muestra robot y video al mismo tiempo.targetIndex: 0Primera imagen compilada.Robot.targetIndex: 1Segunda imagen compilada.Video.
Esta es una de las partes mas importantes del curso intermedio. El archivo .mind no es una imagen:
es una version procesada de una o varias imagenes objetivo. MindAR analiza puntos visuales, contrastes, formas y
patrones. Cuando la camara ve algo parecido, intenta calcular la posicion del target para colocar contenido encima.
<a-scene>Es el contenedor principal de A-Frame. Todo lo que pertenece a la escena 3D o AR vive dentro de esta etiqueta.mindar-imageActiva el sistema de image tracking. El parametro imageTargetSrc apunta al archivo compilado.maxTrack: 2Permite que MindAR intente seguir dos imagenes al mismo tiempo. Sin este parametro, la experiencia puede comportarse como si solo aceptara un target visible a la vez.filterMinCFAyuda a filtrar detecciones debiles. Valores pequenos pueden hacer que el tracking responda mas rapido, pero tambien puede ser mas sensible al ruido.filterBetaSuaviza el movimiento del contenido AR. Si el objeto tiembla mucho, este tipo de parametros se revisa.color-space="sRGB"Ayuda a que colores y texturas se vean mas consistentes en modelos y materiales.rendererConfigura el render 3D. En modelos GLB con luces y materiales, esto puede mejorar la apariencia.targetIndex: 0Esta entidad se activa cuando MindAR reconoce la primera imagen compilada.targetIndex: 1Esta entidad se activa cuando MindAR reconoce la segunda imagen compilada.a-cameraRepresenta la camara virtual de A-Frame. MindAR la sincroniza con la camara real del dispositivo.
maxTrack: 2 permite que, si muestras los dos marcadores al mismo tiempo frente a la camara,
ambos puedan mantenerse activos en pantalla. Si quisieras rastrear tres imagenes simultaneas, tendrias que usar
maxTrack: 3 y tener tres entidades con sus respectivos targetIndex.
Regla de oro: si el contenido aparece en el target equivocado, casi siempre el problema esta en el orden en que
cargaste las imagenes al compilar. Primera imagen = targetIndex: 0, segunda imagen = targetIndex: 1.
Modulo 2
Ahora cada marcador deja de estar vacio y recibe su propio contenido.
<a-assets>
<a-asset-item id="robotModel" src="models/robot.glb"></a-asset-item>
<video id="introVideo" src="videos/intro.mp4" preload="auto" loop playsinline webkit-playsinline></video>
</a-assets>
<a-entity mindar-image-target="targetIndex: 0" id="target-robot">
<a-gltf-model src="#robotModel" position="0 0 0" scale="0.35 0.35 0.35"></a-gltf-model>
</a-entity>
<a-entity mindar-image-target="targetIndex: 1" id="target-video">
<a-video src="#introVideo" width="1.2" height="0.68" position="0 0 0"></a-video>
</a-entity>a-assetsPrecarga recursos.Modelos, videos, imagenes.a-gltf-modelMuestra un GLB/GLTF.Target robot.a-videoMuestra video como plano.Target video.
En A-Frame, a-assets es una zona de precarga. Esto significa que el navegador intenta preparar
modelos, videos o imagenes antes de usarlos en la escena. Es mejor que cargar un archivo justo en el momento
de detectar el target, porque podria producir pausas o parpadeos.
<a-assets>Abre el bloque de recursos. Los elementos dentro de aqui no se ven directamente; se preparan para usarse despues.a-asset-itemSe usa para cargar archivos externos como GLB o GLTF. El id robotModel permite referenciarlo luego.videoCarga el video HTML normal. Luego A-Frame lo usa como textura dentro de a-video.preload="auto"Le pide al navegador que prepare el video. Algunos navegadores moviles pueden limitar esta carga para ahorrar datos.loopHace que el video vuelva a empezar cuando termina.playsinlineEvita que iPhone intente abrir el video en pantalla completa. En WebAR queremos que el video siga dentro de la escena.mindar-image-targetTodo lo que este dentro de esta entidad aparece pegado al target correspondiente.a-gltf-modelMuestra el modelo 3D. El atributo src="#robotModel" no apunta a una carpeta, sino al asset precargado.a-videoCrea un plano 3D que reproduce video. Sus medidas se controlan con width y height.
Si el modelo no aparece, revisa tres cosas: que el archivo exista en models, que el id del asset
coincida con el src, y que la escala no sea tan grande o tan pequena que parezca invisible.
Modulo 2
Los eventos permiten que cada marcador dispare acciones diferentes.
const statusText = document.querySelector("#status");
const introVideo = document.querySelector("#introVideo");
const robotTarget = document.querySelector("#target-robot");
const videoTarget = document.querySelector("#target-video");
robotTarget.addEventListener("targetFound", () => {
statusText.textContent = "Robot detectado";
});
robotTarget.addEventListener("targetLost", () => {
statusText.textContent = "Busca el marcador nuevamente";
});
videoTarget.addEventListener("targetFound", () => {
statusText.textContent = "Video detectado";
introVideo.play();
});
videoTarget.addEventListener("targetLost", () => {
introVideo.pause();
introVideo.currentTime = 0;
});
Los eventos son la parte que hace que la experiencia se sienta viva. MindAR emite targetFound
cuando reconoce una imagen y targetLost cuando deja de verla. Con esos eventos podemos cambiar la
interfaz, reproducir audio, pausar video, iniciar animaciones o registrar interacciones.
querySelector("#status")Busca el texto de estado. Lo usaremos para comunicar al usuario que esta pasando.querySelector("#introVideo")Busca el elemento de video que cargamos en a-assets. Asi podemos reproducirlo o pausarlo.addEventListenerRegistra una funcion que se ejecuta cuando ocurre algo. En este caso, cuando MindAR encuentra el robot.textContentCambia el texto visible del panel de estado para dar retroalimentacion inmediata.targetLostCuando se pierde el target, cambiamos el mensaje para que el usuario sepa que debe apuntar de nuevo.introVideo.play()Reproduce el video solo cuando el target correcto esta visible. Esto ahorra recursos y mejora la experiencia.pause() y currentTimePausar detiene el video. Poner currentTime = 0 lo devuelve al inicio para la proxima deteccion.
Error comun: si introVideo aparece como null en consola, significa que JavaScript no
encontro el elemento. Revisa que el id en HTML sea exactamente introVideo y que el script tenga
defer.
Modulo 3
La interfaz debe guiar al usuario sin bloquear la escena AR.
<main class="ar-ui">
<section class="status-panel">
<p class="eyebrow">WebAR activo</p>
<h1 id="statusTitle">Escanea una imagen</h1>
<p id="status">Apunta la camara al target para iniciar.</p>
<button id="soundButton" type="button">Activar sonido</button>
</section>
</main>.ar-ui {
position: fixed;
inset: 0;
z-index: 10;
pointer-events: none;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 16px;
}
.status-panel {
width: min(520px, 100%);
background: rgba(255, 255, 255, 0.92);
border-radius: 18px;
padding: 16px;
pointer-events: auto;
}pointer-events: none evita que la UI bloquee la escena. El panel usa pointer-events: auto para permitir clics.
En una experiencia WebAR hay dos mundos conviviendo: la escena 3D de A-Frame y la interfaz HTML normal.
La interfaz no debe bloquear la camara ni robar todos los toques de pantalla. Por eso usamos una capa fija
encima de todo, pero controlamos cuidadosamente los clics con pointer-events.
position: fixedFija la UI a la ventana del navegador, no al flujo normal del documento.La camara ocupa toda la pantalla y la UI debe mantenerse encima.inset: 0Equivale a top, right, bottom y left en cero.Hace que la capa cubra toda la pantalla.z-index: 10Controla profundidad visual en HTML.La UI debe quedar por encima del canvas de A-Frame.pointer-events: noneLa capa general no recibe clics.Evita que una capa invisible bloquee la interaccion con la escena.pointer-events: autoReactiva clics dentro del panel.El boton de sonido debe seguir funcionando.width: min(520px, 100%)Usa 520px como maximo, pero nunca se sale del ancho de pantalla.Hace que el panel funcione en celular y escritorio.Consejo de diseno: no llenes la pantalla con instrucciones largas mientras la camara esta activa. La UI debe orientar, no tapar el target. Para explicaciones largas usa secciones del curso; para la experiencia final usa mensajes cortos y accionables.
Modulo 3
Si el modelo GLB trae animaciones, A-Frame puede reproducirlas con animation-mixer.
<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>
<script src="https://cdn.jsdelivr.net/npm/aframe-extras@7.5.4/dist/aframe-extras.min.js"></script><a-gltf-model
id="robotAnimated"
src="#robotModel"
position="0 0 0"
scale="0.35 0.35 0.35"
animation-mixer="clip: *; loop: repeat; timeScale: 1"></a-gltf-model>clipElige la animacion.* reproduce todas.loopRepite la animacion.repeattimeScaleVelocidad.0.5 mas lento.
A-Frame por si solo puede mostrar modelos GLB, pero para reproducir animaciones normalmente usamos
aframe-extras. Ese paquete agrega el componente animation-mixer, que lee las
animaciones internas del GLB. Si el modelo no trae animaciones exportadas, el componente no tendra nada que reproducir.
aframe-extrasLibreria adicional que extiende A-Frame con componentes utiles.Debe cargarse despues de A-Frame.animation-mixerComponente que controla clips de animacion dentro del GLB.El modelo debe tener animaciones reales.clip: *Intenta reproducir todos los clips disponibles.Si conoces el nombre exacto, usa ese nombre.loop: repeatHace que la animacion se repita continuamente.Util para personajes en estado idle.timeScaleMultiplica la velocidad de reproduccion.0.5 es mas lento, 2 es mas rapido.Si la animacion solo avanza unos frames, puede deberse al archivo GLB, al nombre del clip o al exportador usado desde Blender/Mixamo. En ese caso prueba el modelo en un visor GLB antes de culpar a MindAR.
Modulo 3
Un modelo necesita ajustes para quedar bien alineado con el target.
positionUbicacion X, Y, Z.0 0.1 0rotationGiro en grados.0 180 0scaleTamano.0.35 0.35 0.35let currentScale = 0.35;
const model = document.querySelector("#robotAnimated");
const biggerButton = document.querySelector("#bigger");
const smallerButton = document.querySelector("#smaller");
biggerButton.addEventListener("click", () => {
currentScale += 0.05;
model.setAttribute("scale", `${currentScale} ${currentScale} ${currentScale}`);
});
smallerButton.addEventListener("click", () => {
currentScale = Math.max(0.05, currentScale - 0.05);
model.setAttribute("scale", `${currentScale} ${currentScale} ${currentScale}`);
});Las transformaciones son la forma en que le dices al navegador donde colocar el contenido AR. En image tracking, el origen del objeto esta relacionado con el centro del target. Por eso un modelo puede aparecer centrado, pero aun asi verse enterrado, muy grande o mirando en la direccion equivocada.
position="0 0 0"Los tres valores son X, Y y Z. X mueve horizontal, Y mueve vertical, Z mueve profundidad.0 0.1 0 sube un poco el modelo.rotation="0 180 0"Los valores son grados de rotacion en X, Y y Z.Usa Y para girar el modelo hacia el usuario.scale="0.35 0.35 0.35"Escala en X, Y y Z. Normalmente usamos el mismo numero en los tres ejes para no deformar.Si el modelo es enorme, prueba 0.05.setAttributePermite cambiar atributos de A-Frame desde JavaScript.Sirve para hacer botones de prueba o controles en vivo.Math.maxEvita que la escala baje de un minimo.Sin esto podrias llegar a escala cero y hacer invisible el modelo.La forma profesional de ajustar es: primero corrige escala, despues posicion y al final rotacion. Si intentas arreglar todo al tiempo, es dificil saber que cambio resolvio el problema.
Modulo 4
En moviles, el audio necesita una interaccion del usuario. Por eso usamos un boton para activarlo.
const soundButton = document.querySelector("#soundButton");
const ambience = new Audio("audio/ambiente.mp3");
ambience.loop = true;
let soundEnabled = false;
soundButton.addEventListener("click", async () => {
soundEnabled = true;
await ambience.play();
ambience.pause();
soundButton.textContent = "Sonido activado";
});
robotTarget.addEventListener("targetFound", () => {
if (soundEnabled) {
ambience.currentTime = 0;
ambience.play();
}
});new AudioCrea un audio desde archivo.Debe existir la ruta.soundEnabledGuarda si el usuario ya hizo clic.Evita bloqueos moviles.play()Reproduce audio o video.Puede requerir permiso.
Los navegadores moviles bloquean audio automatico para evitar paginas molestas. Por eso un play()
ejecutado sin interaccion del usuario puede fallar. La solucion es pedir un toque inicial con un boton. Ese toque
crea el permiso necesario para que luego la experiencia pueda reproducir sonido cuando MindAR detecta el target.
soundButtonGuarda el boton que el usuario toca para activar sonido.new Audio(...)Crea un objeto de audio desde un archivo. La ruta debe existir o el navegador no podra reproducirlo.loop = trueHace que el audio se repita. Puedes quitarlo si solo quieres un sonido corto.soundEnabledEs una bandera booleana. Empieza en falso y cambia a verdadero cuando el usuario toca el boton.asyncIndica que dentro de la funcion podemos esperar una operacion, como reproducir audio.await ambience.play()Intenta reproducir y espera el resultado. Si el navegador lo permite, el audio queda desbloqueado.pause()Pausamos inmediatamente porque solo queriamos desbloquear el audio, no dejarlo sonando todavia.targetFoundCuando aparece el robot, verificamos si el sonido ya fue activado y entonces reproducimos.
Para video usamos la misma idea: si el video tiene sonido, probablemente requiera interaccion. Si esta silenciado
con muted, algunos navegadores permiten autoplay, pero en WebAR es mejor controlar la reproduccion con eventos.
Modulo 4
WebAR debe ser liviano. Si pesa demasiado, el celular pierde rendimiento o cierra la pagina.
Puedes comprimir modelos en AR Optimizer.
Optimizar no significa bajar calidad sin criterio. Significa preparar los recursos para que funcionen en celulares reales. Una computadora puede mover modelos pesados, pero WebAR depende de camara, tracking, render 3D y navegador al mismo tiempo. Todo eso compite por memoria, bateria y procesador.
Una prueba seria no es solo abrir la pagina en tu computador. Debes probar en al menos un celular, con datos o Wi-Fi normal, y observar tiempo de carga, calentamiento, estabilidad del tracking y respuesta de la interfaz.
Al trabajar con varios targets, modelos, videos y eventos, es normal que aparezcan errores de rutas, permisos o rendimiento. Esta herramienta te ayuda a diagnosticar la experiencia antes de entregarla.
Modulo 4
Para probar camara en celular necesitas HTTPS. El QR debe apuntar a la URL publicada.
targets/galeria.mind exista.URL del proyecto:
https://tudominio.com/webar-intermedio/
URL recomendada para QR:
https://tudominio.com/webar-intermedio/?v=1
La camara es un permiso sensible. Por seguridad, los navegadores solo permiten usarla en contextos seguros:
https://, localhost o algunos entornos especiales de desarrollo. Por eso un proyecto
que funciona en tu computador puede fallar cuando lo subes mal a internet.
https://tudominio.com?v=1Parametro de version. Ayuda a evitar que el navegador muestre una version vieja guardada en cache.Cambia a ?v=2 despues de actualizar.models/robot.glb dependen de la ubicacion de index.html.Si mueves el HTML, debes revisar rutas.Cuando compartas el QR, prueba escanearlo como lo haria un estudiante o cliente. Si solo funciona en tu red local o en tu computador, todavia no esta publicado correctamente.
Despues de crear el proyecto intermedio, el siguiente paso es publicarlo para que otra persona pueda abrirlo desde un celular con HTTPS. Esta guia te muestra una ruta gratuita para hacerlo.
Cierre
La entrega final demuestra que puedes construir una experiencia intermedia completa.
Descarga esta plantilla si quieres partir desde el proyecto intermedio ya armado. Incluye codigo final, modelo, video, targets SVG de practica y estructura completa de carpetas.
plantilla-webar-intermedia-completa.zip.target-robot.svg y target-video.svg.targets/galeria.mind.index.html con Live Server.Estos son los archivos completos del proyecto final. Son los mismos que incluye el template descargable.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>WebAR intermedio multi-target</title>
<link rel="stylesheet" href="css/styles.css" />
<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>
<script src="https://cdn.jsdelivr.net/npm/aframe-extras@7.5.4/dist/aframe-extras.min.js"></script>
</head>
<body>
<main class="ar-ui">
<section class="status-panel">
<p class="eyebrow">WebAR activo</p>
<h1 id="statusTitle">Escanea una imagen</h1>
<p id="status">Apunta la camara al target para iniciar.</p>
<button id="soundButton" type="button">Activar sonido</button>
</section>
</main>
<a-scene mindar-image="imageTargetSrc: targets/galeria.mind; maxTrack: 2; filterMinCF: 0.001; filterBeta: 0.01" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-assets>
<a-asset-item id="robotModel" src="models/robot.glb"></a-asset-item>
<video id="introVideo" src="videos/intro.mp4" preload="auto" loop playsinline webkit-playsinline></video>
</a-assets>
<a-entity mindar-image-target="targetIndex: 0" id="target-robot">
<a-gltf-model id="robotAnimated" src="#robotModel" position="0 0 0" rotation="0 0 0" scale="0.35 0.35 0.35" animation-mixer="clip: *; loop: repeat; timeScale: 1"></a-gltf-model>
</a-entity>
<a-entity mindar-image-target="targetIndex: 1" id="target-video">
<a-video src="#introVideo" width="1.2" height="0.68" position="0 0 0"></a-video>
</a-entity>
<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
</a-scene>
<script src="js/app.js" defer></script>
</body>
</html>* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; background: #050816; }
.ar-ui {
position: fixed;
inset: 0;
z-index: 10;
pointer-events: none;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 16px;
}
.status-panel {
width: min(520px, 100%);
background: rgba(255, 255, 255, 0.92);
border-radius: 18px;
padding: 16px;
color: #111827;
pointer-events: auto;
}
.eyebrow { color: #2563eb; font-weight: 700; text-transform: uppercase; }
#soundButton { border: 0; border-radius: 999px; padding: 10px 14px; background: #2563eb; color: white; font-weight: 700; }const statusTitle = document.querySelector("#statusTitle");
const statusText = document.querySelector("#status");
const soundButton = document.querySelector("#soundButton");
const robotTarget = document.querySelector("#target-robot");
const videoTarget = document.querySelector("#target-video");
const introVideo = document.querySelector("#introVideo");
const robot = document.querySelector("#robotAnimated");
const activeTargets = new Set();
const ambience = new Audio("audio/ambiente.mp3");
ambience.loop = true;
let soundEnabled = false;
function updateStatus() {
if (activeTargets.has("robot") && activeTargets.has("video")) {
statusTitle.textContent = "Robot y video detectados";
statusText.textContent = "Los dos marcadores estan activos al mismo tiempo.";
return;
}
if (activeTargets.has("robot")) {
statusTitle.textContent = "Robot detectado";
statusText.textContent = "El modelo 3D esta activo sobre el marcador.";
return;
}
if (activeTargets.has("video")) {
statusTitle.textContent = "Video detectado";
statusText.textContent = "El video se reproduce mientras el target esta visible.";
return;
}
statusTitle.textContent = "Escanea una imagen";
statusText.textContent = "Apunta la camara a uno o dos targets para iniciar.";
}
soundButton.addEventListener("click", async () => {
soundEnabled = true;
await ambience.play();
ambience.pause();
soundButton.textContent = "Sonido activado";
});
robotTarget.addEventListener("targetFound", () => {
activeTargets.add("robot");
updateStatus();
robot.setAttribute("animation-mixer", "clip: *; loop: repeat; timeScale: 1");
if (soundEnabled) ambience.play();
});
robotTarget.addEventListener("targetLost", () => {
activeTargets.delete("robot");
updateStatus();
ambience.pause();
});
videoTarget.addEventListener("targetFound", () => {
activeTargets.add("video");
updateStatus();
introVideo.play();
});
videoTarget.addEventListener("targetLost", () => {
activeTargets.delete("video");
updateStatus();
introVideo.pause();
introVideo.currentTime = 0;
});Despues de este proyecto puedes pasar a experiencias comerciales, APIs, analitica, paneles de administracion y contenido dinamico.
Prueba de camara
Cuando MindAR reconozca el target, veras un panel azul sobre la imagen.