Modelos 3D

3D Models

🇬🇧 English first · 🇪🇸 Español más abajo.

Included models

Only the models actually used are bundled (the repo stays light, ~17 MB):

File	Used in	Size
hamburger__food_big-hamburger.glb	La Picante + About	6.3 MB
hamburger__game_asset.glb	La Veggie	3.4 MB
tripo-hamburgers_generated_by_ai.glb	La Clásica	7.1 MB

All in GLB format (binary glTF with embedded textures), downloaded from Sketchfab under Creative Commons licenses.

How to get more models

1. Free Sketchfab account.
2. Search the model → filter by Downloadable + Free.
3. Download in GLB format.
4. Copy it into public/.
5. Reference the path in the component (/my-model.glb).

Other sources: poly.pizza, Fab, Khronos glTF Sample Assets.

Why clone the scene

useGLTF caches and returns a single instance of the model. A Three.js 3D object can only be mounted at one point in the scene graph.

❌ Without cloning: if two cards use the same .glb, they share the object → one stays empty and the scale calculations collide.

✅ With cloning:

const { scene } = useGLTF(path)
const model = useMemo(() => scene.clone(true), [scene])

Each instance gets its own copy → the same model can be reused without conflicts.

Why normalize size

Each model comes at a different scale and sometimes includes extra geometry (a plate, fries, a base). To make all burgers appear the same size:

const box = new THREE.Box3().setFromObject(cloned)
box.getCenter(center); box.getSize(sizeV)
cloned.position.sub(center)                  // center
const maxDim = Math.max(sizeV.x, sizeV.y, sizeV.z)
cloned.scale.setScalar(targetSize / maxDim)  // normalize

⚠️ Watch out: models with a plate/fries/tray make the burger look small, because normalization measures the whole set. Use burger-only models.

---

---

🇪🇸 Modelos 3D

Modelos incluidos

Solo se incluyen los modelos realmente usados (el repo se mantiene ligero, ~17 MB):

Archivo	Uso	Tamaño
hamburger__food_big-hamburger.glb	La Picante + About	6.3 MB
hamburger__game_asset.glb	La Veggie	3.4 MB
tripo-hamburgers_generated_by_ai.glb	La Clásica	7.1 MB

Todos en formato GLB (glTF binario, con texturas embebidas), descargados de Sketchfab bajo licencias Creative Commons.

Cómo conseguir más modelos

1. Cuenta gratuita en Sketchfab.
2. Buscar el modelo → filtrar por Downloadable + Free.
3. Descargar en formato GLB.
4. Copiar a public/.
5. Referenciar la ruta en el componente (/mi-modelo.glb).

Otras fuentes: poly.pizza, Fab, Khronos glTF Sample Assets.

Por qué clonar la escena

useGLTF cachea y devuelve una única instancia del modelo. Un objeto 3D de Three.js solo puede montarse en un punto del grafo de escena.

❌ Sin clonar: si dos tarjetas usan el mismo .glb, comparten el objeto → una queda vacía y los cálculos de escala se pisan.

✅ Con clonar:

const { scene } = useGLTF(path)
const model = useMemo(() => scene.clone(true), [scene])

Cada instancia tiene su propia copia → se puede reutilizar el mismo modelo sin conflictos.

Por qué normalizar el tamaño

Cada modelo viene en una escala distinta y a veces incluye geometría extra (un plato, papas, una base). Para que todas las hamburguesas se vean del mismo tamaño:

const box = new THREE.Box3().setFromObject(cloned)
box.getCenter(center); box.getSize(sizeV)
cloned.position.sub(center)                  // centrar
const maxDim = Math.max(sizeV.x, sizeV.y, sizeV.z)
cloned.scale.setScalar(targetSize / maxDim)  // normalizar

⚠️ Cuidado: modelos con plato/papas/bandeja hacen que la hamburguesa se vea pequeña, porque la normalización mide el conjunto completo. Usar modelos de solo hamburguesa.