--- title: "Sites 3D: quando valem a pena e como deixá-los rápidos" description: "Quando um site 3D vale a pena, 3D x vídeo x imagens e o que aprendemos mantendo rápidos e usáveis sem WebGL os dez mundos 3D do Janus Observatory." url: "https://dardo.studio/pt/blog/sites-3d/" language: "pt" translations: {"en":"https://dardo.studio/en/blog/3d-websites/","es":"https://dardo.studio/es/blog/paginas-web-3d/","fr":"https://dardo.studio/fr/blog/sites-web-3d/","de":"https://dardo.studio/de/blog/3d-website/","it":"https://dardo.studio/it/blog/siti-web-3d/","nl":"https://dardo.studio/nl/blog/3d-websites/","sv":"https://dardo.studio/sv/blogg/3d-webbplatser/","pl":"https://dardo.studio/pl/blog/strony-internetowe-3d/","uk":"https://dardo.studio/uk/blog/3d-websites/","ru":"https://dardo.studio/ru/blog/3d-websites/","ar":"https://dardo.studio/ar/blog/3d-websites/","hi":"https://dardo.studio/hi/blog/3d-websites/","th":"https://dardo.studio/th/blog/3d-websites/","ja":"https://dardo.studio/ja/blog/3d-websites/","ko":"https://dardo.studio/ko/blog/3d-websites/","zh-Hans":"https://dardo.studio/zh-Hans/blog/3d-websites/","zh-Hant":"https://dardo.studio/zh-Hant/blog/3d-websites/"} updated: "2026-10-13T00:59:48.470Z" --- [Blog](https://dardo.studio/pt/blog/) # Sites 3D: quando valem a pena e como mantê-los rápidos Quando um site 3D vale a pena, quando vídeo ou imagens funcionam melhor e como mantivemos rápidos, acessíveis e usáveis os dez mundos 3D do Janus Observatory. Por [Nicolás Cerón](https://dardo.studio/pt/estudio/) ·12 de outubro de 2026 ![O interior de um planetário antigo à noite: um projetor de estrelas de latão lança pontos de luz âmbar sobre uma cúpula azul-marinho, e um pequeno planeta facetado carmesim paira acima dele.](https://dardo.studio/_astro/01M4S57YNVSKTAW62QJ0T2N659_Z2oYIIr.webp) ## Pontos-chave - O 3D vale a pena quando o assunto é espacial ou quando explorá-lo explica algo que uma imagem não explica; caso contrário, imagens ou vídeo costumam funcionar melhor. - Construa a página para funcionar sem WebGL e trate a camada 3D como um aprimoramento; isso também mantém textos e dados legíveis para os mecanismos de busca. - No Janus Observatory, variantes em gzip reduziram a transferência de 59 modelos 3D de 15,8 MB para 8,2 MB, com os originais mantidos como alternativa. - Defina orçamentos de JavaScript e de peso dos modelos antes de modelar e confira-os a cada nova versão. - Limite o pixel ratio, respeite o movimento reduzido, dê a cada interação um caminho pelo teclado e teste em celulares intermediários reais. ## 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](https://dardo.studio/pt/projetos/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? | Opção | Bom para | Atenção a | | ------------------------------------ | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------- | | 3D em tempo real com WebGL ou WebGPU | Explorar, girar, comparar, reagir às ações do usuário | Peso dos modelos e do código, carga na GPU, trabalho de acessibilidade, testes em navegadores | | Vídeo | Mostrar uma sequência ou uma atmosfera sempre do mesmo jeito | Tamanho do arquivo, regras de reprodução automática, legendas, nenhuma interação | | Imagens ou uma animação curta | Explicar uma coisa rapidamente | Menos memorável; não pode ser explorado | O [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL%5FAPI) roda em todos os navegadores modernos. O [WebGPU](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU%5FAPI) é 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](https://janus-observatory.nicocerond.workers.dev/accessibility) 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](https://www.w3.org/TR/WCAG22/), 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](https://meshoptimizer.org/), entregue-os no formato [glTF](https://www.khronos.org/gltf/) e mantenha uma alternativa sem compressão quando depender de recursos mais novos dos navegadores, como o [DecompressionStream](https://developer.mozilla.org/en-US/docs/Web/API/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**](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/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](https://web.dev/articles/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](https://dardo.studio/pt/blog/quanto-custa-um-site-colombia/). ## Como a Dardo constrói sites 3D Desenhamos e construímos experiências 3D com o nosso serviço de [sites 3D interativos](https://dardo.studio/pt/servicos/sites-3d-interativos/), e trabalhos mais leves de animação e rolagem com [desenvolvimento criativo](https://dardo.studio/pt/servicos/desenvolvimento-criativo/). Para o [Hyper](https://dardo.studio/pt/projetos/hyper-estudo-de-caso-web-design/), 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](https://dardo.studio/pt/contato/?service=interactive-3d-websites). ## Perguntas frequentes **Sites 3D prejudicam o SEO?** Não, se o conteúdo estiver no HTML. Os mecanismos de busca leem texto, links e dados estruturados, não o que é desenhado dentro de um canvas, então coloque nomes, descrições e dados na página e use a cena 3D para enriquecê-los. **Sites 3D funcionam no celular?** Podem funcionar, com orçamentos para o tamanho dos modelos e para o JavaScript, um pixel ratio limitado e testes em celulares intermediários reais. Ofereça sempre uma versão que funcione sem WebGL. **Devo usar WebGL ou WebGPU?** O WebGL roda em todos os navegadores modernos. O WebGPU é mais novo e pode ser mais rápido, mas o suporte ainda varia; se usá-lo, planeje uma alternativa em WebGL, como faz a página inicial do dardo.studio. **Um site 3D é acessível?** Pode ser, se a acessibilidade for construída junto com cada recurso: controles por teclado, foco visível, movimento reduzido e um equivalente em texto ao lado de cada canvas. O Janus Observatory tem como meta o nível AA das WCAG 2.2. ## Fontes e leituras adicionais Fontes desta página, com mais detalhes dos publicadores originais. - [Janus Observatory: acessibilidade (em inglês)](https://janus-observatory.nicocerond.workers.dev/accessibility) · janus-observatory.nicocerond.workers.dev - [MDN: API WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL%5FAPI) · developer.mozilla.org - [MDN: API WebGPU](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU%5FAPI) · developer.mozilla.org - [MDN: DecompressionStream](https://developer.mozilla.org/en-US/docs/Web/API/DecompressionStream) · developer.mozilla.org - [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) · developer.mozilla.org - [Khronos Group: glTF](https://www.khronos.org/gltf/) · khronos.org - [meshoptimizer](https://meshoptimizer.org/) · meshoptimizer.org - [W3C: Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.2](https://www.w3.org/TR/WCAG22/) · w3.org - [web.dev: Web Vitals](https://web.dev/articles/vitals) · web.dev [Nicolás Cerón](https://dardo.studio/pt/estudio/) Nicolás Cerón é o fundador da Dardo, um estúdio de marca, design e desenvolvimento web em Bogotá, na Colômbia. ## Artigos relacionados - [**Quanto custa um site na Colômbia em 2026? Preços reais e o que muda um orçamento**Quanto custa um site na Colômbia: preços datados de fornecedores de Bogotá, custos anuais de domínio e hospedagem e o que realmente muda um orçamento.](https://dardo.studio/pt/blog/quanto-custa-um-site-colombia/) - [**Migrar de Framer para Astro: como mudar um site Framer sem perder o design nem as posições no Google**Migrar de Framer para Astro é reconstruir, porque o Framer não exporta HTML. O que capturar primeiro, o que quebra e como manter design, URLs e posições.](https://dardo.studio/pt/blog/migrar-de-framer-para-astro/) - [**Migrar de Webflow para Astro: como mudar um site sem perder conteúdo, design nem posições no Google**Migrar de Webflow para Astro: a exportação deixa de fora CMS, formulários, busca e idiomas. O que tirar do Webflow, o que refazer no Astro e como manter o SEO.](https://dardo.studio/pt/blog/migrar-de-webflow-para-astro/) - [**Migrar de WordPress para Astro: como mudar o site, headless ou por completo, sem perder posições no Google**Migrar de WordPress para Astro, headless ou por completo: o que exportar, como manter títulos do Yoast, permalinks e uploads, e as URLs que muitos esquecem.](https://dardo.studio/pt/blog/migrar-de-wordpress-para-astro/) ## Continue explorando. - [Serviço · **Sites 3D interativos com Three.js e WebGL**](https://dardo.studio/pt/servicos/sites-3d-interativos/) - [Seu projeto · **Vamos conversar**](https://dardo.studio/pt/contato/)