Como Construir um Site 3D com IA: O Guia Completo (2026)

Como se constrói um site 3D com IA?

Resposta curta: descreves a experiência 3D que queres em linguagem corrente — "uma secção hero com um toro cromado a flutuar que reage ao cursor, fundo escuro, iluminação de estúdio suave" — e um gerador de código com IA transforma isso numa cena Three.js / React Three Fiber funcional que podes pré-visualizar, refinar com prompts de seguimento e publicar. No VULK (o nosso produto — disclosure abaixo), esse ciclo corre prompt → código R3F gerado → pré-visualização ao vivo numa microVM Firecracker → deploy num clique para a Cloudflare. Sem software de modelação 3D, sem boilerplate WebGL, sem configuração de build.

Isto já não é um workflow de nicho. Entre as 11.355 apps geradas no VULK, jogos e experiências 3D são 5,4% de todos os projetos — a segunda maior categoria a seguir às web apps de negócio (dados da plataforma VULK, julho de 2026). O resto deste guia cobre tudo: porque é que a web 3D explodiu, Three.js vs React Three Fiber, o pipeline completo de prompt-para-cena (heroes, cenas guiadas por scroll, shaders GLSL, postprocessing), oito prompts completos prontos a copiar, uma comparação honesta com as ferramentas de editor visual (Spline, Womp, Vectary, Unicorn Studio), otimização de desempenho e deploy. Disclosure: o VULK é o nosso produto — onde um editor visual é a melhor escolha, dizemo-lo. Atualizado a 17 de julho de 2026.

Tabela comparativa: geração de código com IA vs editores 3D visuais

A divisão estrutural pesa mais do que qualquer lista de funcionalidades: os editores visuais produzem embeds; a geração com IA produz código. Um embed vive dentro de um iframe ou de um runtime de viewer proprietário — não o consegues ligar ao estado da tua app, ao teu router ou à tua base de dados. Código gerado são apenas componentes React: o total do teu carrinho pode comandar a cena 3D, a posição de scroll pode comandar a câmara, e podes continuar a editar para sempre. Os editores visuais ganham quando um designer precisa de direção artística ao pixel sem tocar em código.

Porque é que os sites 3D estão por todo o lado em 2026?

Convergiram três forças. Primeiro, o hardware: o WebGL2 é universal e o WebGPU está a chegar a todos os browsers principais, por isso um telemóvel de gama média renderiza cenas que em 2020 exigiam um PC de gaming. Segundo, as expetativas: lançamentos de produto premiados (as páginas de produto da Apple, todos os configuradores automóveis, a primeira página dos Awwwards) treinaram os utilizadores a ler profundidade e movimento como "premium". Os sites planos leem-se cada vez mais como templates. Terceiro — e esta é a parte nova — a IA removeu a barreira de competências. Escrever Three.js à mão significa perceber scene graphs, matrizes, mapeamento UV, render loops e orçamentos de desempenho de GPU. Descrever uma cena em linguagem corrente significa não perceber nada além do que queres ver. Essa terceira força é a razão pela qual o 3D saltou para 5,4% de todos os projetos VULK poucos meses após o lançamento (dados da plataforma VULK, julho de 2026).

Three.js vs React Three Fiber: o que deve a IA gerar?

O Three.js é a biblioteca WebGL subjacente — cenas, câmaras, meshes, materiais, luzes, um render loop. O React Three Fiber (R3F) é um renderer React para Three.js: cada objeto Three.js torna-se um componente JSX declarativo (<mesh>, <pointLight>, <Canvas>), e o ecossistema à volta (@react-three/drei para helpers, @react-three/postprocessing para efeitos) cobre a maioria das necessidades comuns em poucas linhas.

O VULK gera React Three Fiber dentro de um projeto standard React + Vite + TypeScript, e esta é uma escolha deliberada:

• Código declarativo sobrevive a edições. Prompts de seguimento ("faz o toro de vidro em vez de cromado") traduzem-se em pequenos diffs de JSX, não em cirurgia a uma função de init imperativa.
• A integração de estado é de borla. Estado React, props e context comandam a cena diretamente — passa o rato sobre um cartão de preços no DOM, anima o objeto 3D por trás.
• A limpeza é automática. O R3F liberta geometrias e materiais quando os componentes desmontam; Three.js feito à mão tem fugas de memória de GPU se não tiveres cuidado.
• O ecossistema é idiomático. OrbitControls, Environment, ScrollControls, Text3D, useGLTF — os helpers do drei substituem centenas de linhas de boilerplate.

Three.js puro ainda faz sentido fora do React (sites vanilla, motores de jogo com loops próprios). Se esse for o teu contexto, os conceitos gerados transferem-se um-para-um — o R3F é uma pele declarativa fina sobre os mesmos objetos.

Como é o workflow de prompt-para-cena-3D?

O ciclo completo no VULK, passo a passo:

1. Descreve a cena. Escreve o que queres como se estivesses a fazer um briefing a um creative developer: os objetos, os materiais, o ambiente de iluminação, o comportamento da câmara, as interações. Especificidade à entrada, qualidade à saída — "uma esfera iridescente a flutuar" ganha a "algo fixe e 3D".

2. Geração. A IA planeia o scene graph (câmara, luzes, geometria, materiais, interações) e depois escreve o projeto completo: setup do <Canvas>, componentes por objeto, rig de iluminação (tipicamente um setup de três pontos ou um <Environment> HDRI), hooks de animação (useFrame) e tratamento responsivo (device pixel ratio, resize, touch).

3. Pré-visualização ao vivo. O projeto arranca numa microVM Firecracker com hot reload — o mesmo dev server Vite que correrias localmente, a correr server-side. Vês a cena real em segundos, não um mockup.

4. Itera por prompt. "Abranda a rotação para metade." "Adiciona bloom, subtil." "Faz reagir ao scroll — a câmara deve avançar à medida que o utilizador faz scroll no primeiro viewport." Cada seguimento edita apenas os ficheiros afetados.

5. Desce ao código quando quiseres. Tudo é código-fonte que podes ler e editar — ajusta uma constante de cor, afina uma curva de easing, ou entrega o projeto a um programador. Esta é a saída de emergência que as ferramentas de embed não têm.

6. Deploy. Um clique para a rede edge da Cloudflare, ou exporta o ZIP / faz push para o GitHub e aloja em qualquer lado — é um build Vite standard.

Que tipos de cenas 3D consegue a IA realmente gerar?

Quatro famílias cobrem quase tudo o que hoje é publicado na web 3D, e todas as quatro são promptáveis:

Heroes 3D. Um único objeto ou composição marcante atrás ou ao lado do título — geometria a flutuar, renders de produto, formas abstratas com materiais premium (vidro, cromado, iridescência). O cavalo de batalha dos sites de marketing 3D.

Cenas guiadas por scroll. A câmara ou os objetos animam à medida que o utilizador faz scroll — vistas explodidas de produto, sequências de storytelling, transições de secção. Em R3F isto é ScrollControls + useScroll do drei a mapear o offset de scroll para a posição da câmara ou para o progresso da animação.

Trabalho de shaders GLSL. Shaders vertex/fragment personalizados para efeitos que nenhum preset de material dá: gradientes fluidos, superfícies deslocadas por noise, campos de partículas, varrimentos holográficos. A IA é genuinamente boa a escrever GLSL — descrever "um gradiente a fluir lentamente como tinta na água" produz um fragment shader com simplex noise e fluxo baseado no tempo que precisarias de experiência em shaders para escrever à mão.

Postprocessing. Efeitos em screen-space por cima do render: bloom para brilho, depth of field para foco, aberração cromática para uma sensação de lente, vinheta para ambiente. Um bloco <EffectComposer> do @react-three/postprocessing — barato de adicionar, transformador quando subtil.

8 prompts completos prontos a copiar para sites 3D

Estes são prompts completos, não fragmentos — cola qualquer um deles no VULK (ou adapta-os para outro gerador) tal como estão. Cada um especifica objetos, materiais, iluminação, câmara e interação, porque é isso que separa uma cena utilizável de uma cena aleatória.

1. Landing page SaaS com hero 3D:

Constrói uma landing page para um SaaS de analytics para programadores chamado Pulseboard. Tema escuro (fundo #0a0a0f). O hero tem um título à esquerda e uma cena 3D interativa à direita: um cluster de três cubos de vidro a flutuar com refração subtil, a rodar lentamente a velocidades diferentes, com uma point light teal suave e uma key light branca. Os cubos devem inclinar-se suavemente na direção do cursor. Abaixo do hero: uma secção de funcionalidades com três cartões, uma secção de preços com dois planos e um footer. A cena 3D tem de fazer lazy-load e pausar o rendering quando sai do viewport.

2. Configurador de produto:

Cria um configurador de produto 3D para um teclado mecânico. Centro do ecrã: um modelo 3D de teclado construído com geometrias de caixas arredondadas (uma base mais uma grelha de keycaps). Barra lateral direita com opções: cor da caixa (grafite, prateado, azul-marinho), cor dos keycaps (branco, preto, laranja) e tipo de switch que muda uma pequena especificação em texto abaixo. Selecionar uma cor atualiza os materiais do modelo 3D instantaneamente com uma transição curta. OrbitControls limitados à rotação horizontal e ligeira inclinação vertical, auto-rotate após 5 segundos de inatividade. Iluminação de estúdio com uma sombra suave sob o teclado. Botão de adicionar ao carrinho que mostra a configuração escolhida num toast.

3. História de produto guiada por scroll:

Constrói um site de produto de uma página guiado por scroll para uma garrafa de água inteligente. A garrafa é uma forma de cápsula 3D com um material teal metálico, sempre centrada. Secção 1: a garrafa flutua e roda lentamente, o título aparece em fade. Secção 2: à medida que o utilizador faz scroll, a câmara avança e a garrafa inclina-se para mostrar a tampa, com uma etiqueta "Sensor de temperatura". Secção 3: a garrafa separa-se em tampa e corpo (vista explodida) com mais duas etiquetas. Secção 4: a câmara recua, a garrafa volta a montar-se, aparece o botão CTA. Usa animação ligada ao scroll de forma suave, não scroll-jacking — a posição de scroll do utilizador comanda diretamente o progresso da animação.

4. Fundo com shader GLSL:

Cria uma landing page para uma startup de música com IA com um fundo de shader animado a todo o viewport: um gradiente de roxo-escuro para azul-profundo a fluir lentamente com movimento orgânico de noise, como tinta a difundir-se na água, escrito como um fragment shader GLSL personalizado com simplex noise e um uniform de tempo. Mantém a saturação abaixo de 60% para que o texto branco continue legível. Título, subtítulo e um input de email de lista de espera centrados por cima. A animação do shader deve respeitar prefers-reduced-motion e recuar para um gradiente estático.

5. Portefólio 3D interativo:

Constrói um site de portefólio para um artista 3D. Hero: o meu nome em texto 3D extrudido grande (Text3D) com um material de metal escovado, iluminado por duas rim lights coloridas (magenta e ciano), a flutuar sobre um chão escuro refletor com um reflexo de espelho subtil. O texto roda alguns graus a seguir o cursor. Abaixo: uma grelha de projetos com 6 cartões com tilt no hover, uma secção sobre mim e um formulário de contacto. Adiciona um efeito de postprocessing bloom subtil só no hero.

6. Mini-jogo de browser:

Cria um jogo de browser: um endless runner low-poly em que o jogador controla uma pequena nave espacial a desviar-se de asteroides numa pista de três faixas. Setas ou A/D para mudar de faixa, swipe no mobile. Os asteroides aparecem à frente e movem-se em direção à câmara com velocidade crescente ao longo do tempo. Contador de pontuação baseado no tempo de sobrevivência, high score guardado em localStorage, ecrã de game over com botão de reiniciar. Estética low-poly com materiais flat-shaded, fundo de espaço escuro com um sistema de partículas de campo de estrelas, iluminação direcional suave.

7. Globo de visualização de dados:

Constrói uma página de dashboard com um globo 3D interativo a mostrar localizações de escritórios. O globo é uma esfera com uma textura estilizada escura da Terra e um brilho atmosférico subtil (shader fresnel). Seis marcadores de localização como pequenos pins brilhantes em coordenadas lat/long reais (Londres, Nova Iorque, Singapura, São Paulo, Berlim, Tóquio), convertidos corretamente de lat/long para posições 3D. Passar o rato sobre um pin mostra um tooltip com o nome da cidade e o headcount; clicar foca a câmara nesse pin com uma transição animada suave. Auto-rotação lenta que pausa no hover. Barra lateral com a lista dos mesmos escritórios — clicar num item da lista dispara o mesmo foco de câmara.

8. Hero premium com postprocessing:

Constrói uma landing page para uma marca de relógios de luxo. Hero: um torus-knot 3D em material de ouro polido a rodar lentamente sobre um fundo preto, com depth of field (a aresta da frente em foco, a de trás suavemente desfocada), bloom subtil nos brilhos e uma vinheta lenta. Título serifado e um único CTA. A câmara deriva quase impercetivelmente (movimento sinusoidal lento) para manter a cena viva. Tudo abaixo da dobra é 2D standard: uma grelha de coleção de três colunas e uma subscrição de newsletter. Limita o pixel ratio a 2 e pausa o render loop quando o hero está fora do ecrã.

Duas dicas de iteração que se aplicam a todos os prompts acima: muda uma coisa por seguimento ("torna o bloom mais subtil" — não uma instrução em cinco partes), e nomeia o ambiente, não só a geometria ("premium, escuro, discreto" orienta materiais e iluminação com mais eficácia do que descrições de objetos sozinhas).

Como se compara o VULK com Spline, Womp e Unicorn Studio?

Honestamente — ferramentas diferentes para utilizadores diferentes, e os editores visuais são excelentes no que fazem:

O Spline (grátis → $12/mês anual) é o editor 3D visual standard para designers: edição colaborativa em tempo real, materiais, estados de animação e interações configuradas numa GUI. O output é uma cena Spline embebida via viewer. Escolhe o Spline quando um designer precisa de controlo total de direção artística e a peça 3D é autocontida. A limitação é o reverso da moeda: a cena não é código que a tua app possa comandar, e o runtime do viewer adiciona peso que não controlas.

O Womp (grátis → $9.99/mês anual) é modelação 3D no browser (baseada em SDF, muito acessível). É a forma mais fácil de criar formas 3D de raiz, exportáveis como meshes GLB/STL. É uma ferramenta de modelação, não um construtor de sites — combina-o com outra coisa (incluindo o VULK: gera o site, carrega o teu GLB exportado do Womp com useGLTF).

O Unicorn Studio (grátis 10 publicações → $20/mês) faz efeitos WebGL no-code — fundos hero guiados por shaders, distorção, efeitos de texto — configurados com sliders e embebidos. O caminho mais rápido para um efeito polido; não é uma ferramenta para cenas completas, interações ou apps.

O Vectary (grátis → $15/mês anual) foca-se em configuradores de produto e visualização AR via embeds — forte para vistas de produto em e-commerce, limitado para tudo o resto.

O VULK ($3.99 intro de 3 dias → a partir de $19.99/mês, só pago) é o único desta lista em que o output é uma aplicação com deploy e código Three.js/R3F editável. É essa a troca: sem editor visual e sem plano gratuito, em troca de propriedade do código, integração na app e zero runtime de embed. Se és um designer com zero interesse em código, o Spline vai fazer-te mais feliz. Se a cena 3D faz parte de um produto — ligada a estado, dados, rotas — código gerado é a única abordagem que não bate numa parede.

Como se mantém um site 3D rápido?

O desempenho é onde a maioria dos sites 3D morre. A checklist completa, toda ela promptável ("aplica as melhores práticas de desempenho 3D" funciona, mas ser explícito é melhor):

• Comprime a geometria com Draco. Modelos GLTF/GLB encolhem 5–10× com compressão Draco; o useGLTF do drei trata da descodificação automaticamente. Um modelo de produto de 4MB passa a ~500KB.
• Faz lazy-load do bundle 3D. Three.js + R3F são ~150KB+ gzipped antes da tua cena. Faz code-split (React.lazy + Suspense) para que o primeiro paint nunca espere pelo WebGL, e mostra uma imagem poster estática até a cena montar.
• Pausa quando está fora do ecrã. Usa frameloop="demand" ou um IntersectionObserver para parar o render loop quando a cena não está visível. Um hero a animar três ecrãs abaixo do scroll é puro desperdício de bateria.
• Limita o device pixel ratio a 2. dpr={[1, 2]} no Canvas. Renderizar a DPR 3 num telemóvel triplica o trabalho de fragment para zero ganho visível.
• Orçamenta luzes e sombras. Cada luz dinâmica que projeta sombras re-renderiza a cena do seu ponto de vista. Uma key light com sombras mais um <Environment> HDRI ganha a quatro point lights, visual e computacionalmente.
• Usa instancing em geometria repetida. Um campo de 500 asteroides é um draw call com <Instances>, ou 500 sem.
• Fornece um fallback de movimento reduzido. Respeita prefers-reduced-motion com um render estático — um requisito de acessibilidade que serve também de fallback para dispositivos fracos.
• Mede num telemóvel real. O profiling de GPU do Chrome DevTools num Android de gama média diz a verdade; o teu portátil M-series não.

Como se faz deploy de um site 3D?

Um projeto R3F gerado é um build Vite standard — dist/ de assets estáticos — por isso o deploy é igual ao de qualquer app React. No VULK é um clique para a rede edge da Cloudflare com URL ao vivo, domínios personalizados suportados. Projetos exportados (ZIP ou GitHub) fazem deploy onde quer que exista alojamento estático: Cloudflare Pages, Vercel, Netlify, um bucket S3. Duas notas específicas de 3D: garante que o teu host serve assets .glb/.hdr com cache headers longos (são imutáveis e muitas vezes os ficheiros maiores), e mantém as texturas em formatos comprimidos (KTX2/basis onde suportado, senão JPEG/WebP bem dimensionados — uma textura de 4096px num ecrã de telemóvel é largura de banda desperdiçada).