Sites 3D: quando valem a pena e como mantê-los rápidos

A resposta curta

Um site 3D vale a pena quando o assunto é espacial ou quando percorrê-lo explica algo que uma imagem não explica: um produto que você quer girar, um lugar, um conjunto de dados, um mundo. Não vale a pena quando só decora uma página que uma foto ou um vídeo curto explicariam igualmente bem. Em qualquer caso, a camada 3D tem um custo real em tamanho de download, bateria e acessibilidade, então construa a página para funcionar sem ela e trate o 3D como um aprimoramento.

Este guia se baseia em dois projetos nossos: o Janus Observatory, uma experiência no navegador com dez mundos 3D, e o dardo.studio, cuja página inicial abre com uma cena 3D em tempo real.

Quando o 3D se justifica

• O visitante precisa ver algo de mais de um ângulo: um produto, um edifício, um equipamento.
• O espaço é a história: um mapa, uma planta do terreno, um percurso por diferentes lugares.
• A interação explica um sistema mais rápido do que o texto, como ao comparar cenários ou explorar dados.
• A experiência da marca é o produto: lançamentos, exposições e campanhas em que a atmosfera importa e os visitantes esperam explorar.

Quando não se justifica

• A cena 3D repete o que um título e uma imagem já dizem.
• A maioria dos visitantes chega por celulares intermediários, com dados móveis, e precisa de uma informação rápida, como um preço, um endereço ou o horário de funcionamento.
• Ninguém na equipe vai manter os modelos, o código e as alternativas depois do lançamento.

3D, vídeo ou imagens?

O WebGL roda em todos os navegadores modernos. O WebGPU é mais novo e mais rápido para alguns trabalhos, mas o suporte ainda varia, então planeje uma alternativa. A entrada 3D do dardo.studio tenta primeiro o WebGPU e recorre ao WebGL 2 quando necessário, enquanto as páginas de serviços, projetos e contato são HTML simples que nunca esperam por uma cena 3D.

O que aprendemos construindo o Janus Observatory

O Janus Observatory transforma dez cenários publicados sobre o futuro da Terra em uma história de 17 capítulos, um atlas e um observatório, com dez mundos low-poly originais e um astrônomo alienígena articulado. Ele roda no plano gratuito do Cloudflare Workers, que limita o tamanho da aplicação. O relatório de versão do projeto, de 27 de setembro de 2026, registra o que foi preciso para mantê-lo rápido:

• Comprima os modelos e mantenha uma alternativa. Os 59 modelos 3D são entregues como variantes em gzip que somam 8,2 MB em vez de 15,8 MB, 47,9% a menos para baixar. Navegadores que não conseguem descompactá-los recebem os arquivos originais.
• Decodifique fora da thread principal e depois pare. A decodificação Meshopt roda em um único worker em segundo plano, que é encerrado após cinco segundos ocioso.
• Defina um orçamento de JavaScript e faça-o valer. O JavaScript inicial da home tem 197.059 bytes comprimidos em gzip, contra um orçamento de 256.000 bytes, e o build verifica isso.
• Cuidado com tempestades de requisições. Um loop de prefetch especulativo na stack Next.js e OpenNext fez 11.704 requisições em um único trace de navegador que falhou. A correção foi desativar o prefetch nesses links, e os testes agora exigem zero requisições especulativas.
• Fixe a resolução em vez de perseguir taxas de quadros. Os canvases renderizam com um device pixel ratio fixo entre 1 e 1,5. O relatório também retirou um número de taxa de quadros publicado antes, que dependia de reduzir a resolução, por isso não citamos nenhum.

Construa para funcionar sem 3D

O Janus tem uma regra que molda todo o resto: a experiência principal precisa funcionar sem WebGL e sem IA. Os dez registros de cenários carregam com o JavaScript desativado, os controles funcionam sem WebGL, e a rotação pelo teclado, o foco visível e o movimento reduzido foram construídos junto com cada recurso. A página de acessibilidade do projeto lista os controles, os equivalentes não visuais e as limitações conhecidas. A meta é o nível AA das WCAG 2.2, verificado com testes automatizados no Chromium, no Firefox e no WebKit.

Essa regra também ajuda a busca e os assistentes de IA: os textos, os nomes e os dados ficam no HTML, não dentro de um canvas.

Um checklist para uma página 3D rápida e acessível

1. Escreva a página sem 3D primeiro. Se a versão em HTML não faz sentido, o 3D não vai resolver.
2. Decida o que o 3D explica e corte tudo o que está ali só para impressionar.
3. Defina orçamentos de JavaScript, peso dos modelos e tamanho das texturas antes de começar a modelagem e confira-os no build.
4. Comprima os modelos com ferramentas como o meshoptimizer, entregue-os no formato glTF e mantenha uma alternativa sem compressão quando depender de recursos mais novos dos navegadores, como o DecompressionStream.
5. Carregue a cena depois do conteúdo, e só quando ela estiver prestes a aparecer na tela.
6. Limite o pixel ratio para que telas de alta densidade não renderizem quatro vezes mais pixels.
7. Respeite o prefers-reduced-motion, dê a cada interação um caminho pelo teclado e coloque um equivalente em texto ao lado de cada canvas.
8. Teste em celulares intermediários reais e em mais de um motor de navegador e, depois do lançamento, acompanhe as Core Web Vitals.

Quanto custa

O 3D acrescenta tempo de modelagem, otimização e testes ao design e ao desenvolvimento, e as alternativas fazem parte do trabalho, não são um extra. Quando o orçamos, ele aparece como a linha "animação sob medida, 3D ou dados interativos" nos fatores de custo que descrevemos no nosso guia sobre quanto custa um site na Colômbia.

Como a Dardo constrói sites 3D

Desenhamos e construímos experiências 3D com o nosso serviço de sites 3D interativos, e trabalhos mais leves de animação e rolagem com desenvolvimento criativo. Para o Hyper, construímos uma história em 3D guiada pela rolagem com React Three Fiber, que transforma sinais dispersos em um único perfil de cliente. Se você tem uma ideia que precisa de espaço para ser entendida, conte para a gente.