Cómo crear una página de producto 3D y AR con BASE 3D-AR Studio
Para crear una página de producto 3D y AR, añada su producto a BASE 3D-AR Studio como modelo 3D, ya sea subiendo un archivo .GLB o generándolo con IA. Studio asigna a ese modelo su propia página 3D-AR publicada. A continuación, ajuste los materiales, la escena y el diseño de la página, pulse Save y comparta la página con un enlace, un código QR o un código de inserción. En iPhone, iPad y teléfonos Android, la página se abre en AR sin instalar ninguna aplicación.
Puntos clave
- Cada modelo de Studio tiene exactamente una página 3D-AR, así que no tiene que configurar ningún constructor de páginas ni ningún alojamiento web.
- Parta de su propio archivo .GLB (hasta 50 MB) o genere un modelo con seis motores de IA: los seis funcionan con fotos y cuatro de ellos también con texto.
- Sus cambios se quedan en una vista previa privada hasta que pulse Save, y basta un solo Save para actualizar la página publicada.
- La AR se abre desde la página: Apple AR Quick Look con un archivo USDZ en iPhone y iPad, WebXR en Chrome para Android y un código QR en los equipos de escritorio.
- El plan Free incluye 3 modelos activos y 3 modelos nuevos al mes; el plan Pro cuesta 0,50 USD por modelo al mes, con un mínimo de 20 USD.
¿Qué es una página de producto 3D y AR?
Una página de producto 3D y AR es una página web en la que los compradores giran, amplían y examinan un producto como modelo 3D interactivo y, desde el teléfono, lo colocan con realidad aumentada sobre una superficie física de su propio espacio y a escala real.
En Studio, desarrollado por BASE BROS, cada modelo tiene exactamente una página, y al editar el modelo se actualiza esa misma página. Las páginas funcionan en el navegador con el BASE 3D Viewer, un visor WebGPU con paso automático a WebGL2, e incluyen de serie un botón de Augmented Reality.
¿Qué necesita antes de empezar?
- Una cuenta de Studio. El plan Free en studio.basebros.com no requiere tarjeta.
- Un punto de partida para el modelo. Un archivo .GLB de hasta 50 MB, fotos del producto (PNG, JPG, WebP, AVIF o HEIC de hasta 20 MB cada una) o una descripción de texto de entre 10 y 500 caracteres. Los formatos FBX, OBJ y STL no son compatibles, así que conviértalos antes a GLB.
- Opcional: un logotipo en PNG, JPG o WebP de hasta 5 MB.
Para revisar un GLB antes de subirlo, ábralo en Quick View: lo verá en el visor de Studio sin necesidad de subir el archivo.
¿Cómo crear una página de producto 3D y AR paso a paso?
El proceso consta de cuatro pasos y todos se realizan en el navegador:
- Modelar: suba un .GLB o genere un modelo con IA.
- Editar: ajuste los materiales, la iluminación, la cámara y la escala en el Model Editor.
- Publicar: diseñe la página en Page Designer y pulse Save.
- Compartir y AR: envíe el enlace, el código QR o el código de inserción; los visitantes abren la AR desde la página.
Paso 1: Añada su producto como modelo 3D
Si ya dispone de un archivo 3D, súbalo. Haga clic en Upload Model, en la barra superior del visor, o arrastre un archivo .glb al Model Editor. Si sube un solo archivo, se abre en modo Preview para que pueda revisarlo antes de pulsar Confirm & Upload; después, el nuevo modelo se publica de inmediato con su página. Si quiere aligerar el archivo antes de subirlo, consulte cómo preparar modelos 3D para la web y la AR.
Si solo tiene fotos o una idea, utilice el 3D Generator, la pantalla que aparece al abrir Studio. Elija Image to 3D (la opción predeterminada) o Text to 3D y, después, uno de los seis motores de IA: Meshy (el predeterminado), Tripo, Rodin, Hunyuan, TRELLIS o Pixal3D. TRELLIS y Pixal3D solo trabajan con imágenes. Para la generación multivista, Meshy, Tripo y Hunyuan Pro admiten hasta 4 imágenes y Rodin hasta 5, en este orden: frontal, trasera, izquierda y derecha.
Studio prepara automáticamente para la web los modelos generados con IA, con el nivel Balanced de reducción de triángulos, texturas WebP 2K y compresión Draco. Tanto si lo sube como si lo genera, cada modelo nuevo cuenta una sola vez en el cupo de su plan.
Paso 2: Edite los materiales y la escena en tiempo real
El panel derecho del Model Editor tiene tres pestañas:
- Scene: siete ajustes predefinidos integrados (Default, Factory, Studio, Spotlight, Showroom, Cinematic, Outdoor), 20 entornos HDRI, fondos, exposición, luces y sombras suaves.
- Controls: interruptores de rotación automática, zoom y desplazamiento, con límites para acercar y alejar; una Start View guardada, que fija el primer ángulo que ven los visitantes, y Model Scale, el tamaño real en centímetros que se utiliza en AR.
- Material: seleccione una pieza con el cuentagotas y edite Base Color, Roughness, Metalness, Normal, Emissive y Occlusion (cada uno con un mapa de textura opcional) y Alpha (opacidad, modo de fusión y doble cara), todos ellos con su propio botón de restablecimiento.
Los cambios de material se aplican como una capa no destructiva, de modo que el GLB original nunca se modifica. Cinco modos de vista (UV Checker, Solid, Render, Wireframe, Normals) ponen al descubierto problemas de texturas y de malla. Para los archivos pesados, la pestaña Optimize de la ventana More Details de cada modelo reduce los triángulos en torno a un 25, un 50 o un 75 %, con opciones de texturas y de Draco. Nada se hace público hasta que pulse Save en la tarjeta Unsaved changes.
Paso 3: Diseñe y publique la página 3D-AR
Page Designer muestra una vista previa de la página en un marco de portátil y otro de teléfono, uno junto al otro. En la pestaña AR Button se configuran el texto del botón (hasta 40 caracteres), su posición, la tipografía, los colores, el radio de las esquinas y la opacidad, además de la ventana emergente con el código QR que ven los visitantes desde el escritorio. La pestaña Toolbars reúne su logotipo y los botones Photo, Light/Dark, Fullscreen y, de forma opcional, Performance.
Una sola casilla le permite diseñar por separado la versión de escritorio y la móvil o usar el mismo diseño para ambas. También puede aplicar uno de los ocho Page Themes integrados (Minimal, Neon, Elegant, Retro, Glass, Brutal, Azure, Cherry). Para iPhone puede subir su propio archivo .usdz; si no lo hace, Studio genera el USDZ a partir de su GLB.
Pulse Save para publicar: no existe un paso de publicación aparte. Si necesita retirar una página durante un tiempo sin eliminarla, utilice Set Offline en la ventana More Details del modelo. Hasta que elija Set Live, los visitantes verán una pantalla de mantenimiento, y no se borra nada.
Paso 4: Comparta la página y ábrala en AR
El botón Share Page abre la ventana Share & Embed, con el código QR (Download PNG), el enlace público, el código de inserción listo para pegar y el botón Open live page. El código de inserción es un iframe estándar que puede pegar en su propio sitio web; para que la AR funcione dentro de él, se necesita HTTPS.
En el teléfono, el visitante pulsa el botón de AR, cuyo texto predeterminado es View in AR. En iPhone y iPad se abre Apple AR Quick Look con el archivo USDZ, y en Android se abre WebXR en Chrome con sus materiales más recientes. En ambos casos, el seguimiento de superficies coloca el producto sobre una superficie física a escala real, según el tamaño definido en Model Scale. En el escritorio, el botón abre una ventana emergente con un código QR para continuar en el teléfono. Para profundizar, lea cómo la WebAR transforma el comercio electrónico (en inglés).
¿Qué forma de compartir la página le conviene más?
Las cuatro opciones llevan a la misma página publicada, así que puede combinarlas.
| Opción | Qué obtiene | Ideal para |
|---|---|---|
| Enlace público | La URL de la página publicada, que se copia con un clic | Correos electrónicos, chats y redes sociales |
| Código QR | Un PNG que se descarga desde Share & Embed | Envases, materiales impresos y expositores en tienda |
| Código de inserción | Un iframe de la página listo para pegar | Su propia página de producto o tienda online |
| Botón de AR | View in AR en el teléfono y una ventana emergente con código QR en el escritorio | Que los compradores vean el producto en su propio espacio |
¿Cómo se mide el rendimiento de la página?
Analytics 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 para un intervalo personalizado. Quick Stats muestra 12 métricas, entre ellas Total Views, Unique Sessions, QR Scans, AR Activations, 3D Interactions, Avg View Duration y Bounce Rate. Un embudo sigue el recorrido de los visitantes desde la visualización hasta la interacción 3D, la ventana del código QR y la AR, y Export PDF guarda un informe. Consulte la documentación de Analytics.
¿Qué herramientas gratuitas puede usar antes de iniciar sesión?
BASE BROS ofrece dos herramientas gratuitas que no requieren cuenta y nunca suben su archivo:
- Quick View abre al instante un .GLB de hasta 50 MB en el visor de Studio, con el panel Material para inspeccionarlo.
- Model Optimizer muestra un .GLB de hasta 150 MB (50 MB en pantallas de hasta 1024 px de ancho) en cuatro niveles de detalle con el número real de triángulos, convierte las texturas a WebP o PNG en 1K o 2K, añade compresión Draco y le permite descargar el archivo aligerado.
¿Cuánto cuesta BASE 3D-AR Studio?
El precio es por modelo, y un modelo generado con IA cuesta lo mismo que un .GLB subido:
- Free: 0 USD y sin tarjeta. Hasta 3 modelos activos y 3 modelos nuevos al mes, con la marca de agua Powered by BASE en las páginas y los códigos de inserción. Incluye edición, AR, publicación y descargas.
- Pro: 0,50 USD por modelo al mes (precio de lanzamiento), con un mínimo de 20 USD al mes por 40 modelos. Elija una capacidad de entre 40 y 2000 modelos, con facturación mensual por adelantado y sin marca de agua.
- Enterprise: precio y capacidad personalizados, con proyectos 3D a medida desarrollados por el equipo de BASE BROS 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 compradores una aplicación para ver el producto en AR?
No. En iPhone y iPad, el botón de AR abre Apple AR Quick Look con un archivo USDZ, y en Android abre WebXR en Chrome; en ambos casos, el producto se coloca sobre una superficie física a escala real. En un equipo de escritorio, muestra un código QR que abre la página en el teléfono.
¿Qué formato de archivo 3D puedo subir a BASE 3D-AR Studio?
Studio admite archivos .GLB de hasta 50 MB. Los formatos FBX, OBJ y STL no son compatibles, así que convierta esos archivos a GLB en su herramienta 3D antes de subirlos.
¿Puedo crear una página de producto 3D sin un archivo 3D?
Sí. El 3D Generator crea un modelo a partir de una descripción de texto o de fotos del producto con seis motores de IA: Meshy, Tripo, Rodin, Hunyuan, TRELLIS y Pixal3D. El nuevo modelo recibe automáticamente su propia página 3D-AR publicada.
¿Puedo añadir la página 3D-AR a mi tienda online?
Sí. Copie el código de inserción de la ventana Share & Embed y péguelo en su sitio web como un iframe estándar. Para que la AR funcione dentro del código insertado, se necesita HTTPS.
¿Se puede usar BASE 3D-AR Studio gratis?
Sí. El plan Free no requiere tarjeta e incluye 3 modelos activos y 3 modelos nuevos al mes, con la marca de agua Powered by BASE en las páginas y los códigos de inserción. Pro cuesta 0,50 USD por modelo al mes, con un mínimo mensual de 20 USD por 40 modelos.
Conclusión
Con Studio, crear una página de producto 3D y AR se resume en cuatro pasos: añadir un modelo, ajustarlo, pulsar Save y compartir el enlace, el código QR o el código de inserción. Empiece gratis, explore los casos de uso por sector y los proyectos de marcas del BASE BROS Showcase, o póngase en contacto con el equipo de BASE BROS si necesita proyectos 3D a medida o capacidad Enterprise. Para comparar todas las soluciones, lea Soluciones de BASE BROS: visor 3D, configurador, IA y AR.