Como incorporar o visualizador WebAR da Vectary no Webflow

O visualizador web da Vectary ajuda-te a integrar 3D e AR no teu site Webflow com a mesma facilidade com que incorporas um vídeo do YouTube. O Webflow é uma ferramenta online incrível para designers e agências criarem os seus sites sem programar. Queres ver como o visualizador WebAR da Vectary pode ficar bem num site Webflow? Espreita a nossa página inicial.

O que é o WebAR?

O WebAR é uma tecnologia que permite aos visitantes ter uma experiência de Realidade Aumentada a partir da web, sem necessidade de descarregar uma aplicação externa. O visualizador WebAR da Vectary suporta isto tanto em iPhones como em Androids.

Como incorporar o teu design 3D num site Webflow

1. Importa o teu modelo 3D para o Vectary Studio ou cria o teu modelo do zero.
2. Roda, move ou faz zoom no modelo 3D e define a vista. Usa interações e animações. O modo Preview mostra como vai ficar no visualizador WebAR.
3. Clica no separador Share e ativa a opção de partilha.
4. Copia o código de incorporação.
5. Acede ao teu editor web do Webflow. Clica no ícone “+” para adicionares um elemento Embed. Podes encontrá-lo em Components. Arrasta e larga o elemento Embed no contentor.
6. Cola o teu código do Vectary Viewer no editor de código do Webflow.
7. Assim que publicares o teu site, ele vai aparecer exatamente onde o colaste.

Exemplo de visualizador WebAR no Webflow

O teu visualizador pode ficar assim.

Testar o código iframe do WebAR

Não tens tempo para gerar o teu código WebAR? Testa este iframe no teu site:<iframe src="https://app.vectary.com/p/6JUjnpxVLsmPmDGW0tpVSQ" frameborder="0" width="100%" height="480"></iframe>

O visualizador WebAR da Vectary pode ser personalizado com várias animações e comportamentos. Também podes criar uma aplicação web interativa personalizada com a API do visualizador. Imagina uma loja online onde os teus visitantes podem escolher entre várias variações de cor e forma num único visualizador.

Como fazer alterações no teu visualizador WebAR da Vectary

Imagina que queres alterar a cor, a vista ou a forma completa do teu modelo 3D. O editor da Vectary funciona como um CMS de 3D/AR instantâneo para o teu visualizador web:

1. Abre o teu projeto 3D na Vectary
2. Faz as alterações
3. Clica no separador Share e clica em Sincronizar alterações – não precisas de substituir o código. O visualizador 3D será atualizado automaticamente em todos os teus sites.

Como adicionar um ícone de AR ao teu visualizador na Vectary

1. Acede ao Vectary Studio
2. Prime esc para acederes às definições de cena
3. Clica em Advanced settings e escolhe Augmented Reality. Podes personalizar o ícone e a sua posição.

Nota: as interações em AR não estão disponíveis de momento. Contudo, a pré-visualização em AR pode mostrar a variação de produto que os teus visitantes definiram no visualizador 3D.