La guía completa para la inserción web 3D y cómo usarla

Una de las características más importantes de Vectary es la incrustación web AR. Aquí hay una descripción detallada de qué es la incrustación 3D WebAR y cómo usarla para lograr sus objetivos comerciales.

La guía completa para la inserción web 3D y cómo usarla
La guía completa para la inserción web 3D y cómo usarla

Una de las características más importantes de Vectary es la incrustación web AR. Aquí hay una descripción detallada de qué es la incrustación 3D WebAR y cómo usarla para lograr sus objetivos comerciales.

Si no habla ningún lenguaje de programación, es posible que la incrustación web aún no sea parte de su vocabulario, pero eso está a punto de cambiar. Web incrustado, o archivo incrustado, es cualquier tipo de medio que simplemente puede insertar en su sitio web pegando una pieza de código HTML o secuencia de comandos.

Ya sea que desee que la publicación de su blog sea más interesante, agregue un elemento interactivo a su sitio web, haga que sus clientes experimenten productos en AR o resalte una parte de un artículo con un elemento de diseño de las redes sociales populares, puede brindarle muchos beneficios. valor para su sitio web y los clientes que lo visitan.

En estos días, los usuarios de Internet se encuentran con incrustaciones web todos los días. Estos vienen en forma de publicaciones en redes sociales, en sitios web de noticias y medios, y muchos otros. YouTube es probablemente una de las incrustaciones más reconocidas. Si desea incluir un video en la publicación de su blog, la mayoría de las veces, será un fragmento de código, que se puede encontrar en cualquier video de YouTube, y simplemente se ha copiado y pegado. Los proyectos 3D también se están moviendo en esta dirección.

Un ejemplo de inserción web 3D y AR

La siguiente imagen es un visor 3D interactivo de Vectary: se llama WebAR porque admite tanto el elemento web 3D como la experiencia de Realidad Aumentada. Prueba a girarlo o haz clic en el icono de AR para verlo en Realidad Aumentada:

Cómo preparar WebAR incrustado en Vectary

Paso 1: crea un objeto 3D o una escena 3D

Para incrustar un objeto en un blog o sitio web, debe planificar dónde desea que aparezca el objeto incrustado. En base a eso, puede preparar la inserción para que encaje naturalmente en el entorno del sitio web. Hay varias formas de crear un proyecto 3D compatible con la web.

Importa tu propio modelo 3D

Si ya tiene experiencia en el modelado 3D, probablemente tendrá algunos modelos y archivos para iniciar su inserción web 3D. Simplemente impórtelos a Vectary y espere hasta que se carguen. Actualmente, admitimos más de 60 formatos de archivo, incluidos: .obj, .dae, .stl, .gltf, .glb, .jpg, .png, .svg. Consulte la lista completa de todos los formatos admitidos aquí .

Use la biblioteca y acceda a repositorios 3D o colecciones prefabricadas

Para los principiantes en el modelado 3D, creamos un conjunto de colecciones seleccionadas que consta de activos, materiales y entornos. Una vez que lo haya encontrado, arrástrelo y suéltelo en la escena y continúe generando la inserción.

Crear un proyecto desde cero

Para usuarios avanzados, Vectary ofrece un modelado de malla intuitivo en el modo de edición. De manera similar a la importación de proyectos, puede crearlo desde cero o editar uno existente que haya importado o colocado en la escena desde la biblioteca. Cuando haya terminado con el modelado 3D, continúe generando su código de inserción.

Paso 2: Cómo generar un código de inserción web 3D

Una vez que esté listo y tenga su proyecto y objeto 3D preparados, crear un código de inserción WebAR es realmente fácil y directo. Nuestro software hace todo el trabajo por usted con un simple clic en el botón Compartir y cambie Compartir a la web. Una vez que esto finaliza, se genera un código iframe y está listo para ser utilizado en su código HTML.

Configuración de incrustación web 3D de Vectary

Tiene la opción de personalizar el resultado de su inserción en el menú avanzado:

Calidad de textura

El parámetro más importante que afecta la inserción es la calidad de la textura. Las texturas más detalladas tardan más en generarse, ya que son muy detalladas. También pueden tener un rendimiento más lento cuando se implementan en el sitio web. Por otro lado, las texturas de menor resolución son más rápidas de cargar. Puede reducir individualmente la calidad de cada textura utilizada en sus materiales.

Realidad aumentada

Agregue Realidad Aumentada desde el menú Avanzado en el panel de propiedades de su Proyecto en Vectary Studio. Los archivos necesarios para diferentes plataformas (Android, iOS) se generan automáticamente en segundo plano.

Vista central de la cámara

Para centrar la cámara en su objeto principal, primero, asegúrese de haber ingresado a la cámara (indicado con un ícono "+" al lado del nombre de la cámara). Luego haga clic en el objeto (o grupo de objetos) y haga clic en el icono de ajuste de vista en la barra de herramientas en la parte inferior (tecla de acceso directo "a"). Esto centrará el punto de pivote de la cámara en los objetos seleccionados (si no se seleccionó nada, centrará la cámara en el centro de la escena). Desplácese para acercar/alejar, desplazarse, rotar para ajustar su vista.

Vista de cámara limitada

Agregue una cámara desde la barra de herramientas a su escena. Dado que puede tener varias cámaras en su proyecto, debe "ingresar" la cámara para usar la configuración de la cámara en el proyecto compartido. Seleccione su cámara y modifique la configuración en el panel de propiedades a la derecha. Habilite los límites de visualización (alternar) para restringir los ángulos de visualización , la panorámica y el zoom. Haga clic en Vista previa para probar su nueva configuración. Para centrar la cámaraen su objeto principal, primero, asegúrese de haber ingresado a la cámara (indicado con un ícono "+" al lado del nombre de la cámara). Luego haga clic en el objeto (o grupo de objetos) y haga clic en el icono de ajuste de vista en la barra de herramientas en la parte inferior (tecla de acceso directo "a"). Esto centrará el punto de pivote de la cámara en los objetos seleccionados (si no se seleccionó nada, centrará la cámara en el centro de la escena). Desplácese para acercar/alejar, desplazarse, rotar para ajustar su vista.

Efectos (solo web)

Si tiene activado el Plano de tierra o una luz que proyecta sombras, es posible que desee agregar Sombras suaves de la lista de efectos. Otro efecto similar que da sombras/profundidad a sus objetos 3D es la oclusión ambiental, que se calcula en tiempo real igual que los reflejos.

Paso 3: Vista previa de la inserción de WebAR

A veces es bueno obtener una vista previa de su visor WebAR antes de incrustarlo, o simplemente desea compartir la vista previa de Realidad Aumentada con sus colegas y clientes. Vaya a Compartir, haga clic en Compartir en la web, copie el enlace directo y ábralo en una nueva pestaña.

Paso 4: coloque la inserción web en el código de su sitio web

Simplemente copie y pegue la inserción web en su sitio desde la sección Compartir. El principio es el mismo que el código de inserción de YouTube. También puede incrustar archivos en servicios como Squarespace , Wix , Shopify , Weebly , Webflow o similares.

https://www.vectary.com/uploads/media-library/embeding.jpg-0u5XFVh92xgWzs0qWjbuvb.jpeg

Cómo editar el código de inserción web 3D

Los usuarios familiarizados con el código HTML pueden editar el código iframe generado. Por ahora, solo se pueden cambiar los parámetros básicos, como el ancho, la altura y el marco del borde. En el futuro, habrá más personalización y opciones editables disponibles en el código de inserción. Estos serán accesibles sin la necesidad de ninguna habilidad de codificación. Entonces, por ejemplo, si desea cambiar el tamaño y hacer que su inserción sea más pequeña para que se ajuste bien a su sitio web, cambie los atributos "ancho" y "alto" para que se ajusten a sus necesidades. Recomendamos mantener framerborder en el valor "0" para que el objeto se mezcle bien con el fondo.

Paso 4: Cómo editar el visor 3D en tu sitio web

Los objetos incrustados en el sitio web son los resultados finales de los diseños 3D creados en el editor Vectary. Sin embargo, Vectary va un paso más allá y le permite editar proyectos WebAR ya integrados y cambiarlos en tiempo real. Abra el proyecto en Vectary, realice sus cambios y actualícelo junto a la configuración Compartir en la web. Todos los cambios deben aplicarse al instante.

Preguntas más frecuentes

¿Cuánto cuesta usar la inserción web Vectary 3D?

Las pruebas de WebAR ahora son parte del plan gratuito con un número limitado de visitas. Consulte nuestros precios para obtener más información.