3D Model Viewer: glTF e GLB online

O que é o visualizador 3D glTF/GLB?

O visualizador 3D glTF/GLB permite abrir e inspecionar arquivos .gltf e .glb diretamente no navegador — sem instalar software, sem conta e sem enviar arquivos para um servidor. Arraste um modelo para a área de soltar e orbite, amplie e desloque com o mouse imediatamente. A ferramenta usa o componente web model-viewer do Google, o mesmo renderizador de qualidade de produção usado nas pré-visualizações de produtos 3D do Google Search e no AR Quick Look. Você pode alternar entre cinco presets de iluminação de ambiente, ajustar a exposição e a intensidade das sombras, ativar ou desativar a rotação automática e exportar uma captura de tela da visualização atual.

Principais recursos

• Arrastar e soltar glTF e GLB — solte um arquivo .gltf ou .glb; extensões não suportadas exibem um erro antes do carregamento
• Controles de órbita, zoom e deslocamento — clique esquerdo + arrastar para orbitar, rolar para zoom, clique direito + arrastar para deslocar; camera-controls habilitado no elemento <model-viewer>
• Alternância de rotação automática — um interruptor ativa ou desativa o atributo auto-rotate no componente <model-viewer>; ativado por padrão
• Cinco presets de iluminação — Neutral, Warm, Legacy, Commerce, Spruit Sunrise; mapeados diretamente ao atributo environment-image
• Ajuste de exposição — controle deslizante de 0.1 a 3.0 (passo 0.1); padrão 1.0
• Ajuste de intensidade de sombra — controle deslizante de 0.0 a 2.0 (passo 0.1); padrão 1.0; mapeado ao atributo shadow-intensity
• Exportar captura — chama modelViewer.toBlob() e salva como {nomeModelo}_{proporcao}_{iluminacao}_{resolucao}.png
• Presets de proporção — escolha entre Livre, 1:1, 4:3, 16:9, 9:16, 3:2 e 21:9 para enquadrar capturas
• Múltiplos métodos de upload — faça upload de um único arquivo .gltf/.glb, um arquivo ZIP com bundle glTF ou uma pasta inteira
• Baseado no Google model-viewer — renderização WebGL de qualidade de produção com suporte a materiais PBR (renderização baseada em física)

Como usar o visualizador 3D glTF/GLB

Passo 1: Carregar o modelo 3D

Abra o visualizador 3D glTF/GLB. Arraste um arquivo .gltf ou .glb do seu sistema de arquivos para a área de soltar. Alternativamente, clique na área de soltar para abrir um seletor de arquivos (o atributo accept está definido como .gltf,.glb). O modelo é carregado usando uma URL de objeto local — nenhum dado é enviado pela rede.

Se você soltar um arquivo com extensão não suportada, uma notificação exibe "Arquivo inválido" e nada é carregado.

Passo 2: Navegar pelo modelo

Após o carregamento, o visualizador exibe o modelo em um viewport de 500 px de altura. Use o mouse para navegar:

• Clique esquerdo e arrastar — orbitar ao redor do modelo
• Roda de rolagem — ampliar e reduzir
• Clique direito e arrastar — deslocar a câmera

Os gestos de toque funcionam equivalentemente no celular: arraste com um dedo para orbitar, aperte para zoom, arraste com dois dedos para deslocar.

O nome do modelo aparece no painel de controles em fonte monoespaçada. Clique em Carregar novo modelo a qualquer momento para descarregar o modelo atual e retornar à área de soltar.

Passo 3: Ajustar a iluminação

No painel de controles à direita, selecione um dos cinco presets de iluminação clicando em seu nome:

O preset selecionado é destacado com um fundo preenchido. As mudanças são aplicadas imediatamente — sem necessidade de recarregar.

Passo 4: Ajustar exposição e sombra

Abaixo dos presets de iluminação, dois controles deslizantes oferecem controle adicional:

• Exposição (0.1–3.0) — aumenta ou diminui o brilho geral da cena. Um valor de 1.0 é a referência neutra. Tente 1.5–2.0 para modelos escuros que precisam de mais brilho.
• Intensidade de sombra (0.0–2.0) — controla o quão nítida e escura aparece a sombra no chão sob o modelo. Defina como 0.0 para remover completamente a sombra.

Ambos os valores atualizam os atributos do <model-viewer> em tempo real.

Passo 5: Alternar rotação automática e exportar captura

Use o interruptor de Rotação automática para iniciar ou parar a rotação lenta do modelo em seu eixo vertical. A rotação automática está ativada por padrão, permitindo uma visão sem usar as mãos de todo o modelo.

Quando a visualização estiver na posição desejada, clique em Captura. A ferramenta captura a renderização atual e baixa o resultado como arquivo PNG nomeado com o nome do modelo, proporção, preset de iluminação e resolução. Você também pode escolher uma resolução específica de captura no painel: Viewport (tamanho atual), 720p, 1080p, 2K e 4K.

Exemplos práticos

Revisar um asset de jogo antes de integrar

Um desenvolvedor de jogos recebe um modelo de personagem como player-character.glb. Ele o arrasta para o visualizador para verificar o asset: as texturas estão aplicadas corretamente sob iluminação Neutral, e como o personagem fica sob iluminação Warm em uma cena ao ar livre? Ele exporta uma captura para anexar ao ticket de revisão.

Verificar um modelo de produto para listagem de e-commerce

Uma equipe de e-commerce recebe um modelo 3D de produto de um fornecedor no formato .glb. Eles carregam no visualizador, selecionam o preset Commerce (otimizado para fotografias de produto limpas), ajustam a exposição para 1.4 para mais clareza e reduzem a intensidade da sombra para 0.5 para um visual mais suave. Exportam uma captura para usar como imagem de fallback estática na página do produto.

Validar uma exportação glTF do Blender

Um artista 3D exporta uma cena do Blender como arquivo .gltf e o abre no visualizador para uma verificação rápida: o modelo carrega sem erros? Os materiais estão renderizando com cores corretas? A escala é razoável? Os controles de órbita permitem examinar todos os lados rapidamente. O preset Spruit Sunrise ajuda a verificar como o modelo fica sob a luz natural ao ar livre.

Dicas e boas práticas

O parâmetro idealAspect: true na exportação de captura faz com que a imagem capturada corresponda à proporção atual do visualizador em vez de forçar um recorte quadrado. Se o seu modelo for mais largo do que alto, a captura refletirá isso.

O componente web model-viewer suporta materiais PBR (renderização baseada em física) definidos na especificação glTF. Se um modelo aparecer plano ou desbotado, verifique se ele foi exportado com materiais PBR do seu software 3D. Modelos exportados sem dados de material renderizam no sombreamento cinza padrão.

Para arquivos .gltf com referências a texturas externas, o carregamento via seletor de arquivos pode falhar porque o navegador não consegue acessar outros arquivos no diretório. Use o formato .glb (que incorpora todas as texturas) para carregamento confiável no navegador.

O visualizador renderiza com 500 px de altura independentemente das dimensões do modelo. Use os controles de órbita para posicionar o modelo e depois tire uma captura — a captura captura a renderização nas dimensões reais de exibição.

Problemas comuns e resolução

Erro "Arquivo inválido". A ferramenta aceita apenas arquivos terminados em .gltf ou .glb (verificação sem distinção de maiúsculas usando .match(/\.(gltf|glb)$/i)). Renomeie o arquivo se necessário, ou verifique se a ferramenta de exportação está produzindo o formato correto.

O modelo carrega, mas as texturas estão ausentes. Se você estiver carregando um arquivo .gltf (a variante JSON), os arquivos de textura e de buffer binário associados precisam estar no mesmo diretório. O seletor de arquivos do navegador só concede acesso ao arquivo selecionado individualmente, não ao diretório. Use o formato .glb para agrupar tudo em um único arquivo.

A captura falha com toast "Erro de captura". O método model-viewer.toBlob() requer que o WebGL esteja disponível. Se o WebGL estiver desativado no navegador ou o driver gráfico o estiver bloqueando, as capturas falharão. Verifique chrome://settings/graphics (Chrome) ou o equivalente do seu navegador.

A rotação automática não para. O interruptor de rotação automática controla o atributo auto-rotate em tempo real. Se alternar não parar a rotação, tente clicar no modelo para recuperar o controle da câmera (isso também pausa a rotação automática de acordo com o comportamento padrão do model-viewer).

Privacidade e segurança

O visualizador 3D glTF/GLB carrega os arquivos de modelo usando URL.createObjectURL() localmente no navegador — os dados nunca saem do seu dispositivo. O componente Google model-viewer é carregado como biblioteca JavaScript e renderiza completamente na sua GPU via WebGL. Nenhuma geometria, textura ou metadado do modelo é transmitida a qualquer servidor. Isso torna a ferramenta segura para usar com assets 3D proprietários, produtos não lançados ou projetos industriais confidenciais.

Perguntas frequentes

O visualizador 3D glTF/GLB é gratuito?

Sim, completamente gratuito, sem conta e sem limites de uso. Faz parte do conjunto de ferramentas gratuitas do Glyph Widgets.

O visualizador 3D glTF/GLB funciona offline?

Após o carregamento da página (incluindo o componente @google/model-viewer), você pode carregar e visualizar arquivos de modelo locais sem conexão com a internet. O carregamento inicial da página requer acesso à rede para baixar a biblioteca do visualizador.

Meus dados estão seguros no visualizador 3D glTF/GLB?

Os arquivos de modelo são carregados via URL.createObjectURL() e renderizados localmente no WebGL. Nenhuma geometria, textura ou metadado é enviado a qualquer servidor. O componente model-viewer do Google funciona inteiramente no navegador.

Quais formatos de arquivo a ferramenta suporta?

Apenas .gltf (JSON + arquivos externos) e .glb (formato binário agrupado). Outros formatos 3D (.obj, .fbx, .stl, .dae) não são suportados. Converta para glTF usando ferramentas como Blender ou o conversor glTF da Khronos antes de carregar.

Qual é a diferença entre glTF e GLB?

glTF é um arquivo de texto JSON que referencia buffers binários e imagens de textura externos. GLB é o formato de contêiner binário que agrupa JSON, buffers e texturas em um único arquivo. Para carregamento no navegador, o GLB é fortemente preferido porque todos os assets são autocontidos.

Quais presets de iluminação estão disponíveis?

Os cinco presets são: Neutral (iluminação de estúdio equilibrada), Warm (tons âmbar/quentes), Legacy (renderização clássica), Commerce (iluminação de produto limpa e de alto contraste) e Spruit Sunrise (luz natural ao ar livre). Eles correspondem ao atributo environment-image do componente model-viewer.

O que o controle deslizante de exposição faz?

A exposição ajusta o brilho geral da cena renderizada de 0.1 a 3.0. O padrão é 1.0. Valores acima de 1.0 clareiam a cena; valores abaixo de 1.0 escurecem. É equivalente ao ajuste de exposição em fotografia ou em um renderizador.

Posso visualizar modelos glTF animados?

O componente model-viewer suporta animações glTF, mas a interface do Glyph Widgets não expõe controles de reprodução para animações. A rotação automática é o único recurso de movimento na interface atual. Para pré-visualizar animações glTF, use uma ferramenta dedicada como o Khronos glTF Sample Viewer.

Com que resolução as capturas são exportadas?

Você pode escolher entre cinco opções de resolução no painel: Viewport (tamanho de exibição atual), 720p (1280x720), 1080p (1920x1080), 2K (2560x1440) e 4K (3840x2160). Na resolução Viewport, a captura corresponde às dimensões de exibição do visualizador. Para resoluções maiores, a ferramenta redimensiona temporariamente o elemento do visualizador para renderizar na resolução selecionada e depois o restaura.

Posso carregar arquivos GLB muito grandes?

Não há limite de tamanho imposto, mas arquivos grandes (50 MB+) podem levar alguns segundos para criar a URL de objeto local e inicializar o renderizador model-viewer. O desempenho depende do navegador, GPU e RAM disponível.

Ferramentas relacionadas

• Em breve: Image Converter — converta entre diferentes formatos de imagem as capturas exportadas do visualizador
• Em breve: SVG to PNG — converta assets de design em SVG que complementam fluxos de trabalho 3D
• Em breve: EXIF Viewer — inspecione metadados em fotografias usadas como imagens de referência para modelagem 3D

Experimente o visualizador 3D glTF/GLB agora: Glyph Widgets glTF/GLB 3D Model Viewer