Creando un videojuego en realidad aumentada: Pasos iniciales

Realidad Aumentada Interactiva: Cómo Dar Vida a Modelos 3D con Múltiples Marcadores

Varias imagenes de un zorro con una armadura que funciona como marcador de realidad aumentada — Marcadores Realidad Aumentada – Video Juego

¡Hola, creadores del futuro! ¿Alguna vez han soñado con que el mundo físico interactúe con el digital de una forma mágica y dinámica? Hoy, vamos a hacer precisamente eso. Nos sumergiremos en el fascinante universo de la Realidad Aumentada (RA), específicamente en la WebAR, para construir una experiencia inmersiva donde múltiples marcadores funcionan como botones para controlar las animaciones de un personaje 3D en tiempo real.

Usaremos un trío de herramientas potentísimo: MindAR para el reconocimiento de imágenes, A-Frame para construir la escena 3D en la web, y aframe-extras para estabilizar nuestras animaciones. ¡Prepárense para llevar la interacción 3D a otro nivel!

Los Pilares de Nuestra Experiencia WebAR

Nuestro proyecto se basa en un concepto sencillo pero poderoso:

El Escenario (Marcador 0): Un marcador de imagen principal actúa como nuestro escenario. Cuando la cámara lo detecta, un modelo 3D de un zorro aparece, pacientemente esperando instrucciones en su animación «Idle».
Los Botones (Marcadores 1-6): Otros seis marcadores actúan como disparadores o «botones». Cada vez que uno de ellos aparece en escena junto al principal, el zorro cambia su animación (saludar, correr, golpear, etc.).
La Magia (El Código): Un componente de A-Frame vigila constantemente la escena, decide qué animación debe reproducirse y da las órdenes, creando una interacción en tiempo real fluida y sin interrupciones.

Anatomía del Código: ¿Cómo Funciona?

Desglosemos los componentes clave de nuestro código para entender la magia detrás de esta experiencia inmersiva.

El HTML: Estructurando la Escena

El archivo index.html es el esqueleto de nuestra aplicación. Aquí definimos la escena de A-Frame, precargamos nuestros modelos 3D (.glb) y asignamos un ID a cada marcador de imagen. La clave es el atributo maxTrack: 7 en <a-scene>, que le permite a MindAR rastrear múltiples imágenes simultáneamente, la base de nuestra interacción con multimarcadores.

El JavaScript: El Cerebro de la Animación

Aquí es donde reside la verdadera inteligencia. Creamos un componente personalizado de A-Frame llamado animation-controller. Su superpoder es la función tick(), que se ejecuta en cada fotograma.

En lugar de depender de eventos que pueden fallar, tick() pregunta constantemente: «¿Qué marcadores estoy viendo ahora mismo?».

Si solo ve el marcador 0, se asegura de que el lobo esté en su animación «Idle».
Si ve el marcador 0 y, por ejemplo, el marcador 5, le ordena al lobo que ejecute la animación «Kick».

Este método de verificación continua es increíblemente robusto y es el secreto para que la animación 3D responda de forma instantánea y fiable a los marcadores.

Este es el link para descargar el modelo 3D: «KAI» – The Little Fox Warrior (Animated)

Pasemos a lo importante, el HTML, CSS y JavaScript.

Crea realidad aumentada en minutos con esta herramienta creada GRATIS: Editor AR Online: Modelos 3D (GLB, GLTF) y Video (MP4)

HTML

<!DOCTYPE html>
<html>
<head>
<!-- Configuración para la correcta visualización en dispositivos móviles -->
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- Título de la página que aparecerá en la pestaña del navegador -->
<title>MindAR Animaciones Interactivas</title>

<!-- Enlace a la hoja de estilos CSS externa -->
<link rel="stylesheet" href="style.css">

<!-- Librería principal de A-Frame para crear escenas 3D/VR/AR en la web -->
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>

<!-- Librería 'aframe-extras' que mejora y estabiliza el sistema de animaciones -->
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v7.0.0/dist/aframe-extras.min.js"></script>

<!-- Librería de MindAR para A-Frame, encargada del reconocimiento de imágenes -->
<script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js"></script>

<!-- Enlace al archivo JavaScript externo que contiene la lógica de nuestra aplicación -->
<!-- 'defer' asegura que el script se ejecute después de que el HTML haya sido analizado -->
<script src="script.js" defer></script>
</head>
<body>
<!-- a-scene: El contenedor principal para todos los objetos 3D de A-Frame -->
<a-scene
mindar-image="
imageTargetSrc: ./targets.mind;
maxTrack: 7;
"
color-space="sRGB"
renderer="colorManagement: true, physicallyCorrectLights"
vr-mode-ui="enabled: false"
device-orientation-permission-ui="enabled: false">

<!-- a-assets: Un lugar para precargar recursos pesados como modelos 3D o texturas -->
<a-assets>
<!-- Precargamos el modelo del lobo para un acceso rápido -->
<a-asset-item id="wolfModelAsset" src="./wolf.glb"></a-asset-item>
<!-- Precargamos el modelo del rinoceronte -->
<a-asset-item id="rhinoModelAsset" src="./Rhino.glb"></a-asset-item>
</a-assets>

<!-- a-camera: Define el punto de vista del usuario en la escena -->
<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

<!-- a-entity: Un objeto genérico en la escena. Aquí lo usamos para representar un marcador -->
<!-- id="marker0": Identificador único para este marcador -->
<!-- mindar-image-target="targetIndex: 0": Le dice a MindAR que este es el primer marcador (índice 0) -->
<a-entity id="marker0" mindar-image-target="targetIndex: 0">
<!-- a-gltf-model: Muestra un modelo 3D en formato .glb o .gltf -->
<a-gltf-model
id="wolf"
src="#wolfModelAsset"
scale="0.2 0.2 0.2"
rotation="0 -90 0"
animation-controller> <!-- Aquí adjuntamos nuestro componente personalizado -->
</a-gltf-model>
</a-entity>

<!-- Entidades vacías para los marcadores que solo actúan como disparadores ("botones") -->
<a-entity id="marker1" mindar-image-target="targetIndex: 1"></a-entity>
<a-entity id="marker2" mindar-image-target="targetIndex: 2"></a-entity>
<a-entity id="marker3" mindar-image-target="targetIndex: 3"></a-entity>
<a-entity id="marker4" mindar-image-target="targetIndex: 4"></a-entity>
<a-entity id="marker5" mindar-image-target="targetIndex: 5"></a-entity>

<!-- Marcador 6, que además de disparar una animación, contiene su propio modelo 3D -->
<a-entity id="marker6" mindar-image-target="targetIndex: 6">
<a-gltf-model
id="rhino"
src="#rhinoModelAsset"
scale="3 3 3"
position="0 0 0"
rotation="0 -90 0">
</a-gltf-model>
</a-entity>
</a-scene>
</body>
</html>

CSS

/* Aplica estilos al cuerpo y al HTML principal */
html, body {
/* Elimina cualquier margen o padding por defecto del navegador */
margin: 0;
padding: 0;

/* Evita que aparezcan barras de scroll, crucial para experiencias a pantalla completa como la RA */
overflow: hidden;
}

JAVASCRIPT

Estos post te pueden servir para seguir creando tu video juego en realidad aumentada.

// --- 1. REGISTRAMOS NUESTRO COMPONENTE PERSONALIZADO 'animation-controller' EN A-FRAME ---
// AFRAME.registerComponent nos permite crear nuevos comportamientos y encapsular lógica.
AFRAME.registerComponent('animation-controller', {

// --- 2. FUNCIÓN 'init': SE EJECUTA UNA SOLA VEZ CUANDO EL COMPONENTE SE INICIALIZA ---
init: function () {
// Muestra un mensaje en la consola para confirmar que el componente ha comenzado.
console.log("Controlador de animación inicializado.");

// 'this.el' se refiere a la entidad donde se adjunta este componente (nuestro modelo de lobo).
this.wolfModel = this.el;

// Creamos un objeto para mapear el índice de cada marcador a su animación correspondiente.
this.animationMap = { 1: 'Hello', 2: 'Pray', 3: 'Walk', 4: 'Run', 5: 'Kick', 6: 'Punch' };

// Creamos un array para guardar las referencias a todas las entidades de los marcadores.
this.markers = [];
// Usamos un bucle para encontrar cada marcador por su ID (marker0, marker1, etc.) y guardarlo.
for (let i = 0; i <= 6; i++) {
this.markers.push(document.querySelector(`#marker${i}`));
}

// Creamos una variable para llevar un registro de la animación que se está reproduciendo actualmente.
this.currentAnimation = null;

// Añadimos un listener que espera al evento 'model-loaded'. Este se dispara cuando el archivo .glb ha terminado de cargar.
this.wolfModel.addEventListener('model-loaded', () => {
console.log("Modelo lobo cargado, iniciando 'Idle'.");
// Una vez cargado el modelo, llamamos a nuestra función para establecer la animación inicial 'Idle'.
this.setAnimation('Idle');
});
},

// --- 3. FUNCIÓN 'tick': SE EJECUTA EN CADA FOTOGRAMA (APROX. 60 VECES POR SEGUNDO) ---
// Este es el corazón de nuestra lógica de verificación continua.
tick: function () {
// Verificación de seguridad: si el marcador principal (índice 0) no existe o no está visible, detenemos la ejecución de esta función.
if (!this.markers[0] || !this.markers[0].object3D.visible) {
return;
}

// Establecemos 'Idle' como la animación por defecto para este fotograma.
let desiredAnimation = 'Idle';

// Revisamos los marcadores "botón" (del 6 al 1) en orden inverso.
// El orden inverso da prioridad al marcador con el índice más alto si hay varios visibles.
for (let i = 6; i >= 1; i--) {
// Si el marcador existe y está visible en este fotograma...
if (this.markers[i] && this.markers[i].object3D.visible) {
// ...la animación deseada pasa a ser la que corresponde a este marcador.
desiredAnimation = this.animationMap[i];
// 'break' detiene el bucle. Ya encontramos el botón activo de mayor prioridad.
break;
}
}

// Optimización: Solo cambiamos la animación si la que queremos es diferente a la que ya se está reproduciendo.
// Esto evita enviar comandos innecesarios al motor de A-Frame 60 veces por segundo.
if (this.currentAnimation !== desiredAnimation) {
this.setAnimation(desiredAnimation);
}
},

// --- 4. FUNCIÓN AUXILIAR 'setAnimation': CAMBIA LA ANIMACIÓN DE FORMA SEGURA ---
setAnimation: function (animationName) {
// Muestra en la consola qué animación se va a activar.
console.log(`Cambiando animación del lobo a: ${animationName}`);

// Usamos setAttribute para decirle al componente 'animation-mixer' que cambie el clip que está reproduciendo.
this.wolfModel.setAttribute('animation-mixer', 'clip', animationName);

// Actualizamos nuestra variable de estado para saber cuál es la nueva animación actual.
this.currentAnimation = animationName;
}
});

¿Por Qué Esta Técnica es Tan Potente?

Crear experiencias de Realidad Aumentada como esta abre un mundo de posibilidades. Imagina catálogos de productos donde puedes ver animaciones de uso, material educativo interactivo, o incluso juegos donde los marcadores físicos controlan la acción en pantalla.

Al dominar la interacción con marcadores múltiples, dejas de crear simples visualizadores de modelos para convertirte en un director de experiencias digitales interactivas. La WebAR democratiza el acceso a la RA, permitiendo que cualquiera con un smartphone pueda sumergirse en los mundos que tú creas, sin necesidad de descargar ninguna aplicación.

Este proyecto es tu punto de partida. ¡Ahora te toca a ti experimentar y llevar tus ideas al siguiente nivel!

Recuerda que si quieres el código fuente que incluye los modelos 3D puedes encontrarlos en la comunidad de Whatsapp: Ingresa aqui.