Cómo insertar el visor WebAR de Vectary en Webflow

El visor web de Vectary te ayuda a integrar 3D y AR en tu sitio web de Webflow de forma tan sencilla como insertar un vídeo de YouTube. Webflow es una herramienta online increíble para que diseñadores y agencias creen sus webs sin código. ¿Quieres ver lo bien que puede quedar el visor WebAR de Vectary en un sitio de Webflow? Solo tienes que echar un vistazo a nuestra página de inicio.

¿Qué es WebAR?

WebAR es una tecnología que permite a los visitantes disfrutar de una experiencia de realidad aumentada directamente desde la web, sin necesidad de descargar una aplicación externa. El visor WebAR de Vectary es compatible tanto con iPhone como con Android.

Cómo insertar tu diseño 3D en tu web de Webflow

1. Importa tu modelo 3D en Vectary Studio o créalo desde cero.
2. Rota, desplaza o amplía el modelo 3D y ajusta la vista. Usa interacciones y animaciones. El modo de vista previa te muestra cómo quedará en el visor WebAR.
3. Haz clic en la pestaña Share y activa la opción de compartir.
4. Copia el código de inserción.
5. Ve al editor web de Webflow. Haz clic en el icono “+” para añadir un elemento Embed. Lo encontrarás en Components. Arrastra y suelta el elemento Embed dentro del contenedor.
6. Pega el código de tu visor Vectary en el editor de código de Webflow.
7. Una vez que publiques tu web, aparecerá justo donde lo hayas pegado.

Ejemplo de visor WebAR en Webflow

Tu visor puede tener este aspecto.

Prueba del código iframe de WebAR

¿No tienes tiempo para generar tu código WebAR? Prueba este iframe en tu sitio web:<iframe src="https://app.vectary.com/p/6JUjnpxVLsmPmDGW0tpVSQ" frameborder="0" width="100%" height="480"></iframe>

El visor WebAR de Vectary se puede personalizar con diferentes animaciones y comportamientos. También puedes crear una app web interactiva y personalizada con la API del visor. Imagina una tienda online donde tus visitantes puedan elegir entre varias opciones de color y forma dentro de un mismo visor.

Cómo hacer cambios en tu visor WebAR de Vectary

Imagina que quieres cambiar el color, la vista o la forma completa de tu modelo 3D. El editor de Vectary funciona como un CMS 3D/AR instantáneo para tu visor web:

1. Abre tu proyecto 3D en Vectary
2. Realiza los cambios
3. Haz clic en la pestaña Share y después en Synchronize changes; no hace falta reemplazar el código. El visor 3D se actualizará automáticamente en todas tus webs.

Cómo añadir un icono de AR a tu visor en Vectary

1. Ve a Vectary Studio
2. Pulsa Esc para acceder a la configuración de la escena
3. Haz clic en Advanced settings y elige Augmented Reality. Puedes personalizar el icono y su posición.

Ten en cuenta que las interacciones en AR no están disponibles actualmente. Sin embargo, la vista previa de AR puede mostrar la variante de producto que los visitantes hayan configurado en el visor 3D.