Un elemento 3D bien hecho puede ser lo más memorable de un sitio. Mal hecho, es lo que hace que cierren la pestaña. La diferencia no está en el talento artístico sino en el presupuesto: cuánto pesa, cuándo se carga y cuándo deja de dibujar.
1. Carga diferida y solo donde corresponde
Three.js y React Three Fiber suman un peso considerable. No deben formar parte del paquete inicial. Con next/dynamic se importan solo cuando hacen falta, y únicamente en dispositivos donde tiene sentido.
import dynamic from "next/dynamic";
const LayerStack = dynamic(() => import("./LayerStack"), { ssr: false });Antes de montar la escena, comprobamos tres cosas: puntero fino, sin movimiento reducido y soporte de WebGL. En cualquier otro caso se muestra una alternativa estática o con CSS 3D.
2. Dibuja solo cuando alguien mira
Un bucle de render consume GPU aunque la escena esté fuera de pantalla. Con un IntersectionObserver se pausa el bucle cuando el canvas no es visible.
<Canvas frameloop={visible ? "always" : "never"} />En escenas sin animación continua, frameloop="demand" renderiza solo cuando algo cambia.
3. Limita la densidad de píxeles
Un monitor 4K con DPR 3 multiplica por nueve el trabajo de la GPU. Para un fondo decorativo, un límite de [1, 1.75] es casi indistinguible y mucho más barato.
<Canvas dpr={[1, 1.75]} />4. Geometrías y materiales simples
Una escena con pocas docenas de polígonos, materiales estándar y luces básicas se ve limpia y corre bien en equipos modestos. Evita transmisión, sombras suaves y entornos HDR externos salvo que aporten algo que justifique su costo.
5. Mide y fija un presupuesto
Define metas antes de empezar y verifícalas en cada cambio:
| Métrica | Meta |
|---|---|
| JavaScript inicial (sin 3D) | menos de 180 kB comprimido |
| LCP | menos de 2,2 s |
| CLS | menos de 0,05 |
| INP | menos de 200 ms |
La escena 3D se mide aparte: su carga no debe bloquear el primer contenido, y su ausencia no debe romper el diseño.
El principio
El 3D es una mejora progresiva. El sitio debe verse completo, útil y rápido sin él. Con él, debe sentirse un poco más especial. Si es al revés, el presupuesto está mal planteado.