La Gastronomía Encuentra la Tecnología con MindAR para Realidad Aumentada
El menú de papel tradicional tiene un problema grave: la imaginación del cliente no siempre coincide con la realidad del plato.
¿Cuántas veces has dudado en pedir algo porque no sabías qué tamaño tenía o qué pinta tenía?
La Realidad Aumentada Web (WebAR) está transformando la industria gastronómica. Al permitir que los clientes visualicen el plato en 3D sobre su mesa antes de ordenar, eliminamos la incertidumbre y aumentamos el apetito (y el ticket promedio).
En este artículo, desglosaremos cómo construimos un «Smart Menu» interactivo que combina una interfaz de usuario moderna con modelos 3D ultrarrealistas.
El Proyecto: Un Menú Híbrido
A diferencia de las experiencias AR básicas que abren la cámara inmediatamente, nuestra aplicación ofrece un flujo de usuario (UX) mucho más pulido:
- Selección Previa: El usuario navega por un menú visual estilo app de delivery.
- Carga Eficiente: Solo cargamos el modelo 3D del plato que al usuario le interesa.
- Visualización AR: Al apuntar al marcador, el plato aparece flotando.
- Conversión: Un botón integrado conecta directamente con WhatsApp para realizar el pedido.
Tecnologías Utilizadas para desarrollar esta aplicacion de realidad aumentada WebAR con MindAR
Para este desarrollo hemos utilizado un stack tecnológico ligero y potente que funciona directamente en el navegador (sin instalar Apps).
Te recomiendo este articulo donde aprenderás a crear apps WebAR de realidad aumentada sin tener que visitar la AppStore o PlayStore: WebAR y PWA: El Dúo para la Realidad Aumentada del Futuro.
continuemos con las tecnologias utilizadas:
- HTML5 y CSS3 Moderno: Para crear la interfaz de selección («Grid» de tarjetas) y los paneles flotantes. Utilizamos fuentes de Google Fonts (Poppins) y diseños responsivos para que se vea bien en cualquier móvil.
- A-Frame (v1.4.2): Nuestro motor de renderizado 3D. Nos permite manejar luces, sombras, modelos GLB y animaciones con etiquetas HTML sencillas.
- MindAR (v1.2.5): El motor de visión por computadora. Es el encargado de reconocer la imagen del menú físico y «anclar» el contenido digital a él.
Análisis del Código: ¿Cómo Funciona?
Te comparto el corazon de la aplicacion (JavaScript).
<script>
document.addEventListener("DOMContentLoaded", function() {
const menuScreen = document.querySelector("#menu-screen");
const uiPanel = document.querySelector('#ui-panel');
const orderBtn = document.querySelector('#btn-order');
const burgerEntity = document.querySelector('#burger-entity');
const titleText = document.querySelector('#ui-title');
const priceText = document.querySelector('#ui-price');
const descText = document.querySelector('#ui-desc');
const scene = document.querySelector('a-scene');
let currentProduct = null;
const products = [
{
file: '3.glb',
name: 'Classic Angus',
price: '$12.99',
desc: 'La clásica de la casa. 200g de carne Angus, lechuga fresca, tomate orgánico y nuestra salsa secreta.',
scale: '2 2 2',
img: 'Captura de pantalla 2026-01-09 181402.jpg'
},
{
file: '2.glb',
name: 'Cheese Lover',
price: '$14.50',
desc: 'Explosión de queso. Doble carne, queso cheddar fundido, queso suizo y bacon crujiente.',
scale: '0.05 0.05 0.05',
img: 'Captura de pantalla 2026-01-09 181419.jpg'
},
{
file: '1.glb',
name: 'Spicy Chicken',
price: '$11.00',
desc: 'Para valientes. Pollo frito extra crujiente bañado en salsa de habanero y jalapeños.',
scale: '2 2 2',
img: 'Captura de pantalla 2026-01-09 181455.jpg'
},
{
file: '4.glb',
name: 'Veggie Delight',
price: '$13.50',
desc: '100% Plant-based. Medallón de lentejas y quinoa, aguacate fresco y pan integral.',
scale: '0.5 0.5 0.5',
img: '4.png'
}
];
window.selectProduct = (index) => {
currentProduct = products[index];
burgerEntity.removeAttribute('gltf-model');
burgerEntity.setAttribute('gltf-model', currentProduct.file);
burgerEntity.setAttribute('scale', '0 0 0');
titleText.innerText = currentProduct.name;
priceText.innerText = currentProduct.price;
descText.innerText = currentProduct.desc;
menuScreen.classList.add('hidden');
setTimeout(() => {
scene.systems['mindar-image-system'].start();
}, 500);
};
const target = document.querySelector('#target-burger');
target.addEventListener("targetFound", event => {
console.log("¡Plato detectado!");
uiPanel.classList.add('visible');
if (currentProduct) {
burgerEntity.setAttribute('animation', {
property: 'scale',
from: '0 0 0',
to: currentProduct.scale,
dur: 800,
easing: 'easeOutElastic'
});
}
});
target.addEventListener("targetLost", event => {
console.log("Perdido...");
uiPanel.classList.remove('visible');
burgerEntity.removeAttribute('animation');
burgerEntity.setAttribute('scale', '0 0 0');
});
orderBtn.addEventListener("click", () => {
if (!currentProduct) return;
const mensaje = `Hola! Quiero pedir la *${currentProduct.name}* (${currentProduct.price}) que vi en la App AR 🍔`;
const url = `https://wa.me/?text=${encodeURIComponent(mensaje)}`;
window.open(url, '_blank');
});
document.querySelector('#btn-back').addEventListener('click', () => {
location.reload();
});
});
</script>Preparación (El Menú)
- Guarda una lista interna con todas tus hamburguesas (modelos 3D, precios, nombres).
- Espera a que el usuario elija una.
La Transición (El Cambio a AR)
Cuando el usuario elige una hamburguesa:
- Carga el modelo 3D específico de esa hamburguesa.
- Oculta el menú de la pantalla.
- Enciende la cámara para empezar a buscar el objetivo (target).
La Acción (Realidad Aumentada y Venta)
- Si la cámara ve el target: Muestra la hamburguesa 3D (con una animación de rebote) y el panel de precio.
- Si la cámara pierde el target: Oculta todo para limpiar la pantalla.
- Si tocan «Ordenar»: Abre WhatsApp automáticamente con el pedido redactado listo para enviar.
¿Quieres una explicación más detallada del código? En mi PATREON te explico línea por línea de todo el código que incluye: HTML, CSS, JAVASCRIPT, modelos 3D, imágenes, archivo index.html y Targets.mind. Te recomiendo seguirme en mi patreon donde puedes agregarte desde 1 Dolar al mes. Gracias por apoyar mi trabajo.
Te dejo el link: Realidad Aumentada Empezando Desde Cero – Ingcarlosreina | Tutoriales de Realidad Aumentada – Augmented Reality Tutorials | Patreon
Sigamos con todo lo que ofrece la aplicación WebAR con MindAR y A-Frame.
Gestión de Energía y Memoria
Una cámara de AR consume mucha batería. Por eso, en nuestra etiqueta <a-scene>, hemos configurado autoStart: false.
El sistema MindAR no arranca hasta que el usuario selecciona un plato y ejecutamos scene.systems[‘mindar-image-system’].start(). Esto garantiza que la experiencia sea fluida y respete el dispositivo del usuario.
Inyección Dinámica de Modelos
Cuando el usuario hace clic en una tarjeta del menú, la función selectProduct(index) inicia la experiencia de realidad aumentada:
- Oculta la interfaz 2D.
- Busca la entidad 3D en la escena (#burger-entity).
- Reemplaza el atributo gltf-model con el archivo .glb correspondiente.
- Aplica la escala específica para ese modelo (ya que no todos los modelos 3D tienen el mismo tamaño).
Interfaz Flotante y WhatsApp
Cuando MindAR detecta la imagen (targetFound), mostramos un panel HTML (#ui-panel) sobre la cámara usando CSS. Este panel contiene un botón programado para abrir la API de WhatsApp con un mensaje pre-rellenado:
const mensaje = `Hola! Quiero pedir la *${currentProduct.name}*...`;
window.open(`https://wa.me/?text=${encodeURIComponent(mensaje)}`, '_blank');Este será el resultado de tu aplicación de realidad aumentada para mostrar menús interactivos usando MindAR:
Para terminar el tutorial podríamos decir que: Crear experiencias de Realidad Aumentada para restaurantes ya no requiere presupuestos millonarios ni aplicaciones nativas. Con herramientas web como MindAR y A-Frame, puedes ofrecer soluciones innovadoras que mejoran la experiencia del comensal y modernizan cualquier negocio de hostelería.
¿Listo para digitalizar tu menú? Copia el código del tutorial, sube tus fotos y modelos, ¡y empieza a vender en 3D!