Restaurante en 3D
Modelos tridimensionales reales, con el coste de dibujo controlado escena a escena.
Web e interfaz · JavaScript · En producción
El problema
Meter 3D en una web es fácil de hacer mal: el resultado habitual pesa, se arrastra en el móvil y acaba pareciendo una plantilla. El reto técnico es integrar modelos reales sin que la página se arrastre: aquí se resuelve parando el dibujo de cada escena fuera de pantalla y limitando la densidad de píxel.
Qué hace
- Integra modelos GLB reales con React Three Fiber.
- Animaciones al desplazar y microinteracciones con GSAP ScrollTrigger.
- Recorrido completo: portada, relato, carta en tres dimensiones y contacto.
- Desplegado en producción.
Lo que se decidió al construirlo
- Cada escena clona el modelo
- El cargador de modelos guarda una sola instancia en caché y la comparte. Usar el mismo modelo en dos sitios sin clonarlo dejaba una tarjeta vacía y la otra con la pieza diminuta, porque la escala se pisaba entre las dos. Cada escena trabaja ahora sobre su propia copia.
- El tamaño se normaliza midiendo la caja del modelo
- Cada modelo llega en una escala distinta y algunos traen geometría de más: un plato, una base, una guarnición. Se mide la caja que lo envuelve, se centra y se escala a un tamaño objetivo, o la misma tarjeta enseña una pieza enorme y la de al lado una diminuta.
- El bucle de dibujo se para fuera de la pantalla
- Con cuatro escenas en la misma página, animarlas todas a la vez castiga la batería y en un equipo modesto llega a dejar modelos sin pintar. Cada lienzo se para cuando sale del área visible y arranca poco antes de entrar. Es un ahorro de dibujo, no de descarga: los modelos ya están bajados.
- Balanceo, no vuelta completa
- Los modelos oscilan suavemente alrededor de su orientación original en lugar de girar sobre sí mismos. Una vuelta completa acaba enseñando la base sin texturar o el interior hueco de la pieza, que es el momento exacto en que se ve que era un modelo y no comida.
Hasta dónde llega
- Los tres modelos suman unos diecisiete megabytes sin comprimir. No hay compresión de geometría ni carga diferida: lo que está optimizado es el coste de dibujo, no el de descarga. En una conexión lenta se nota.
- Es un sitio de demostración: carta, precios y cifras del local son inventados, y uno de los modelos está generado por inteligencia artificial.
- No hay reservas, ni carrito, ni formulario que envíe nada. El botón de pedido no está conectado a ningún sistema.
- Cada escena tridimensional consume un contexto de dibujo del navegador, que los limita: multiplicar las escenas de esta página no escala sin cambiar el enfoque.
Construido con
- React
- Three.js
- GSAP