Cómo añadir 3D y AR a su sitio web sin una aplicación
Para añadir 3D y AR a su sitio web sin una aplicación, publique su producto como página 3D-AR en BASE 3D-AR Studio y pegue su código de inserción en su sitio. Los visitantes giran el modelo y lo amplían directamente en su página. En iPhone y iPad, el botón de AR abre Apple AR Quick Look; en Android, abre WebXR en Chrome; en un equipo de escritorio, muestra un código QR que permite al visitante continuar en su teléfono.
Puntos clave
- Cada modelo de Studio tiene su propia página 3D-AR alojada, así que no necesita desarrollar ni alojar ningún visor por su cuenta.
- Una página y tres formas de compartirla: un enlace público, un código QR y un código de inserción iframe listo para copiar y pegar, todo ello en la ventana Share & Embed.
- La AR se abre en el propio navegador del teléfono o en su visor de AR integrado: Apple AR Quick Look con USDZ en iPhone y iPad, y WebXR en Chrome en Android.
- Para que la AR funcione en un visor insertado, la página debe servirse por HTTPS y el iframe debe conservar los permisos de su atributo allow. El código de inserción de Studio ya incluye esos permisos.
- Defina Model Scale antes de publicar para que el seguimiento de superficies coloque el producto sobre una superficie física a escala real.
¿Qué significa «3D y AR sin aplicación»?
Añadir 3D y AR a un sitio web sin aplicación significa que los visitantes ven un modelo 3D interactivo en su navegador y lo colocan en su propio espacio a través de la cámara del teléfono, sin tener que descargar ni instalar nada antes.
En BASE 3D-AR Studio, desarrollado por BASE BROS, esa experiencia se ofrece en una página 3D-AR alojada. Cada modelo tiene exactamente una página, impulsada por el 3D Viewer de BASE (WebGPU, con WebGL como alternativa automática) y equipada con un botón de Augmented Reality integrado. Para ver una página no hace falta tener cuenta, de modo que cualquier persona con el enlace, el código QR o acceso a la página donde la haya insertado puede abrirla.
¿Cómo se abre la AR en cada dispositivo?
La misma página se adapta automáticamente al dispositivo de cada visitante. Esto es lo que ocurre cuando alguien toca o hace clic en el botón de AR, cuyo texto predeterminado es View in AR:
| Dispositivo | Qué se abre | Archivo utilizado |
|---|---|---|
| iPhone y iPad | Apple AR Quick Look, el visor de AR integrado en iPhone y iPad | Un USDZ que Studio genera a partir de su GLB, o su propio archivo .usdz personalizado |
| Teléfonos Android | WebXR en Chrome, con el respaldo de ARCore | Su GLB, con sus últimas modificaciones de materiales |
| Equipos de escritorio y portátiles | Una ventana con un código QR; al escanearlo, la AR se inicia en el teléfono | Ninguno para la AR: la página muestra la vista 3D interactiva |
En iPhone, iPad y Android, el seguimiento de superficies coloca el producto sobre una superficie física a escala real, y los visitantes lo mueven y lo giran con gestos táctiles. Si se ha definido un tamaño real, la escala se mantiene fija en ese tamaño. Si un navegador de Android no es compatible con WebXR, la página invita al visitante a abrirla en Chrome. Para entender por qué iPhone y Android necesitan archivos distintos, consulte GLB vs USDZ: cómo preparar modelos 3D para web y AR.
¿Cómo añadir 3D y AR a su sitio web paso a paso?
Todo el proceso se realiza en el navegador, y el único código que interviene es un fragmento que usted pega:
Paso 1: Añada su producto a Studio como modelo 3D
Suba un archivo .GLB de hasta 50 MB o cree un modelo a partir de fotos del producto o de una descripción de texto en el 3D Generator. Un modelo recién subido o generado con IA se publica en su propia página 3D-AR sin necesidad de pulsar Save. Encontrará la guía completa para subir, generar y editar modelos en Cómo crear una página de producto 3D y AR con BASE 3D-AR Studio, y consejos para elegir fotos que den buenos resultados en Imagen a 3D: cómo convertir fotos de producto en modelos 3D con IA.
Paso 2: Defina el tamaño real y la vista inicial
En el Model Editor, abra la pestaña Controls y ajuste Model Scale: introduzca el lado más largo del producto en centímetros o utilice el multiplicador. La vista 3D no cambia, pero en AR el modelo aparece exactamente a ese tamaño. En la misma pestaña, Set Start View fija el ángulo que los visitantes ven primero. Si quiere que el visor se integre en su página, elija la muestra No Background en la pestaña Scene para obtener un fondo transparente.
Paso 3: Personalice el botón de AR en Page Designer
En Page Designer, la pestaña AR Button reúne el interruptor Show AR button, que decide si el botón aparece, y los ajustes de su texto (hasta 40 caracteres), posición, tipo de letra, colores, radio de las esquinas y opacidad. El QR Popup Editor define el título, el texto y los cuatro colores de la ventana que ven los visitantes en el escritorio. Puede diseñar por separado la versión de escritorio y la móvil, o mantenerlas idénticas con la casilla Use the same on desktop and mobile. Pulse Save para publicar. En Studio, guardar equivale a publicar, y ningún cambio llega a la página publicada hasta que guarde.
Paso 4: Copie el código de inserción desde Share & Embed
Abra Share & Embed desde el menú de tres puntos del modelo, desde la Library o con Share Page en Page Designer o en More Details. Una sola tarjeta lo reúne todo: el código QR con Download PNG, el enlace público con Copy, el código de inserción listo para pegar con Copy embed code y el botón Open live page.
Paso 5: Pegue el código de inserción en una página servida por HTTPS
Pegue el iframe donde deba aparecer el visor 3D, por ejemplo, en la descripción de un producto o en una sección de su página de destino (landing page). Mantenga el fragmento exactamente como lo proporciona Studio:
- Conserve el atributo allow. Sus permisos camera, gyroscope, accelerometer y xr-spatial-tracking son los que hacen funcionar la AR. Sin ellos, los navegadores bloquean el acceso a los sensores.
- Sirva la página por HTTPS. La AR necesita una conexión segura para acceder a la cámara y nunca funciona por HTTP.
- Conserve loading="lazy". Así, el motor 3D solo se inicia cuando el visor aparece en pantalla al desplazarse por la página.
- Evite una altura fija en píxeles en el móvil. En su lugar, coloque el iframe dentro de un contenedor con una relación de aspecto de 4 / 3 para que se adapte a la pantalla.
Paso 6: Haga pruebas en un iPhone, un teléfono Android y un equipo de escritorio
Abra su página en un iPhone o iPad y toque el botón de AR para comprobar Quick Look. En Android, ábrala en Chrome para comprobar WebXR. En un equipo de escritorio, haga clic en el botón y escanee el código QR. En todos los casos, compruebe que el producto aparece con el tamaño que definió en Model Scale.
Enlace, código QR o código de inserción: ¿cuál conviene usar?
Los tres abren la misma página publicada, así que puede combinarlos libremente:
| Dónde está su público | Mejor opción | Por qué |
|---|---|---|
| En su sitio web | Código de inserción | El visor 3D y el botón de AR se integran en su propia página |
| En un correo electrónico, un chat o una publicación en redes sociales | Enlace público | Una sola URL abre la página completa en 3D, con AR en los teléfonos |
| En envases, material impreso o en el punto de venta | Código QR | Al escanearlo, la página se abre en el teléfono, lista para la AR |
| En un equipo de escritorio, navegando por su sitio | Botón de AR con ventana de código QR | El visitante de escritorio escanea el código y continúa en AR en su teléfono |
Como el visor insertado muestra la página alojada, cada vez que pulsa Save en Studio su sitio también se actualiza, sin tener que volver a pegar nada. En los modelos que haya subido usted, Change Model en More Details sustituye el .GLB y conserva la página, el enlace y la analítica.
¿Cómo se mantiene rápido el visor 3D en su sitio?
Un modelo más ligero carga más rápido y se abre antes en AR, sobre todo en los teléfonos. Studio se encarga de buena parte del trabajo:
- Los modelos de IA ya salen optimizados. Justo después de la generación, Studio aplica automáticamente la reducción de triángulos Balanced, texturas WebP a 2K y compresión Draco.
- Optimice el archivo publicado. More Details > Optimize reduce los triángulos en torno a un 25, un 50 o un 75 % y ofrece WebP, PNG o Keep para las texturas, un tamaño de textura de 1K o 2K y compresión Draco. Antes de pulsar Apply verá el tamaño final medido. Revert restaura la copia de seguridad, y Studio vuelve a generar automáticamente el USDZ para iPhone.
- Aligere los archivos antes de subirlos. El Model Optimizer gratuito aligera un .GLB en su navegador, sin necesidad de cuenta y sin subir el archivo.
Encontrará una lista de comprobación completa sobre triángulos, texturas y Draco en cómo preparar modelos 3D para web y AR.
¿Cómo se mide la interacción con el 3D y la AR?
Analytics, en Studio, ofrece informes de todas las páginas o de una sola, para todo el historial (All Time), los últimos 30 días, 7 días o 24 horas, o un intervalo personalizado (Custom). Sus 12 Quick Stats incluyen Total Views, Unique Sessions, QR Scans, AR Activations, 3D Interactions, Avg View Duration y Bounce Rate. Distribution desglosa las visitas por sistema operativo, dispositivo, navegador y ubicación, Top Referrers muestra de dónde proceden los visitantes y Export PDF genera el informe en PDF. Consulte la documentación de Analytics.
¿Cuánto cuesta?
BASE 3D-AR Studio tiene un precio por modelo, y la edición, la AR, la publicación y el uso compartido por enlace, código QR o código de inserción están incluidos en todos los planes:
- Free: 0 USD, sin tarjeta, con hasta 3 modelos activos y 3 modelos nuevos al mes. Las páginas y los visores insertados muestran una pequeña marca de agua Powered by BASE.
- Pro: 0,50 USD por modelo al mes con el precio de lanzamiento, con un mínimo de 40 modelos (20 USD al mes) y sin marca de agua.
- Enterprise: precio y capacidad personalizados, proyectos 3D a medida y soporte dedicado.
En la página de precios verá el precio mensual según el número de modelos que necesite.
Preguntas frecuentes
¿Necesitan los visitantes una aplicación para ver un producto en AR?
No. En iPhone y iPad, el botón de AR abre Apple AR Quick Look, que viene integrado en el dispositivo, y en Android abre WebXR en Chrome. En un equipo de escritorio, el botón muestra un código QR para que el visitante pueda continuar en su teléfono.
¿Funciona la AR dentro de un iframe insertado?
Sí, siempre que la página que contiene el iframe se sirva por HTTPS y el iframe conserve su atributo allow con camera, xr-spatial-tracking, accelerometer y gyroscope. El código de inserción de Share & Embed ya incluye estos permisos.
¿Por qué el botón de AR no abre la AR en mi sitio web?
Compruebe que su página utiliza HTTPS, que el atributo allow sigue en el iframe, que Show AR button está activado en Page Designer y que la página está en estado Live. En un equipo de escritorio es normal que el botón muestre un código QR, y en Android la página necesita un navegador compatible con WebXR, como Chrome.
¿Necesito programar para insertar un modelo 3D en mi sitio web?
No. Studio genera el código de inserción por usted. Cópielo desde la ventana Share & Embed y péguelo en su página: no tiene que compilar nada ni instalar dependencias.
¿Los cambios en Studio se reflejan en el visor insertado en mi sitio web?
Sí. El visor insertado muestra su página 3D-AR alojada, de modo que, cuando pulsa Save en Studio, su sitio muestra la página actualizada sin necesidad de un nuevo código de inserción.
¿El plan Free muestra una marca de agua en el visor insertado?
Sí. En el plan Free, el visor insertado muestra la misma página pública, por lo que la pequeña marca de agua Powered by BASE también aparece en él. Las páginas de los planes Pro y Enterprise no tienen marca de agua.
Conclusión
Añadir 3D y AR a su sitio web se reduce a una página alojada y un fragmento de código: cree el modelo en Studio, defina su tamaño real, personalice el botón de AR, pulse Save y pegue el código de inserción en una página HTTPS. Los visitantes obtienen una vista 3D interactiva en cualquier pantalla y AR en sus teléfonos, sin instalar ninguna aplicación. Empiece gratis, lea la documentación sobre el código de inserción, explore los proyectos de marcas en el BASE BROS Showcase o póngase en contacto con el equipo de BASE BROS si necesita proyectos 3D a medida o capacidad Enterprise.