Mercado Plaza 3D

1
Escena 3D
Three.js dibuja todo con WebGL en un solo <canvas>: una escena, una cámara a 1,55 m de altura y luces.
2
Inventario
Los productos, precios y stock viven en una base de datos compartida (products). La góndola muestra tantas unidades como stock haya; con stock cero, el producto desaparece.
3
Góndolas
Las copias del mismo producto se dibujan juntas con InstancedMesh: miles de productos en pocas llamadas a la GPU.
4
Envases
Si el producto tiene foto, en la góndola se ve la foto misma: al subirla se le quita el fondo y se recorta al borde del producto. Si no tiene foto, el envase se dibuja con canvas 2D a partir de los colores que cargás en el panel.
5
Recorrido y detección
La cámara sigue una curva (CatmullRomCurve3) y un Raycaster detecta qué producto estás mirando.
6
Compra
Al confirmar, se registra el pedido en orders y se descuenta el stock. Todas las pantallas abiertas se actualizan al instante.

Mostrar el recorrido Mostrar el rayo de detección Ver las mallas (alambre)

0unidades en góndola

0llamadas de dibujo

0triángulos

0cuadros por segundo

Armando las góndolas…

Inventario y ventas