Restaurant en 3D
Models tridimensionals reals, amb el cost de dibuix controlat escena a escena.
Web i interfície · JavaScript · En producció
El problema
Posar 3D en un web és fàcil de fer malament: el resultat habitual pesa, s’arrossega al mòbil i acaba semblant una plantilla. El repte tècnic és integrar models reals sense que la pàgina s’arrossegui: aquí es resol aturant el dibuix de cada escena fora de pantalla i limitant la densitat de píxel.
Què fa
- Integra models GLB reals amb React Three Fiber.
- Animacions en desplaçar i microinteraccions amb GSAP ScrollTrigger.
- Recorregut complet: portada, relat, carta en tres dimensions i contacte.
- Desplegat en producció.
El que es va decidir en construir-lo
- Cada escena clona el model
- El carregador de models desa una sola instància a la memòria cau i la comparteix. Fer servir el mateix model en dos llocs sense clonar-lo deixava una targeta buida i l’altra amb la peça diminuta, perquè l’escala es trepitjava entre totes dues. Cada escena treballa ara sobre la seva pròpia còpia.
- La mida es normalitza mesurant la caixa del model
- Cada model arriba en una escala diferent i alguns porten geometria de més: un plat, una base, una guarnició. Es mesura la caixa que l’envolta, es centra i s’escala a una mida objectiu, o la mateixa targeta ensenya una peça enorme i la del costat una diminuta.
- El bucle de dibuix s’atura fora de pantalla
- Amb quatre escenes a la mateixa pàgina, animar-les totes alhora castiga la bateria i en un equip modest arriba a deixar models sense pintar. Cada llenç s’atura quan surt de l’àrea visible i arrenca poc abans d’entrar-hi. És un estalvi de dibuix, no de descàrrega: els models ja estan baixats.
- Balanceig, no volta completa
- Els models oscil·len suaument al voltant de la seva orientació original en lloc de girar sobre si mateixos. Una volta completa acaba ensenyant la base sense textura o l’interior buit de la peça, que és el moment exacte en què es veu que era un model i no menjar.
Fins on arriba
- Els tres models sumen uns disset megabytes sense comprimir. No hi ha compressió de geometria ni càrrega diferida: el que està optimitzat és el cost de dibuix, no el de descàrrega. En una connexió lenta es nota.
- És un lloc de demostració: carta, preus i xifres del local són inventats, i un dels models està generat per intel·ligència artificial.
- No hi ha reserves, ni cistella, ni formulari que enviï res. El botó de comanda no està connectat a cap sistema.
- Cada escena tridimensional consumeix un context de dibuix del navegador, que els limita: multiplicar les escenes d’aquesta pàgina no escala sense canviar l’enfocament.
Construït amb
- React
- Three.js
- GSAP