Web 3D

Stack: Three.js. Em React: @react-three/fiber + @react-three/drei.

Regras

• Lazy-load da cena 3D; não bloquear LCP com o bundle WebGL.
• Limitar lights, materiais caros e polígonos; preferir instancing quando houver muitos objetos iguais.
• Pause / dispose fora do viewport (IntersectionObserver ou equivalente).
• Fallback 2D (imagem/vídeo estático) se WebGL falhar ou prefers-reduced-motion.
• Controles acessíveis: não dependa só de drag 3D para informação crítica.
• Preserve a arquitetura do app; isole a cena em um boundary de cliente (SSR).

Workflow