3D na web com Three.js: quando vale a pena e como não pesar o site

Experiências 3D no navegador viraram possíveis para qualquer site com Three.js e WebGL. A cena de partículas no topo deste site é um exemplo. Mas 3D tem custo: código, processamento e bateria. Usado sem critério, piora o que deveria melhorar.

Quando vale

• Quando o 3D comunica algo: o produto, a marca, um conceito.
• Em páginas de destaque, não em todas as telas.
• Quando o público acessa com aparelhos capazes — ou quando há uma versão leve para os demais.

Como não pesar o site

1. 1.Carregue o 3D depois do conteúdo: o texto e as imagens principais aparecem primeiro, e a cena chega em seguida (Code splitting por rota no React: carregue só o que a página precisa).
2. 2.Limite a resolução em telas de alta densidade.
3. 3.Reduza a complexidade no celular: menos partículas, menos efeitos.
4. 4.Pause quando não estiver visível ou quando a aba estiver em segundo plano.
5. 5.Use shaders para animar muitos elementos na placa de vídeo.
6. 6.Tenha alternativa quando o aparelho não suporta WebGL.

Acessibilidade e SEO

• Respeite prefers-reduced-motion (prefers-reduced-motion: animação com respeito a quem sente desconforto).
• O conteúdo importante nunca deve estar só dentro do 3D: robôs de busca e leitores de tela não o enxergam.

Medir sempre

Confira o impacto no Core Web Vitals após adicionar a cena (Como otimizar a performance de aplicações React e React Native para passar no Core Web Vitals) e no comportamento do scroll (Scroll suave e animações no scroll sem destruir a performance).

Este site usa uma cena de partículas que muda de forma conforme a página. Veja sites da We Codex ou fale com a gente.