Como colocar um logo 3D interativo no seu site

Do que você precisa para colocar um logo 3D interativo em um site?

Cinco peças. A maioria dos logos 3D com problema não tem as duas últimas.

O trabalho se divide de forma clara: a modelagem acontece uma vez em uma ferramenta 3D, e a página só carrega um arquivo pronto. Se você ainda não criou o modelo, transformar um logo chapado em 3D explica a extrusão e o bisel no Blender.

Como transformar um logo em um modelo GLB para a web?

Comece pelo logo vetorial, dê profundidade a ele em uma ferramenta 3D e depois exporte em glTF. O manual do three.js diz: "Sempre que possível, recomendamos usar glTF (GL Transmission Format). As versões .GLB e .GLTF do formato são bem suportadas." O Khronos, que mantém o formato, observa que o núcleo JSON "pode ser armazenado em um único arquivo glTF binário (.glb)", que é a forma mais fácil de hospedar.

O exportador glTF do Blender tem algumas regras que importam para logos:

• Converta curvas em meshes. Um SVG importado no Blender chega como curvas, e o exportador diz que "curvas e outros dados que não são mesh não são preservados e precisam ser convertidos em meshes antes da exportação."
• Use o Principled BSDF. O exportador lê dele a cor base, o metallic e o roughness. Um Coat diferente de zero adiciona a extensão KHR_materials_clearcoat, e o Transmission adiciona KHR_materials_transmission.
• Cuidado com vidro. A documentação do Blender avisa que a transmissão "é complexa de implementar para engines de renderização em tempo real" e que o suporte à extensão "ainda não é amplo." O GLTFLoader do three.js a lista como suportada, mas teste num celular.
• As luzes não são levadas junto. "O tipo Area light e a iluminação World do Blender não são suportados pelo glTF e serão ignorados na exportação." Planeje iluminar o logo no three.js.

Para manter o arquivo pequeno, o three.js suporta compressão de mesh Draco e texturas KTX2 pelo loader. A documentação do DRACOLoader diz que a geometria comprimida "pode ser significativamente menor, ao custo de um tempo extra de decodificação no dispositivo do cliente", então vale mais a pena para meshes detalhadas do que para um símbolo simples extrudado.

Como carregar e iluminar um logo 3D com three.js?

Crie um renderer com fundo transparente, carregue o GLB e dê à cena um environment map. O RoomEnvironment do three.js produz iluminação baseada em imagem para materiais PBR sem precisar incluir um arquivo HDR.

import * as THREE from "three";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { RoomEnvironment } from "three/addons/environments/RoomEnvironment.js";

const canvas = document.querySelector("#logo3d");
const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(30, 1, 0.1, 100);
camera.position.set(0, 0, 6);

const pmrem = new THREE.PMREMGenerator(renderer);
scene.environment = pmrem.fromScene(new RoomEnvironment()).texture;

const gltf = await new GLTFLoader().loadAsync("/logo.glb");
const logo = gltf.scene;
scene.add(logo);

Mantenha alpha: true para que o fundo da página apareça. As boas práticas de WebGL do MDN explicam que alpha: false faz o navegador compor o canvas "como se ele fosse opaco."

Se nada aparecer, vale o checklist do manual do three.js: registre os erros do loader, "tente aumentar ou diminuir a escala do modelo por um fator de 1000" e "tente adicionar e posicionar uma fonte de luz. O modelo pode estar escondido no escuro."

Como fazer um logo 3D reagir ao ponteiro e à rolagem?

Escute pointermove, guarde um ângulo-alvo e mova o logo parte do caminho até ele a cada frame. Segundo o MDN, os pointer events cobrem "um mouse, caneta/stylus ou toque" com um único conjunto de handlers.

let targetX = 0, targetY = 0, last = 0;

window.addEventListener("pointermove", (e) => {
  targetY = ((e.clientX / innerWidth) * 2 - 1) * 0.35;  // radians, left/right
  targetX = ((e.clientY / innerHeight) * 2 - 1) * 0.2;  // radians, up/down
});

function frame(t) {
  const dt = last ? t - last : 16;
  last = t;
  const k = 1 - Math.exp(-dt / 120); // same easing at 60 Hz and 120 Hz
  logo.rotation.y += (targetY - logo.rotation.y) * k;
  logo.rotation.x += (targetX - logo.rotation.x) * k;
  renderer.render(scene, camera);
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);

O timestamp importa. O MDN avisa que, se você não usá-lo para medir o progresso, "a animação vai rodar mais rápido em telas com alta taxa de atualização."

Rolagem: leia a posição de rolagem dentro do mesmo loop de frames e converta-a em um giro ou elevação suave enquanto o logo estiver visível. O critério Animation from Interactions da WCAG cita o parallax e o movimento acionado pela rolagem como exemplos típicos de movimento que os usuários precisam poder desativar, então os efeitos de rolagem devem ficar atrás da verificação de movimento reduzido abaixo.

Toque: celulares não têm um ponteiro em repouso. O MDN observa que, em dispositivos sem hover, os eventos de entrada e saída chegam com o toque e a soltura, então o logo só reage enquanto um dedo está na tela. Dê aos usuários de toque um movimento idle lento ou uma reação ao tocar, e não defina touch-action: none em um canvas grande, senão a página para de rolar sob ele.

Qual orçamento de desempenho um logo 3D deve ter?

Não existe um número universal. O web.dev define um orçamento de desempenho como "um conjunto de limites impostos a métricas que afetam o desempenho do site": defina um para o tamanho do GLB, o JavaScript adicionado pelo three.js e o tempo até o seu hero ficar visível, e depois meça em relação a ele. As alavancas:

Para um logo, renderizar sob demanda significa parar o loop de frames quando o logo desacelera até o repouso e reiniciá-lo no próximo movimento do ponteiro. Os navegadores já pausam o requestAnimationFrame "em abas em segundo plano ou em <iframe>s ocultos", então você só precisa tratar por conta própria o caso de rolagem para fora da tela.

O carregamento também importa. A lista do web.dev de elementos que contam para o Largest Contentful Paint inclui imagens, posters de vídeo, imagens de fundo e texto, e não menciona <canvas>. Na prática, o que é medido é a sua imagem de poster ou o título, então faça o poster carregar rápido e carregue o three.js depois dele.

O que os visitantes devem ver sem WebGL ou com movimento reduzido?

O mesmo logo, parado. Renderize um frame do modelo na pose de repouso em WebP ou PNG, mostre-o como um <img> normal com texto alternativo e só troque pelo canvas depois que o modelo carregar.

• Sem WebGL. O manual do three.js mostra WebGL.isWebGL2Available() para verificar o suporte "antes de tentar renderizar qualquer coisa." Se retornar false, mantenha o poster.
• Leitores de tela. O MDN observa que o conteúdo do canvas "não é exposto às ferramentas de acessibilidade", então o nome da marca precisa estar no texto alternativo da imagem ou num texto próximo, não no canvas.
• Movimento reduzido. O prefers-reduced-motion informa que o usuário "ativou no dispositivo a configuração de movimento reduzido." O W3C lista essa media query como técnica suficiente (C39) para a WCAG 2.3.3.

const still = matchMedia("(prefers-reduced-motion: reduce)").matches;
if (!still && WebGL.isWebGL2Available()) {
  startLogo(); // load three.js and the GLB, then hide the poster
}

Mais padrões para configurações de movimento estão em animação acessível e movimento reduzido.

Quando o Spline ou um vídeo são uma escolha melhor do que o three.js?

A documentação do Spline (em novembro de 2026) diz que o Viewer faz lazy-load por padrão, carregando o canvas "só quando o canvas está visível na tela", pode rastrear eventos do mouse globalmente ou só dentro do seu contêiner e pode mostrar uma imagem de dica quando ninguém interage. A exportação de código cobre Vanilla JS, three.js, React, Next.js e react-three-fiber, mas "animações e eventos só são habilitados ao exportar para Vanilla js e React." O Spline também "desenha com WebGPU por padrão e volta para WebGL automaticamente." As vantagens e desvantagens são comparadas em Rive vs Spline.

Escolha vídeo quando nada precisa reagir. Um vídeo renderizado pode mostrar refração e sombras suaves que são caras em tempo real. Para um fundo transparente você precisa de dois arquivos: WebM VP9 para Chrome e Firefox e HEVC em um MOV para Safari, com a fonte HEVC listada primeiro para que o Safari a escolha (o texto de Jake Archibald explica por quê). Veja vídeo transparente em um site.

Dá para ter um logo 3D interativo sem criá-lo você mesmo?

Sim. O Motion Studio do Charmotion cria um hero de site a partir do seu próprio arquivo de logo: ele encontra as partes do logo e as movimenta, então nada é redesenhado. O hero segue o ponteiro, reage ao hover e fica em loop enquanto está em repouso. Você recebe um embed hospedado que pausa fora da tela e respeita o movimento reduzido, arquivos para auto-hospedagem, um componente React e MP4 mais WebM transparente.

Os três conceitos são grátis em todos os planos. Criar um deles começa no Starter (US$ 9/mês em novembro de 2026, 3 animações de logo por mês), que cria com Rive e three.js interativo. Um vídeo 3D cinematográfico renderizado está no All in one (US$ 100/mês). Se você quer controle total sobre o código, os passos acima são tudo de que precisa.

Como adicionar um logo 3D interativo a um site

1. Modele o logo. Faça a extrusão e o bisel do logo vetorial em uma ferramenta 3D, converta as curvas em meshes e use materiais Principled BSDF.
2. Exporte um GLB. Exporte glTF como um único arquivo .glb, comprimindo a geometria com Draco só se a mesh for detalhada.
3. Carregue e ilumine. Carregue o GLB com o GLTFLoader do three.js em um canvas transparente e defina scene.environment a partir do RoomEnvironment.
4. Adicione a reação ao ponteiro. Converta pointermove em uma pequena rotação-alvo e faça a transição suave até ela a cada frame usando o timestamp do frame.
5. Economize energia. Pare de renderizar quando o logo estiver em repouso ou fora da tela, e limite o pixel ratio em telas de alta densidade.
6. Adicione fallbacks. Mostre primeiro uma imagem de poster estática e mantenha-a para navegadores sem WebGL e para prefers-reduced-motion.

Perguntas frequentes

Um logo 3D deve ser um arquivo GLB ou glTF?

Os dois funcionam: o manual do three.js diz que ambos são bem suportados. Um .glb junta o JSON, a geometria e as texturas em um único arquivo binário, então é uma requisição só e é mais difícil de quebrar ao mover arquivos. Um .gltf com arquivos separados é mais fácil de inspecionar à mão.

Um logo 3D prejudica o Largest Contentful Paint?

Geralmente não de forma direta. A lista do web.dev de elementos de LCP inclui imagens, posters de vídeo, imagens de fundo e texto, e não menciona canvas. O que é medido é a sua imagem de poster ou o título, então mantenha o poster pequeno e carregue o three.js e o modelo depois dele.

Um logo 3D interativo funciona em celulares?

Sim, com duas mudanças. Telas de toque não têm hover, então o logo só recebe input de ponteiro enquanto um dedo está na tela; adicione um movimento idle ou uma reação ao toque. Telas de alta densidade multiplicam os pixels a renderizar, então limite a resolução do canvas para manter a taxa de frames.

Fontes

• Loading 3D models, three.js manual
• GLTFLoader, three.js docs
• DRACOLoader, three.js docs
• RoomEnvironment, three.js docs
• Rendering on demand, three.js manual
• Responsive design (HD-DPI displays), three.js manual
• WebGL compatibility check, three.js manual
• glTF overview, Khronos Group
• glTF 2.0 import and export, Blender Manual
• WebGL best practices, MDN Web Docs
• Pointer events, MDN Web Docs
• Window: requestAnimationFrame() method, MDN Web Docs
• Intersection Observer API, MDN Web Docs
• <canvas>: the Graphics Canvas element, MDN Web Docs
• Largest Contentful Paint (LCP), web.dev
• Performance budgets 101, web.dev
• prefers-reduced-motion, MDN Web Docs
• Understanding SC 2.3.3: Animation from Interactions, W3C WAI
• C39: Using the CSS prefers-reduced-motion query to prevent motion, W3C WAI
• Exporting as Spline Viewer, Spline docs
• Exporting as code, Spline docs
• Video with alpha transparency on the web, Jake Archibald