Cargando
Demos en vivo

Cómo poner un modelo 3D en una página web

Para poner un modelo 3D en una página web, expórtalo como archivo .glb y muéstralo con un visor que funcione en el navegador: <model-viewer>, de Google y gratuito, se pone con una línea de HTML; Spline te da un enlace o un trozo de código; y con three.js construyes una escena entera a su alrededor. Que el archivo pese poco —unos megas, no cincuenta— y que los textos de la página estén en el HTML, fuera del 3D.

Actualizado el

Aquí tienes qué archivo exportar, las cuatro formas de mostrarlo de menos a más trabajo, cuánto puede pesar y qué cambia para Google. Si lo que quieres es una página entera alrededor del modelo y no un visor en una caja, eso es una web inmersiva, y de eso va la última parte.

El archivo: glTF, y su versión de un solo archivo, GLB

El formato del 3D en la web es glTF, que mantiene el Khronos Group —el mismo consorcio que está detrás de WebGL— para transmitir y cargar escenas y modelos 3D. Tiene dos formas: .gltf, un archivo de texto con las texturas al lado, y .glb, lo mismo empaquetado en un solo archivo binario. Para una web, usa .glb: un archivo que subir y una sola petición al cargar.

Blender lo exporta directamente (Archivo → Exportar → glTF 2.0), y casi todos los programas de 3D también. Si tu modelo está en otro formato —.obj, .fbx, .stl—, ábrelo en Blender y vuelve a exportarlo como .glb. En el iPhone, la realidad aumentada usa un formato propio de Apple, USDZ; más abajo verás que no siempre tienes que hacerlo tú.

Forma 1: <model-viewer>, una línea de HTML

<model-viewer>, de Google, es un componente web gratuito y de código abierto hecho sobre three.js. Cargas su script y escribes una etiqueta con tu archivo: «<model-viewer src="producto.glb" camera-controls auto-rotate ar>». Con eso tienes un modelo que el visitante gira con el dedo o el ratón, que da vueltas solo mientras nadie lo toca y que en el móvil se abre en realidad aumentada.

Para la realidad aumentada prueba, por orden, WebXR, Scene Viewer de Google en Android y Quick Look de Apple en el iPhone; para Quick Look puede generar él mismo el USDZ a partir de tu GLB, o le das uno con «ios-src». También tiene «poster», una imagen que se ve mientras carga el modelo, y «loading="lazy"», para que un modelo que está más abajo en la página solo se cargue cuando el visitante se acerca.

Es lo indicado para una ficha de producto con un objeto que mirar por todos lados. Es también lo que usa Shopify para enseñar modelos 3D (GLB o USDZ) en las plantillas que lo admiten. Para lo que no está pensado es para una escena: una cámara que viaja con el scroll, una luz que cambia, varios objetos que se mueven.

Forma 2: Spline, si diseñas el modelo allí

Spline es un programa de diseño 3D que funciona en el navegador. Su documentación da tres formas de llevar una escena a una web: una URL pública que puedes incrustar, el Spline Viewer y código —para JavaScript sin más, three.js, React o Next.js—. Las animaciones y eventos que montes en Spline van con ella.

Es lo más rápido si diseñas la escena desde cero y te gusta trabajar de forma visual. Mira el peso antes de publicar: una escena de Spline carga su propio motor además del modelo, y lo que decide si se queda es cómo va en un móvil de gama media.

Forma 3: three.js, para una escena tuya

three.js es la librería gratuita con la que se hacen la mayoría de las webs 3D. Su GLTFLoader lee tu .glb, y a partir de ahí lo decides todo: dónde está la cámara, cómo cae la luz, qué se mueve cuando el visitante baja. Esa libertad es el trabajo: un visor es una tarde; una escena que aguante en el móvil y con textos que Google pueda leer son semanas. Hacer una web 3D por tu cuenta cuenta lo que supone.

Cuánto puede pesar el modelo

No hay un límite único, pero sí algunos fijos: Cloudflare Pages, por ejemplo, no sirve un archivo de más de 25 MiB. Mucho antes de eso, un modelo pesado es una página que se queda en blanco en un móvil con poca cobertura.

Tres cosas son las que más cambian. Menos polígonos: un modelo pensado para imprimir o para render suele tener muchos más de los que una pantalla puede enseñar. Texturas más pequeñas: 2048 píxeles suelen bastar, y 4096 rara vez hacen falta. Compresión: glTF Transform comprime la geometría con Draco o meshopt y también las texturas, y three.js y <model-viewer> leen el resultado. Pruébalo en un móvil de gama media de verdad, no en tu ordenador.

Qué ve Google

Google no indexa lo que se dibuja dentro de un canvas, y un modelo 3D se dibuja dentro de un canvas. El nombre del producto, su descripción, el precio y el botón tienen que ser HTML normal junto al modelo, no palabras escritas encima de él. Dale también al visor un texto alternativo —<model-viewer> admite «alt»— y una imagen de póster, para que la página se entienda antes de que llegue el 3D. El resto está en velocidad, SEO y 3D.

Forma 4: una página hecha alrededor del modelo

Un visor mete el modelo en una caja. Algunos productos merecen la página entera: el objeto no sale de la pantalla mientras el scroll cuenta su historia, se eleva en la oscuridad, se separa en sus piezas, cambia de color. Eso es el kit Product, y puedes abrir su demo en el móvil.

En el asistente subes tu propio .glb, de hasta 25 MB, y ves tu web con él antes de pagar. La escena encuentra las piezas que se mueven por su nombre en el archivo, lee modelos comprimidos con Draco o meshopt y, si el tuyo no carga, ocupa su lugar el frasco de cristal de la demo, grabado con el nombre de tu producto, para que la página nunca quede vacía. Cuesta 500 €, en un solo pago. Si lo que quieres no encaja en un kit, una web 3D a medida parte de 750 €.

Preguntas

¿En qué formato tiene que estar un modelo 3D para una web?
En glTF, como un solo archivo .glb. Es el formato que las librerías 3D de los navegadores están hechas para cargar. Para la realidad aumentada en el iPhone hace falta además USDZ, que <model-viewer> puede generar a partir del GLB.
¿Puedo poner un modelo 3D en mi web gratis?
Sí. <model-viewer> y three.js son gratuitos y de código abierto, y Blender, para exportar el modelo, también. Lo que cuesta es el tiempo: el modelo en sí y que la página aguante en el móvil. Las opciones están en página web 3D gratis.
¿Cómo inserto un modelo 3D en HTML?
Carga el script de <model-viewer> y escribe «<model-viewer src="modelo.glb" camera-controls alt="qué es">». El archivo tiene que estar en tu propia web o en un servidor que permita cargarlo desde la tuya.
¿Un modelo 3D hace más lenta mi web?
Puede. Comprímelo, usa texturas moderadas, ponle una imagen de póster y que cargue en diferido si está por debajo de la primera pantalla. El texto de la página nunca debería esperar al modelo.
¿Se puede ver el modelo en realidad aumentada?
En los móviles compatibles, sí: <model-viewer> con el atributo «ar» abre Scene Viewer en Android y Quick Look en el iPhone, y coloca el objeto en la habitación a través de la cámara. Su propia FAQ avisa de que no funciona en todas partes: tómalo como un extra.