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

Una de las funciones más potentes de Vectary es la incrustación de AR en la web. A continuación, analizamos en detalle qué es la incrustación 3D de WebAR y cómo usarla para alcanzar tus objetivos de negocio.

Aunque no domines ningún lenguaje de programación, es posible que la incrustación web aún no forme parte de tu vocabulario, pero eso está a punto de cambiar. Un elemento web incrustado, o archivo integrado, es cualquier tipo de contenido multimedia que puedes insertar en tu web con solo pegar un fragmento de código HTML o script.

Ya sea para hacer más interesante un artículo del blog, añadir un elemento interactivo a tu web, permitir que tus clientes experimenten con tus productos en AR o destacar una parte de un artículo con un elemento de diseño de redes sociales, esta función puede aportar un gran valor a tu web y a quienes la visitan.

Hoy en día, los usuarios de internet se encuentran con elementos incrustados a diario. Estos aparecen en publicaciones de redes sociales, en webs de noticias y medios, y en muchos otros sitios. YouTube es probablemente uno de los ejemplos de incrustación más conocidos: si quieres incluir un vídeo en un artículo de tu blog, lo más habitual es que utilices un fragmento de código que se encuentra debajo de cualquier vídeo de YouTube y que simplemente has copiado y pegado. Los proyectos 3D también están avanzando en esta dirección.

Un ejemplo de incrustación web en 3D y AR

La imagen de abajo es un visor 3D interactivo de Vectary; lo llamamos 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 una incrustación de WebAR en Vectary

Paso 1: Crea un objeto o escena 3D

Para incrustar un objeto en un blog o sitio web, primero debes planificar dónde quieres que aparezca. Así podrás preparar la incrustación para que se integre de forma natural con el diseño de la página. Hay varias formas de crear un proyecto 3D optimizado para la web.

Importa tu propio modelo 3D

Si ya tienes experiencia en el modelado 3D, probablemente ya dispongas de algunos modelos y archivos para empezar tu incrustación web en 3D. Solo tienes que importarlos a Vectary y esperar a que se carguen. Actualmente admitimos más de 60 formatos de archivo, como .obj, .dae, .stl, .gltf, .glb, .jpg, .png y .svg; puedes consultar la lista completa de formatos compatibles aquí.

Usa la biblioteca para acceder a repositorios 3D o a colecciones prediseñadas

Para quienes se inician en el modelado 3D, hemos creado una serie de colecciones seleccionadas compuestas por recursos, materiales y entornos. Cuando encuentres el tuyo, arrástralo y suéltalo en la escena y continúa con la generación del código de incrustación.

Crea un proyecto desde cero

Para usuarios avanzados, Vectary ofrece un modelado de malla intuitivo en el modo de edición. Al igual que al importar proyectos, puedes crearlo desde cero o editar uno ya existente que hayas importado o colocado en la escena desde la biblioteca. Cuando termines con el modelado 3D, continúa con la generación del código de incrustación.

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

Una vez que tengas listo tu proyecto y tu objeto 3D, crear un código de incrustación de WebAR es un proceso facilísimo. Nuestro software hace todo el trabajo por ti: solo tienes que hacer clic en el botón Share y activar la opción Share to web. Al terminar, se generará un código iframe listo para usar en tu código HTML.

Ajustes de incrustación web 3D de Vectary

Puedes personalizar el resultado de la incrustación en el menú avanzado:

Calidad de las texturas

El parámetro más importante que afecta a la incrustación es la calidad de las texturas. Las texturas con un nivel de detalle alto tardan más en generarse y pueden ralentizar el rendimiento de la web. En cambio, las texturas con menor resolución se cargan más rápido. Puedes reducir la calidad de forma individual para cada textura que utilices en tus materiales.

Realidad aumentada

Añade la realidad aumentada desde el menú Advanced en el panel de propiedades del proyecto de Vectary Studio. Los archivos necesarios para las distintas plataformas (Android, iOS) se generan automáticamente en segundo plano.

Centrar vista de cámara

Para centrar la cámara en tu objeto principal, primero asegúrate de haber accedido a la cámara (indicada con un icono “+” al lado del nombre de la cámara). Después, haz clic en el objeto (o grupo de objetos) y pulsa en el icono de ajustar vista en la barra de herramientas de la parte inferior (atajo de teclado “a”). Esto centrará el punto de pivote de la cámara en los objetos seleccionados (si no has seleccionado nada, centrará la cámara en el centro de la escena). Haz scroll para acercar/alejar, encuadrar y rotar para ajustar la vista.

Vista de cámara limitada

Añade una cámara a tu escena desde la barra de herramientas. Como puedes tener varias cámaras en tu proyecto, tendrás que “entrar” en la cámara para poder utilizar sus ajustes en el proyecto compartido. Selecciona la cámara y modifica su configuración en el panel de propiedades de la derecha. Activa la opción View Limits (interruptor) para restringir los ángulos de visión, el encuadre y el zoom. Haz clic en Preview para probar la nueva configuración. Para centrar la cámara en tu objeto principal, primero asegúrate de haber accedido a la cámara (indicada con un icono “+” al lado del nombre de la cámara). Después, haz clic en el objeto (o grupo de objetos) y pulsa en el icono de ajustar vista en la barra de herramientas de la parte inferior (atajo de teclado “a”). Esto centrará el punto de pivote de la cámara en los objetos seleccionados (si no has seleccionado nada, centrará la cámara en el centro de la escena). Haz scroll para acercar/alejar, encuadrar y rotar para ajustar la vista.

Efectos (solo web)

Si tienes activado el Ground plane o una luz que proyecta sombras, quizás quieras añadir Soft Shadows desde la lista de efectos. Otro efecto similar que aporta sombras y profundidad a tus objetos 3D es Ambient Occlusion, que se calcula en tiempo real al igual que Reflections

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

A veces conviene previsualizar el visor de WebAR antes de incrustarlo, o puede que solo quieras compartir la vista previa de realidad aumentada con tus compañeros y clientes. Ve a Share, haz clic en Share to web, copia el enlace directo y ábrelo en una pestaña nueva.

Paso 4: Coloca la incrustación web en el código de tu sitio web

Solo tienes que copiar y pegar el código de incrustación web en tu sitio desde la sección Share. El funcionamiento es el mismo que el del código de inserción de YouTube. También puedes incrustar archivos en servicios como Squarespace, Wix, Shopify, Weebly, plataformas similares.

Cómo editar el código de incrustació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 (width), el alto (height) y el borde (border frame). En el futuro, habrá más opciones de personalización y edición disponibles en el código de inserción. Podrás acceder a ellas sin necesidad de tener conocimientos de programación. Así, por ejemplo, si quieres cambiar el tamaño y hacer que tu inserción sea más pequeña para que encaje bien en tu sitio web, cambia los atributos “width” y “height” para adaptarlos a tus necesidades. Recomendamos mantener framerborder con el valor “0” para que el objeto se integre a la perfección con el fondo.

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

Los objetos insertados en el sitio web son el resultado final de los diseños 3D creados en el editor de Vectary. Sin embargo, Vectary va un paso más allá y te permite editar proyectos WebAR ya insertados y modificarlos en tiempo real. Abre el proyecto en Vectary, haz tus cambios y actualízalo junto a los ajustes de Share to web. Todos los cambios se aplicarán al instante.

FAQ

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

Las pruebas de WebAR ahora forman parte del plan PRO con un número limitado de visualizaciones. Consulta nuestras tarifas para saber más.