Tutorial de cómo crear una pantalla de carga (Loading) y efecto de partículas en las aplicaciones de realidad aumentada
En este artículo, desglosaremos un código fascinante que no solo te introduce al mundo de la Realidad Aumentada Web (WebAR), sino que también te enseña a implementar una pantalla de carga épica y efecto de partículas flotantes que dejará a tus usuarios asombrados.
La importancia de la Realidad Aumentada radica en su capacidad para ofrecer experiencias interactivas y memorables. No es solo una «tecnología cool»; es una herramienta poderosa para:
- Engagement del usuario: Capta la atención de tu audiencia de una manera única.
- Marketing innovador: Crea campañas publicitarias que se destaquen.
- Educación y formación: Ofrece contenido interactivo y práctico.
- Comercio electrónico: Permite a los clientes «probar» productos antes de comprar.
Con WebAR, la barrera de entrada se reduce significativamente, ya que los usuarios no necesitan descargar aplicaciones. ¡Todo sucede directamente en su navegador!
Cómo Crear Realidad Aumentada en Segundos: La Magia de A-Frame y MindAR
El código que te comparto el día de hoy te muestra cómo hacer Realidad Aumentada en segundos utilizando dos librerías JavaScript increíbles: A-Frame y MindAR.
A-Frame: Es un framework web para construir experiencias de Realidad Virtual (VR) y Realidad Aumentada (AR) en el navegador. Con su sintaxis declarativa, es increíblemente fácil crear escenas 3D sin ser un experto en gráficos por computadora. Piensa en ello como HTML para 3D.
MindAR: Esta librería se encarga de la parte de visión por computadora, permitiendo que tu cámara detecte «marcadores» o «imágenes objetivo» en el mundo real y superponga contenido digital sobre ellos. ¡Es la clave para tu RA web!
Más Allá de la RA: Una Pantalla de Carga que Cautiva (¡con Partículas Doradas!)
Uno de los elementos de este código es la implementación de una pantalla de carga personalizada y visualmente impactante. Olvídate de las aburridoras pantallas; aquí vemos un diseño que se «divide» y revela tu experiencia de RA con un toque cinematográfico. Además, incorpora un efecto de partículas doradas flotantes.
Este elemento es crucial para la experiencia de usuario (UX). Una pantalla de carga bien diseñada mantiene al usuario comprometido y le da una primera impresión profesional de tu aplicación de RA.
Mira la aplicación de realidad aumentada funcionando:
¿Te gustaría tener toda esta app en un solo archivo HTML? Agrégate a la comunidad en WhatsApp de Realidad Aumentada Empezando Desde Cero. Aquí te dejo el link: COMUNIDAD
La Base de Todo: La Importancia de Aprender HTML, CSS y JavaScript para Crear WebAR
Si bien A-Frame y MindAR simplifican mucho el proceso, este ejemplo resalta la importancia de aprender HTML, CSS y JavaScript para crear WebAR.
HTML: Es la estructura. Define la escena de A-Frame, los contenedores para la pantalla de carga y las etiquetas de los modelos 3D.
CSS: Es el estilo y la animación. Desde el diseño de la pantalla de carga que se divide (usando transform y transition) hasta la creación de las animaciones de las partículas doradas (@keyframes), CSS es fundamental para la estética y fluidez de la interfaz.
JavaScript: Es la lógica. Controla cuándo la pantalla de carga se oculta, cuándo se inician las animaciones y cómo se interactúa con la escena de RA. En este código, JavaScript maneja los eventos de carga de la escena y las animaciones de la pantalla de carga y las partículas.
Dominar estos tres pilares de la web te dará la libertad de personalizar y extender tus proyectos de Realidad Aumentada de formas ilimitadas.
Comencemos con el código HTML:
<!DOCTYPE html> <html> <head> <title>AR con Pantalla de Carga Épica</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <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://unpkg.com/aframe-asset-on-demand-component@1.0.0/dist/aframe-asset-on-demand-component.min.js"></script> </head> <body> <div id="arContainer"> <div id="golden-flashes-container"></div> <div id="loadingScreen"> <div id="loadingLeft" class="loading-half"></div> <div id="loadingRight" class="loading-half"></div> </div> <a-scene id="myARScene" mindar-image="imageTargetSrc: ./targets.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights: true" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false" loading-screen="enabled: false"> <a-assets> <a-asset-item id="myModel" src="./WonderWoman.glb"></a-asset-item> </a-assets> <a-camera position="0 0 0" look-controls="enabled: false"></a-camera> <a-entity mindar-image-target="targetIndex: 0"> <a-gltf-model rotation="0 0 0" position="0 -1 0" src="#myModel"></a-gltf-model> </a-entity> </a-scene> </div> </body> </html>
La explicación más sencilla de este HTML es la siguiente:
- Todo archivo .html debe de tener en su inicio una etiqueta <!DOCTYPE html>, <html> y <head>. Es de vital importancia cerrar estas etiquetas con la lineas </html>, </head>
- Un ejemplo más claro seria esta etiqueta <title>AR con Pantalla de Carga Épica</title>
- <meta name=»viewport» content=»width=device-width, initial-scale=1.0, user-scalable=no»> Permite que mi app se adapte a diferentes pantallas de dispositivos.
- <script>: Nos permiten hacer una llamado a la librerías que vamos a utilizar en nuestra aplicación.
- En las siguientes líneas de código hacemos llamados a nuestros CSS.
- Luego lo que hacemos es que empezamos a hacer un llamo a nuestro modelo 3D – src=»./WonderWoman.glb» y lo enlazamos a nuestro marcador además de darle rotación y posición con relación a nuestro archivo .targets.mind
El modelo 3D fue descargado de la comunidad de sketchfab: Wonder Woman – DC – Download Free 3D model by Chechorams16 (@Chechorams16) [40cc3dc]
Pasemos al CSS, en esta seccion lo que realizamos es el efecto de carga y las particulas que aparecen en pantalla en nuestra app WebAR:
<style>
/* Estilos CSS */
body {
margin: 0;
overflow: hidden;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
}
/* Contenedor principal que abarca toda la pantalla para gestionar las capas */
#arContainer {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
/* Estilos de la pantalla de carga */
#loadingScreen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
overflow: hidden;
z-index: 1000; /* Alto z-index para la pantalla de carga inicial */
background-color: #000;
transition: opacity 1s ease-out;
}
.loading-half {
width: 50%;
height: 100%;
background-image: url('./WonderWoman.webp'); /* Ruta de la imagen de carga */
background-repeat: no-repeat;
background-color: #000;
background-size: contain;
background-position: center;
transition: transform 4s ease-in-out, opacity 4s ease-in-out;
position: relative;
}
#loadingLeft {
background-position: left center;
transform: translateX(0);
}
#loadingRight {
background-position: right center;
transform: translateX(0);
}
#loadingLeft.split {
transform: translateX(-100%);
}
#loadingRight.split {
transform: translateX(100%);
}
#loadingScreen.fade-out {
opacity: 0;
}
/* Estilos para el contenedor de los flashes dorados (partículas HTML/CSS) */
#golden-flashes-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* Crucial: permite que los clics pasen a la escena AR debajo */
opacity: 1; /* Inicialmente opaco para que se vea desde el principio */
transition: opacity 0.5s ease-in-out;
z-index: 1001;
}
#golden-flashes-container.active {
opacity: 1; /* Aseguramos que se mantenga visible */
}
.flash-particle {
position: absolute;
background-color: gold;
border-radius: 50%;
animation: flash-move 2s ease-out forwards;
opacity: 0;
}
@keyframes flash-move {
0% {
transform: translate(var(--start-x), var(--start-y)) scale(0);
opacity: 0;
}
20% {
opacity: 1;
}
100% {
transform: translate(var(--end-x), var(--end-y)) scale(1.5);
opacity: 0;
}
}
/* Estilo para el lienzo de A-Frame para asegurar su posición y z-index */
#myARScene {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1; /* Colócalo por debajo del contenedor de flashes (z-index: 1001) */
}
</style>
Ahora miremos lo más importante, el código JavaScript.
<script>
document.addEventListener('DOMContentLoaded', function() {
const sceneEl = document.querySelector('a-scene');
const loadingScreen = document.getElementById('loadingScreen');
const loadingLeft = document.getElementById('loadingLeft');
const loadingRight = document.getElementById('loadingRight');
const flashesContainer = document.getElementById('golden-flashes-container');
// Este intervalo creará flashes indefinidamente desde el principio
let flashInterval = setInterval(() => {
createFlash();
}, 100); // Ajusta la velocidad de creación de flashes aquí (cada 100ms)
function createFlash() {
const flash = document.createElement('div');
flash.classList.add('flash-particle');
const startX = Math.random() * window.innerWidth;
const startY = Math.random() * window.innerHeight;
const endX = startX + (Math.random() - 0.5) * 400;
const endY = startY + (Math.random() - 0.5) * 400;
const size = Math.random() * 20 + 10;
flash.style.setProperty('--start-x', `${startX}px`);
flash.style.setProperty('--start-y', `${startY}px`);
flash.style.setProperty('--end-x', `${endX}px`);
flash.style.setProperty('--end-y', `${endY}px`);
flash.style.width = `${size}px`;
flash.style.height = `${size}px`;
flashesContainer.appendChild(flash);
}
sceneEl.addEventListener('loaded', function () {
console.log('A-Frame scene and assets loaded! Initiating reveal animation...');
setTimeout(() => {
loadingLeft.classList.add('split');
loadingRight.classList.add('split');
loadingLeft.addEventListener('transitionend', function() {
console.log('Loading screen animation complete. Hiding initial loading elements.');
loadingScreen.classList.add('fade-out');
loadingScreen.addEventListener('transitionend', function() {
// Opcional: Remover el loadingScreen completamente del DOM después de que se desvanezca
loadingScreen.remove();
}, { once: true });
}, { once: true });
}, 500);
});
sceneEl.addEventListener('asset-load-error', function(e) {
console.error('Error cargando asset:', e.detail.src);
loadingScreen.classList.add('fade-out');
loadingScreen.addEventListener('transitionend', function() {
loadingScreen.remove();
}, { once: true });
});
});
</script>
¡Listo! Si agregamos todos estos elementos (HTML, CSS y JavaScript) a nuestro archivo index.html y lo compilamos tendremos nuestra app de realidad aumentada funcionando.
- ¿No sabes cómo hacerlo?
- Te recomiendo este post para que des tus primeros pasos en el mundo de la realidad aumentada: Aprende Realidad Aumentada Desde Cero: Guia para empezar |
Esta serie de short y tutoriales también te puede ayudar: Apps de Realidad Aumentada desde Cero (HTML, CSS, JS).