Site 3D é um site em que objetos tridimensionais são desenhados em tempo real no navegador e reagem à rolagem, ao mouse ou ao toque. Faz sentido quando o produto ou a marca precisam ser percebidos, não só lidos. Este guia mostra quando contratar, o que pedir e como julgar a entrega.
O que é, exatamente, um site 3D?
Um site 3D não é um vídeo de um objeto girando. É uma cena montada no navegador do visitante, quadro a quadro, com luz, material e câmera calculados pela placa de vídeo do aparelho. Por isso ela reage: gira quando a pessoa rola, muda de cor quando ela escolhe uma opção, aproxima quando ela toca.
Na prática, o 3D raramente é o site inteiro. O formato mais comum em 2026 é um site normal, com texto, botões e formulário, em que uma ou mais cenas tridimensionais fazem o trabalho de chamar atenção e explicar o que palavras não explicam. O nome técnico do conjunto é experiência imersiva web; o nome comercial costuma ser site interativo 3D ou site com animação 3D.
A diferença para um site com animação comum está no custo e no efeito. Uma animação de entrada de texto é barata e passa despercebida. Uma cena 3D bem feita é cara e fica na memória. A pergunta de quem contrata é se a memória paga o custo.
Quais termos você vai ouvir do estúdio?
Ninguém precisa programar para contratar um site 3D. Mas entender oito palavras evita pagar por algo que não pediu ou aceitar algo que não funciona no celular.
| Termo | O que é | Por que importa para quem contrata |
|---|---|---|
| WebGL | Tecnologia dos navegadores que permite desenhar 3D com a placa de vídeo, sem plugin | É a base de quase todo site 3D no ar; funciona em praticamente qualquer aparelho atual |
| WebGPU | Sucessora do WebGL, com acesso mais moderno à placa de vídeo e suporte a cálculo geral | Suportada em Chrome, Edge, Firefox e Safari 26, com lacunas (a MDN ainda não a marca como Baseline); abre espaço para cenas mais ricas, mas pede alternativa em WebGL para aparelhos antigos |
| GLB | Formato binário do glTF, o padrão aberto de modelos 3D para a web | É o arquivo que vai ao ar; o tamanho dele é o primeiro número a cobrar |
| Draco | Biblioteca de compressão de malhas 3D criada pelo Google | Reduz o peso da geometria do modelo; pergunte se o GLB sai comprimido |
| Shader | Pequeno programa que roda na placa de vídeo e define cor, luz e efeito de cada pixel | É onde mora o acabamento "de prêmio" e também onde mora o risco de travar o celular |
| 60 fps | Sessenta quadros por segundo, a fluidez que o olho lê como movimento contínuo | É a meta de fluidez; abaixo dela a cena engasga e o efeito premium vira defeito |
| prefers-reduced-motion | Ajuste do sistema que o visitante liga para pedir menos movimento | Respeitá-lo é exigência de acessibilidade (WCAG 2.3.3) e evita enjoo em quem tem distúrbio vestibular |
| Scrollytelling | Narrativa contada pela rolagem: cada trecho rolado avança a cena | É o formato que transforma o 3D em argumento, e não só em enfeite |
Fontes: definição e suporte do WebGPU nos quatro navegadores, web.dev, novembro de 2025; glTF e GLB, Khronos Group; Draco, Google; prefers-reduced-motion, MDN. Consultadas em outubro de 2026.
Dois detalhes ajudam na conversa. O glTF 2.0 é norma internacional desde 2022 (ISO/IEC 12113:2022, segundo o Khronos Group), então o modelo que você paga não fica preso a um fornecedor. E o prefers-reduced-motion está disponível em todos os navegadores principais desde janeiro de 2020, segundo a documentação da MDN: não há desculpa técnica para ignorá-lo.
Para a escolha das ferramentas por trás disso, o comparativo Three.js, Spline ou React Three Fiber explica o que cada uma entrega.
Quando um site 3D faz sentido?
O 3D paga a conta quando resolve um problema de percepção que foto e texto não resolvem. Fora disso, é custo. Quatro situações costumam justificar o investimento.
Produto físico com forma, material ou variação. Móvel, joia, máquina, embalagem, veículo. Se o cliente precisa girar o produto na cabeça para decidir, girar na tela encurta a decisão. Quando há muitas combinações de cor e acabamento, o caminho é um configurador 3D de produto.
Produto que ainda não existe. Lançamento imobiliário, protótipo, evento. A cena mostra o que a foto ainda não pode mostrar.
Marca que vende percepção de valor. Estúdio, consultoria de alto ticket, tecnologia. Aqui o 3D é a prova de capacidade: o site é a primeira demonstração do padrão de entrega. É a tese do ensaio Percepção não nasce.
Explicação de algo invisível. Processo industrial, software, serviço complexo. Uma cena que se monta durante a rolagem explica em segundos o que um parágrafo leva minutos. Esse é o território do scrollytelling.
E há sinais de que não é a hora. Se o site atual não gera contato, o problema provavelmente está na oferta, na página ou no atendimento, não na falta de 3D. Se o público acessa majoritariamente de celulares antigos e redes ruins, o 3D precisa de uma versão leve muito bem pensada. E se não há verba para manter, a cena envelhece junto com o resto do site.
O que pedir ao estúdio antes de fechar?
Um bom briefing de site 3D tem menos adjetivos e mais números. "Quero algo impactante" não ajuda ninguém a orçar. Estes são os pedidos que separam uma proposta séria de um chute.
Objetivo da cena
Diga o que a cena precisa fazer o visitante entender ou sentir, em uma frase.
Origem do modelo
Informe se há arquivo 3D do produto (CAD, Blender) ou se o estúdio vai modelar do zero.
Metas de performance
Peça por escrito o limite de peso do GLB, a meta de 60 fps e os Core Web Vitals no celular.
Plano para celular
Pergunte o que o visitante vê no celular antes do 3D carregar e se existe versão reduzida.
Movimento reduzido
Exija comportamento definido para quem liga "reduzir movimento" no aparelho.
Conteúdo editável
Combine quais textos e imagens o seu time troca sem pedir ao estúdio.
Critério de aceite
Defina como a entrega será testada: aparelhos, navegadores e medições.
O item de performance é o que mais se perde. O Google considera bom um site com LCP até 2,5 s, INP até 200 ms e CLS até 0,1, medidos no percentil 75 das visitas, segundo o guia dos Core Web Vitals no web.dev (atualizado em outubro de 2024). Colocar esses números no contrato muda a conversa: o estúdio passa a desenhar a cena dentro de um orçamento de peso, e não a cortar depois.
Também vale perguntar como o estúdio trata acessibilidade de movimento. A diretriz WCAG 2.3.3, Animação a partir de interações, de nível AAA, pede que animações disparadas por interação possam ser desligadas, e recomenda respeitar o ajuste de movimento reduzido do sistema. Um estúdio que já resolveu isso responde em uma frase.
Quanto custa um site 3D?
Não existe preço de tabela. O custo depende de quantas cenas, de onde vem o modelo, de quanta interação existe, do cuidado com o celular, do prazo e das integrações. Até estúdios internacionais especializados evitam publicar faixa: em página consultada em outubro de 2026, o desenvolvedor de 3D web por trás do svilenkovic.com explica que o orçamento depende de cena, assets, interações, integrações, conteúdo, dispositivos e prazo, sem tabela fixa.
O que dá para dizer com segurança é a ordem de grandeza relativa. Um herói 3D aplicado a um site existente é o escopo menor. Um site com vários capítulos em 3D multiplica design e teste. Um configurador com variantes de produto é o escopo mais pesado. Na Brave Cross, os sites ficam entre R$ 4 mil e R$ 20 mil, e o 3D sob medida parte do topo dessa faixa, com orçamento sob consulta.
O detalhamento de cada fator, com perguntas frequentes sobre orçamento, está em Quanto custa um site 3D no Brasil.
Como julgar a entrega de um site 3D?
A entrega se julga no celular, não na tela grande do estúdio. Abra o site num aparelho intermediário, com a rede móvel, e observe três momentos: o que aparece no primeiro segundo, se a rolagem engasga quando a cena entra e se o botão de contato está acessível sem esperar o 3D.
Depois, peça os números. Rode o PageSpeed Insights na página e compare com as metas do contrato. Peça o tamanho de cada GLB. Ligue "reduzir movimento" no seu telefone e veja se o site continua utilizável. Se qualquer um desses pontos falhar, a cena ainda não está pronta, por mais bonita que seja.
A home da Brave Cross serve de exemplo de como ler esses números, inclusive o que ainda pode melhorar. Numa medição de laboratório da Brave Cross em outubro de 2026 (Lighthouse, celular emulado), a página transferiu 404 KB no primeiro carregamento, com 30 ms de bloqueio da thread principal e deslocamento de layout zero.
36 KB
peso do modelo 3D do monólito da home (monolith.glb)
repositório da Brave Cross, out/2026
404 KB
tudo o que a home transfere no primeiro carregamento no celular
medição de laboratório da Brave Cross, out/2026
30 ms
tempo total de bloqueio da thread principal
medição de laboratório da Brave Cross, out/2026
4,6 s
LCP medido, acima da meta de 2,5 s, por causa da cortina de abertura encenada
medição de laboratório da Brave Cross, out/2026
A leitura honesta: o peso do 3D não é o problema. Nenhum GLB é baixado no primeiro quadro do celular; o visitante vê um pôster de 9 KB enquanto a cena chega. A cortina de abertura, de cerca de 1,2 s e rodando no compositor, é uma escolha de projeto que adia o LCP de propósito, e é o ponto a revisar. Animações contínuas usam só transform e opacity, e com "reduzir movimento" ligado o site dissolve em vez de congelar. O bastidor completo está em Site 3D pesa?.
Perguntas frequentes
Site 3D deixa o site lento?
Não precisa deixar. O peso vem de modelos grandes, texturas sem compressão e cenas que carregam antes do conteúdo. Com GLB comprimido, 3D carregado depois do primeiro quadro e animações leves, um site com cena 3D pode transferir poucas centenas de KB: a home da Brave Cross transferiu 404 KB numa medição de laboratório em outubro de 2026.
Site 3D funciona no celular?
Funciona, desde que seja projetado para ele. WebGL roda nos celulares atuais e o WebGPU chegou a Chrome, Edge, Firefox e Safari 26 em novembro de 2025, segundo o web.dev. O cuidado está em ter versão reduzida da cena, pôster enquanto ela carrega e comportamento definido para quem ativou "reduzir movimento".
Site 3D é bom para SEO?
O 3D em si não ajuda nem atrapalha o ranqueamento. O que conta é o texto da página continuar no HTML e os Core Web Vitals ficarem dentro da meta (LCP até 2,5 s, INP até 200 ms, CLS até 0,1, segundo o web.dev). Cena que esconde o conteúdo ou atrasa a primeira pintura prejudica; cena carregada depois, não.
Qual a diferença entre site 3D e vídeo 3D no site?
O vídeo é uma gravação: sempre igual, pesado em alta resolução e sem resposta ao visitante. O site 3D desenha a cena em tempo real, então ela reage à rolagem, ao toque e às escolhas. Vídeo resolve vitrine; tempo real resolve explicação, configuração de produto e narrativa por rolagem.
Preciso ter o modelo 3D do meu produto?
Ajuda, mas não é obrigatório. Arquivos de CAD ou Blender economizam modelagem, embora quase sempre precisem ser simplificados para a web. Sem arquivo, o estúdio modela a partir de fotos e medidas. O entregável final deve ser um GLB, formato aberto do padrão glTF, norma ISO/IEC 12113:2022 segundo o Khronos Group.
Próximo passo: transformar o briefing em cena
Um site 3D bom é aquele em que a cena trabalha pelo argumento e o visitante nem percebe a técnica: carrega rápido, funciona no celular, respeita quem pede menos movimento e leva ao contato. O resto é enfeite caro.
A Brave Cross, com mais de 7 anos e mais de 200 projetos, faz 3D em tempo real com three.js e React Three Fiber, narrativa por rolagem e modelos exportados do Blender em GLB com Draco. Veja as soluções, os projetos e os serviços. Se já tem um produto ou uma marca que precisa ser percebida, conte o que precisa e receba um caminho para o seu site 3D.
