Como colocar um modelo CAD 3D no seu site: 4 caminhos comparados

Para colocar um modelo CAD 3D no seu site, exporte a montagem como arquivo STEP, converta esse arquivo em um modelo de visualização leve, no formato glTF ou GLB, e mostre esse modelo em um visualizador web na página do produto. O seu arquivo CAD nunca precisa ser publicado: o navegador baixa só o modelo de visualização, que, no caso do manifold de refrigeração ICM-21 da Tutamen, com 42 peças, é um download de 2,0 MB gerado a partir do arquivo STEP dele.

O STEP é o arquivo 3D neutro que todos os principais sistemas CAD conseguem exportar (ISO 10303). O glTF é o formato aberto para 3D na web, do Khronos Group, e o GLB é o glTF em um único arquivo. Os quatro caminhos de um para o outro diferem principalmente no que o comprador pode fazer, no que você entrega e em quem mantém tudo funcionando.

Por que um site não consegue mostrar um arquivo STEP diretamente?

Um arquivo STEP descreve o produto como superfícies matemáticas exatas, e o navegador só consegue desenhar triângulos planos. Antes, cada face precisa ser coberta de pequenos triângulos (os polígonos que formam o que se chama de “malha”), uma etapa chamada tesselação. Mais triângulos deixam as curvas mais suaves e o arquivo maior, então um bom conversor para no ponto em que as curvas já parecem suaves em tela cheia.

A conversão também define o que a página pode fazer. Um bom modelo de visualização mantém cada peça separada, com nome e material, para que a montagem possa ser explodida e cada peça possa ser clicada. Ele guarda as peças repetidas uma única vez: o arquivo do ICM-21 tem 214.168 triângulos, e a tela desenha 654.948. Ele não carrega árvore de recursos, esboços nem parâmetros, então valores como massa e volume são medidos antes no CAD exato, e uma boa página informa que, quando os valores do modelo diferem dos da ficha técnica, vale a ficha técnica.

O que esse processo gerou para os quatro modelos publicados do Proofscene, medido nos arquivos que as páginas deles carregam:

O download é o que o visitante espera carregar; a página e o visualizador em volta dele acrescentam cerca de meio megabyte. *STRAVIK, HALVORN e ARTIXO são marcas fictícias que o Proofscene modelou internamente para mostrar outros setores; o ICM-21 é o produto real da Tutamen, criado a partir do arquivo STEP dele.

Quais são os quatro caminhos para colocar um modelo CAD no seu site?

Os quatro caminhos são: incorporar um visualizador online grátis, usar uma plataforma 3D hospedada ou um configurador, criar por conta própria uma página com um componente web aberto, como o model-viewer do Google, e ter uma página de produto interativa criada para você a partir do CAD. Veja como eles se comparam nas questões que decidem a escolha para um produto industrial:

Qual caminho combina com o seu produto?

Um visualizador grátis serve para uma olhada rápida em uma peça, para um cliente. É o caminho mais rápido e o que mais entrega a terceiros, porque um visualizador de CAD grátis trabalha a partir do próprio arquivo STEP.

Uma plataforma hospedada serve para produtos vendidos pela aparência e pelas opções, em que o comprador escolhe uma cor ou um tamanho. Esse comprador faz a escolha em um configurador.

Criar uma página por conta própria com o model-viewer, o componente web grátis do Google criado sobre a biblioteca three.js, serve para uma equipe web com tempo e peças simples que só precisam girar. Ele lida bem com giro, anotações e AR. O custo é converter, simplificar, iluminar e testar cada produto, de novo a cada mudança, e uma vista em corte, um modo de raio X ou uma lista de peças clicável é código que você escreve.

Uma página de produto interativa sob medida serve para produtos de engenharia cujo valor está dentro da carcaça (bombas, válvulas, manifolds, juntas de robô) e para compradores que conferem cada número. O Proofscene cria essa página dentro do seu próprio site, como uma única tag iframe ou como uma página hospedada em suamarca.proofscene.com; o ICM-21 da Tutamen entrou no ar no mesmo dia em que o arquivo STEP chegou.

Se o seu produto se encaixa nesse último grupo, envie o arquivo STEP e a ficha técnica e tenha o seu produto em 3D. As páginas de produto sob medida estão incluídas no Proofscene Business e no Enterprise, e, antes de qualquer trabalho começar, a nossa equipe diz o que vai criar e quando a página vai entrar no ar.

O que o comprador deve poder fazer com o modelo?

Quem compra produtos de engenharia quer ver por dentro e conferir os números, então o modelo deve permitir desmontar o produto, abrir em corte, ver através dele e ler os dados de cada peça, e não só girar. Cada um desses recursos funciona em um modelo publicado que você pode abrir agora:

• Vista explodida. A válvula de esfera HALVORN BV25 se separa em 14 peças, na ordem de montagem.
• Vista em corte e fluxo. Corte a bomba STRAVIK SX 50-160 ao meio e faça a bomba funcionar com qualquer vazão de 15 a 40 m³/h.
• Raio X. Veja o motor, o redutor harmônico 50:1 e o rolamento de saída através da carcaça da junta de robô ARTIXO RA90.
• Dados das peças e medição. Clique em qualquer peça do manifold Tutamen ICM-21 para ver nome, material e quantidade, meça entre arestas reais e faça o líquido refrigerante circular com a divisão de vazão da ficha técnica.
• Compartilhamento. Um link e um QR code para cada vista, e um tour guiado curto para os visitantes que não vão explorar por conta própria.

Vídeos de lançamento podem ser renderizados a partir do mesmo modelo: veja animação 3D de produtos ou o vídeo de 35 segundos de uma página de produto 3D interativa sendo desmontada em um navegador.

Como manter um modelo 3D rápido no celular?

Mantenha o modelo em poucos megabytes, carregue-o quando o visitante chegar até ele e garanta que a página funcione bem mesmo sem ele. Um modelo que carrega primeiro atrasa os textos e as imagens que o comprador veio ver.

• Compacte o arquivo. O glTF pode guardar números em menos bytes e comprimir a geometria com as extensões Draco ou meshopt, e o servidor deve enviar o arquivo compactado. Os modelos do Proofscene guardam as direções das superfícies em números de 16 bits e trafegam com gzip: o GLB de 3,6 MB do ICM-21 chega com 2,0 MB.
• Gaste triângulos onde o comprador olha. Detalhes de rosca, arredondamentos minúsculos e o interior de peças que ninguém abre deixam o celular mais lento e não acrescentam nada.
• Mostre uma imagem estática primeiro. Carregue o 3D quando ele aparecer na tela durante a rolagem ou com um toque; o model-viewer faz isso com uma imagem de capa (poster) e carregamento sob demanda (lazy loading).
• Não prenda a rolagem. Os modelos incorporados do Proofscene rolam com a página e só dão zoom com Ctrl ou com o gesto de pinça, e, no celular, os painéis se recolhem em gavetas deslizantes para que o produto continue visível.
• Deixe as informações no texto. Buscadores e assistentes de IA leem a página, não o modelo, então coloque a descrição, os nomes das peças e as especificações no HTML. As páginas públicas de demo do Proofscene acrescentam dados estruturados para o modelo 3D, e um navegador que não roda 3D recebe esse texto do mesmo jeito.

O seu CAD fica seguro quando o modelo está em uma página pública?

Sim, porque um modelo de visualização não é o seu CAD: ele contém triângulos com a precisão da tela, sem árvore de recursos, esboços, parâmetros nem superfícies exatas, e sem nenhum dos detalhes internos que você deixou de fora. Proteja o que importa antes de publicar:

• Simplifique ou remova tudo o que for comercialmente sensível, como um canal interno ou o perfil de uma vedação.
• Nunca envie o arquivo STEP para um visualizador cujos visitantes possam baixar o original.
• Revise em um link protegido por senha antes do lançamento e assine um NDA com quem for manusear o CAD. O Proofscene trabalha assim, e você mantém a propriedade do seu CAD e do seu conteúdo.

Leia também

Leia como o ICM-21 da Tutamen foi do arquivo STEP a uma página de produto no ar, experimente os quatro modelos na página da demo 3D interativa de produto ou assista ao vídeo de 36 segundos de um visualizador 3D de produtos indo para o seu site.