Como colocar um modelo 3D no site e AR na página do produto

Uma foto mostra o produto de um lado só. Um modelo 3D na página dá para girar, aproximar e ver de todos os ângulos — e, em AR, colocar na própria casa para ver se o sofá cabe. Veja como fazer as duas coisas no ARClip, sem código e sem hospedagem própria.

Passo 1. Monte uma cena com o produto

Crie um projeto e arraste o modelo do produto: GLB, glTF, FBX e OBJ funcionam — o editor converte para GLB sozinho. Não tem modelo? Dá para fazer um a partir de uma foto.

Para uma página da web, uma cena 3D comum funciona melhor: abre na hora, em qualquer aparelho e sem câmera. Deixe a câmera girar em volta do produto e limite a inclinação, para ninguém olhar o produto por baixo.

Passo 2. Adicione variações

Cores, acabamentos e versões são estados de um objeto. Dê ao produto um componente Estados com as variações e um componente Eventos: o passo Definir estado mostra outra variação quando a pessoa toca numa amostra de cor ou no próprio modelo. Tudo sem código.

• Tecido, metal e vidro são montados com nós no Editor de materiais, e você vê o resultado na hora.
• Botões de escolha, amostras de cor, dicas e o preço sobre o 3D são feitos no Editor de UI.
• Se você precisa do preço da configuração escolhida e de um caminho para a compra, a documentação tem uma receita pronta: um script guarda a escolha, mostra o preço e abre a página de compra com o acabamento escolhido — Product configurator.
• A sua própria página também pode trocar a variação e saber qual foi escolhida: o <arclip-viewer> avisa com um evento. Isso pede algumas linhas de script no seu site, e a cena precisa estar incorporada Na página, não Em iframe.

Passo 3. Incorpore a cena no seu site

1. Clique em Publicar e publique o projeto no Navegador.
2. Na mesma janela, escolha ARClip Viewer e clique em Copiar código.
3. Cole o código na página, onde a cena deve ficar.

O código é uma linha <script> e uma tag <arclip-viewer>:

<arclip-viewer
  address="my-chair"
  ar
  style="display:block;width:100%;height:480px"
></arclip-viewer>

O tamanho vem dos estilos da sua página. Animações, lógica e UI funcionam lá dentro: a página ganha uma cena viva, não só um modelo para girar. Serve qualquer site em que você possa colar o seu próprio HTML.

Passo 4. Leve o AR para a página do produto

1. No mesmo projeto, clique em Adicionar espaço e defina o gatilho da cena do novo espaço como Superfície — o produto fica no chão ou na mesa do cômodo de quem compra.
2. Publique o projeto de novo.

A cena incorporada ganha um botão "Ver em AR": no celular ele abre o AR, no computador mostra um QR code para escanear com a câmera do celular. Quem liga o botão é o atributo ar no código — sem ele, não há botão.

Prefere um botão seu na página? Na janela de publicação, escolha o espaço de AR em Abre em: o link e o QR code dali levam direto a ele.

O AR abre direto no navegador do celular, sem app. Funciona em qualquer plano.

O que mais ajuda uma loja

• Imagens e vídeos para o catálogo. Renders, capturas de tela e vídeos direto do editor, além do plugin Foto de produto, que prepara o modelo para uma foto de produto limpa.
• Animação do produto. Abrir uma porta, desmontar o produto, mostrar o mecanismo — com quadros-chave na linha do tempo.
• Analytics. Os contadores de visualizações estão em todos os planos.
• Domínio próprio — nos planos pagos.

O que ainda não tem

• Uma ligação pronta com o carrinho da loja: a compra segue por um link.

Escolhendo entre serviços? Comparamos o ARClip com os mais conhecidos, com honestidade: ARClip ou Sketchfab, ARClip ou Threekit, ARClip ou Zakeke. Spline e Vectary estão na página Comparações.