Las tarjetas de felicitación tradicionales terminan en un cajón, pero ¿y si pudieras entregar una experiencia mágica que explota en confeti, música y personalización 3D? Hoy vamos a crear una Tarjeta de Cumpleaños Explosiva en Realidad Aumentada.
En este tutorial, aprenderás a construir una WebAR interactiva donde el usuario puede escribir su nombre, elegir un mensaje, seleccionar su tarjeta física favorita y ver cómo cobra vida con un pastel 3D animado y efectos de partículas, todo desde el navegador y sin instalar aplicaciones.
Versión de PATREON – Puedes hacerte miembro desde 1 Dolar al mes:
- Permite seleccionar entre tres imágenes la tarjeta de cumpleaños que servirá como marcador .mind para tu app.
- Archivos fuente de este tutorial que incluyen: index.html con CSS, HTML y JavaScript comentado línea por línea para que aprendas paso a paso como hacer esta WebAR.
- Esta opción es perfecta porque aprenderás como agregar más imágenes para que tus usuarios tengan más opciones de marcadores .mind para tu aplicación de RA.
- Archivo .zip con todos los archivos necesarios para que tu aplicación funcione inmediatamente.
Versión Básica:
- Debes de crear tu propio archivo .mind (Marcador).
- Código base (JavaScript) sin comentar.
- No incluye HTML o CSS.
¿Qué vamos a construir?
Nuestra está construida utilizando MindAR – La aplicación tendrá características avanzadas que la diferencian de un filtro básico:
Interfaz de Personalización (UI): Antes de iniciar la cámara, el usuario puede escribir el nombre del cumpleañero, un mensaje especial y elegir el color del texto 3D.
Selección de Marcador Dinámico: El usuario elige qué imagen física tiene a mano (Tarjeta 1, 2 o 3) y la app se adapta para funcionar solo con esa.
Efectos Nativos: Un sistema de confeti programado en JavaScript puro (sin librerías pesadas) y audio sincronizado.
Gestión de Recursos: Control de inicio manual de la cámara para ahorrar batería y memoria hasta que el usuario esté listo.
El modelo 3D en formato GLB lo descargue desde:Cake (gradient) – Download Free 3D model by AlexanderRuz (@AlexanderRuz) [03e84c4]
Para la versión de PATREON utilice la herramienta oficial de Realidad Aumentada Empezando Desde Cero para hacer el archivo .mind que incluye los tres marcadores. El link de la página web es: Compilador de Marcadores AR | Crea Realidad Aumentada Gratis
Descubre como hacer apps de realidad aumentada paso a paso:Archivo del Blog: Todos los Articulos de WebAR en un Lugar
Expliquemos un poco más.
Para lograr este resultado, hemos implementado tres lógicas clave:
Gestión de Eventos: El código espera a que el usuario pulse «Crear Magia». Esto no es solo estético; es necesario para cumplir con las políticas de los navegadores móviles que bloquean la reproducción de audio si no hay una interacción previa del usuario.
Sistema de Partículas Nativo: En lugar de usar librerías externas que a veces fallan o quedan obsoletas, hemos creado una función lanzarConfeti() en JavaScript puro. Esta función genera pequeños planos de colores (a-plane), les asigna una trayectoria aleatoria y los destruye después de 2 segundos para no saturar la memoria del teléfono.
Animaciones CSS y A-Frame: Combinamos animaciones de interfaz (el botón pulsando) con animaciones 3D (el pastel creciendo con efecto elástico) para crear una experiencia pulida y profesional.
Únete a la Comunidad WhatsApp de Realidad Aumentada
Pasemos al código Javascript.
<script>
document.addEventListener("DOMContentLoaded", function() {
const startButton = document.querySelector("#start-button");
const overlay = document.querySelector("#overlay");
const inputName = document.querySelector("#input-name");
const inputMsg = document.querySelector("#input-msg");
const inputColor = document.querySelector("#input-color");
const cardEntity = document.querySelector('#target-card');
const cake = document.querySelector('#cake-model-entity');
const music = document.querySelector('#bg-music');
const confettiContainer = document.querySelector('#confetti-container');
const text3D = document.querySelector('#birthday-text');
let audioEnabled = false;
let confettiInterval = null;
startButton.addEventListener('click', () => {
const name = inputName.value.trim() || "AMIG@";
const msg = inputMsg.value.trim() || "¡PIDE UN DESEO!";
const color = inputColor.value;
text3D.setAttribute('value', `FELIZ CUMPLE\n${name.toUpperCase()}!\n\n${msg}`);
text3D.setAttribute('color', color);
overlay.style.display = 'none';
audioEnabled = true;
if(music) {
music.play().then(() => {
music.pause();
music.currentTime = 0;
}).catch(e => console.log("Esperando interacción para audio..."));
}
});
cardEntity.addEventListener("targetFound", event => {
console.log("¡Tarjeta encontrada!");
if (confettiInterval) clearInterval(confettiInterval);
confettiInterval = setInterval(lanzarConfeti, 400);
lanzarConfeti();
if (audioEnabled && music) music.play();
cake.setAttribute('visible', true);
cake.setAttribute('animation', {
property: 'scale',
from: '0.01 0.01 0.01',
to: '4 4 4',
dur: 1200,
easing: 'easeOutElastic',
loop: false
});
});
cardEntity.addEventListener("targetLost", event => {
console.log("Target perdido...");
if (confettiInterval) clearInterval(confettiInterval);
if (audioEnabled && music) {
music.pause();
music.currentTime = 0;
}
confettiContainer.innerHTML = '';
cake.removeAttribute('animation');
cake.setAttribute('scale', '0.01 0.01 0.01');
});
const lanzarConfeti = () => {
const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF'];
for (let i = 0; i < 30; i++) {
const confetti = document.createElement('a-plane');
confetti.setAttribute('material', 'shader: flat; side: double');
confetti.setAttribute('width', '0.05');
confetti.setAttribute('height', '0.08');
confetti.setAttribute('color', colors[Math.floor(Math.random() * colors.length)]);
const x = (Math.random() - 0.5) * 0.5;
const y = 0.5;
const z = (Math.random() - 0.5) * 0.5;
confetti.setAttribute('position', `${x} ${y} ${z}`);
const destX = x * 10;
const destY = 2 + Math.random();
const destZ = z * 10;
confetti.setAttribute('animation', {
property: 'position',
to: `${destX} ${destY} ${destZ}`,
dur: 2000,
easing: 'easeOutQuad'
});
confetti.setAttribute('animation__rot', {
property: 'rotation',
to: `${Math.random()*1000} ${Math.random()*1000} 0`,
dur: 2000,
easing: 'linear'
});
setTimeout(() => {
if(confetti.parentNode) confetti.parentNode.removeChild(confetti);
}, 2000);
confettiContainer.appendChild(confetti);
}
};
});
</script>Al finalizar tu app de tarjetas para cumpleaños en realidad aumentada debería de verse así:
Ahora pasemos a la versión de PATREON.
