Uma foto vira um modelo 3D que gira no navegador

Vamos construir um protótipo que recebe uma foto de um objeto, gera um modelo 3D e exibe o arquivo girável no navegador. No fim, você terá um asset navegável, útil para uma vitrine de produto, um protótipo de jogo ou uma página de catálogo.

A parte difícil não é colocar um cubo na tela. É transformar uma imagem plana em uma forma tridimensional plausível. A imagem mostra uma frente, mas o arquivo precisa inventar laterais, traseira, profundidade e partes escondidas. Por isso, o resultado é uma reconstrução visual, não uma medição perfeita do objeto.

O projeto começa com uma decisão simples

Para a primeira versão, use uma única foto e um arquivo GLB como saída. O GLB reúne a malha e os materiais em um formato compacto, adequado para carregar na web. Não tente começar com impressão 3D ou engenharia reversa. Esses usos exigem geometria fechada, escala confiável e tolerâncias que uma foto única não fornece.

O fluxo mínimo tem quatro etapas: preparar a imagem, enviá-la a um gerador de 3D, baixar o arquivo e colocá-lo em uma página. A geração 3D por API existe, mas a rota e os campos exatos dependem da documentação do serviço escolhido. Como a chamada de 3D não tem um formato canônico definido aqui, trate o trecho de integração como uma adaptação necessária, não como código universal.

A foto já decide metade do resultado

Escolha um objeto isolado, bem iluminado e com contorno claro. Ele precisa ocupar boa parte do quadro. Fundo confuso, sombra muito forte e reflexos introduzem pistas falsas: o sistema pode interpretar uma sombra como profundidade ou misturar o fundo à superfície.

Uma foto única funciona melhor para objetos sólidos, com formas contínuas e detalhes visíveis. Ela funciona pior para grades, fios, folhas finas, superfícies transparentes e cavidades profundas. Nesses casos, o sistema não enxerga informação suficiente. Ele preenche o vazio com uma hipótese visual.

Quando você puder fotografar mais, use várias vistas. Um fluxo com duas ou três imagens permite confrontar a frente, o lado e a traseira. O benefício não vem de uma IA magicamente mais inteligente. Vem de reduzir a quantidade de geometria que precisa ser adivinhada.

Envie a imagem para o gerador

Crie um arquivo chamado generate-model.mjs. A estrutura abaixo mostra a forma geral da chamada, mas você deve substituir a rota e os campos pelo contrato documentado pelo serviço de geração 3D escolhido. As rotas de 3D podem variar entre serviços, e os campos específicos não estão definidos no formato canônico usado neste guia.

const response = await fetch("https://api.example.com/3d", {
  method: "POST",
  headers: {
    Authorization: "Bearer " + process.env.API_KEY,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    // Use the documented 3D request fields here.
  }),
});

if (!response.ok) {
  throw new Error(await response.text());
}

const data = await response.json();
console.log(data);

O motivo de separar essa etapa é depuração. Primeiro confirme que a requisição foi aceita e descubra como o serviço entrega o arquivo ou a tarefa de processamento. Alguns serviços respondem com o resultado pronto; outros devolvem um identificador para consulta posterior. Não invente esse formato. Leia o contrato e adapte apenas essa fronteira.

O tempo varia conforme o serviço e a complexidade do objeto. Repetir a geração aumenta proporcionalmente o tempo de espera. Esse comportamento muda a experiência do produto: gere no servidor e mostre estado de processamento, em vez de bloquear uma página sem explicação.

Limpe a malha antes de mostrá-la

O primeiro arquivo raramente é o arquivo final. Abra a malha em um visualizador 3D e procure quatro problemas: partes flutuantes, buracos inesperados, polígonos concentrados onde não há detalhe e textura deslocada em relação à geometria.

Para um visualizador web, a prioridade é aparência e carregamento. Remova componentes que não pertencem ao objeto, reduza polígonos quando a malha estiver pesada e mantenha a textura incorporada no GLB quando o formato permitir. Uma malha com muitos polígonos pode preservar mais detalhes, mas pode ser pesada para uma página móvel. Gere uma versão detalhada para inspeção e outra otimizada para exibição.

A escala merece atenção especial. Uma foto não informa se o objeto tem 5 centímetros ou 5 metros. Para uma vitrine visual simples, uma escala relativa pode ser suficiente; outros usos exigem medida real. Se o modelo for usado em uma cena ou experiência de realidade aumentada, a escala precisa ser ajustada; usos mecânicos exigem validação adicional. Use uma dimensão de referência e ajuste o modelo em uma ferramenta 3D antes de publicar.

Exiba o GLB no navegador

A página final precisa de um visualizador capaz de carregar arquivos GLB, permitir rotação e controlar zoom. O princípio é simples: o navegador baixa o arquivo, interpreta a malha e renderiza cada quadro com aceleração gráfica quando disponível.

Para validar o protótipo, não avalie apenas se o arquivo abre. Gire o objeto por todos os lados e observe se a traseira faz sentido, se as partes finas desapareceram e se a textura acompanha as curvas. Compare também o tamanho do arquivo e o tempo até o primeiro quadro. Se o modelo parece bom parado, mas trava durante a rotação, a redução de polígonos é o próximo passo.

Um teste objetivo ajuda: carregue a página em um celular e em um computador, gire o objeto por uma volta completa e registre se há travamentos, textura ausente ou partes invisíveis. Depois compare a versão original com a versão reduzida. O modelo certo é o menor arquivo que ainda preserva os detalhes necessários para a decisão do usuário.

O que a foto não consegue contar

A reconstrução por imagem única precisa inferir informações que não aparecem na foto. Isso já é suficiente para um protótipo visual, uma prévia de produto ou um asset conceitual. Não é suficiente para afirmar que uma peça tem a medida correta, que um encaixe funcionará ou que um objeto pode ser impresso sem reparos.

Partes finas e buracos são o teste mais severo. Uma alça estreita pode virar uma saliência grossa. Um espaço entre duas peças pode ser fechado. A parte traseira pode receber uma textura plausível, mas sem relação com o objeto real. Esses erros não são apenas defeitos de acabamento. Eles mostram que o sistema está completando informação ausente.

O próximo passo é trocar qualidade por evidência

Se a primeira versão serve para mostrar uma ideia, mantenha uma foto e itere rápido. Se a precisão visual importa, capture duas ou três vistas com iluminação consistente. Se a escala importa, inclua uma referência de tamanho e faça o ajuste manual depois. Se o arquivo vai para um jogo, crie uma versão de baixa densidade e teste a textura no motor de destino.

A evolução natural é transformar o protótipo em um pipeline: validar a imagem antes do envio, guardar versões da malha, gerar saídas para web e para edição, e registrar quais objetos exigem revisão humana. A automação pode reduzir parte do trabalho inicial de modelagem, mas não elimina a inspeção final.

O melhor resultado de uma foto para 3D não é fingir que a máquina descobriu o objeto inteiro. É saber exatamente qual parte foi observada, qual parte foi estimada e onde uma pessoa ainda precisa decidir.