Cómo se hace una web 3D, del modelo a la página legal

La escena: un modelo, sus materiales y su luz

Todo lo que sale en la escena tiene un origen. Un producto se modela en un programa 3D como Blender, que es gratuito y de código abierto, o se encarga a un artista 3D; una habitación o un aparato también pueden construirse directamente en código. En la web, los modelos suelen ir en glTF, el formato que el Khronos Group pensó para cargar escenas 3D de forma eficiente.

Un modelo hecho para un render o para imprimir suele pesar muchísimo para una página. Hay que dejarlo en menos polígonos, con texturas del tamaño de una pantalla y, a menudo, con la geometría comprimida. Después, cada superficie necesita su material —cómo coge la luz el vidrio, el metal o el papel— y la escena, sus luces. Aquí no hay nada renderizado de antemano, como en una película: la tarjeta gráfica de quien visita la web dibuja cada fotograma, y cada luz y cada reflejo le cuestan algo a su aparato.

En los kits. Product acepta tu propio modelo en un archivo .glb y encuentra sus piezas por su nombre, para que los capítulos que las mueven funcionen con el tuyo; también lee archivos comprimidos, y sus descompresores solo se descargan cuando un archivo los pide. Si un modelo no carga, ocupa su sitio el frasco del kit. App construye en código su móvil y su portátil, con las proporciones de un móvil real y sin el logo de ninguna marca, y pone tus capturas en sus pantallas. Studio construye su galería en código y cuelga en ella las imágenes de tus proyectos, cada marco con la forma de su imagen.

Forest no necesita ningún modelo. Cuando añades una foto en el asistente, un modelo de profundidad llamado Depth Anything V2 Small, que ONNX Runtime Web ejecuta en tu tarjeta gráfica si el navegador lo permite y si no en el procesador, calcula a qué distancia está cada punto de la foto; con eso, la escena le da profundidad. Todo ocurre en tu navegador: tus fotos no se suben a ningún sitio.

El scroll: qué se mueve y cuándo

En una página que avanza con el scroll, la barra de desplazamiento es la línea de tiempo. Alguien decide, sección a sección, dónde está la cámara, qué se mueve y cuándo entran los textos, y hace que cada cambio funcione en los dos sentidos: al volver hacia arriba tiene que deshacerse, a la velocidad que lleve cada cual, con rueda, trackpad o dedo.

Texto y 3D comparten pantalla, así que la coreografía también decide dónde va el texto en cada momento y cuándo le deja sitio a la escena.

En los kits. Cada página es una serie de secciones fijadas —la página se queda quieta mientras la escena recorre un momento—, y cada sección es un plano de la misma escena que se funde con el siguiente al bajar. Los textos de una sección aparecen mientras está quieta y se van antes de que siga, de modo que entre sección y sección solo se mueve la escena. Con ratón o trackpad, la página suaviza el scroll; en una pantalla táctil, o con el movimiento reducido, el scroll es el del propio navegador.

Peso y velocidad: un presupuesto y el móvil

Todo lo que la escena necesita tiene que llegar al visitante antes de poder dibujarse: la librería 3D, el código de la escena, los modelos, las texturas, las fotos. web.dev llama presupuesto de rendimiento a un conjunto de límites sobre lo que afecta a la velocidad de una web —el peso total de la página, por ejemplo— que se fija al principio y que la build comprueba, para que la página no engorde sin que nadie se dé cuenta.

El móvil es donde se complica: gráficas más pequeñas, menos memoria, una batería, una pantalla estrecha en vertical y, a menudo, tres píxeles físicos por cada píxel de diseño. Dibujar a una densidad de 3 son nueve veces los píxeles de una densidad de 1, en cada fotograma, y a 60 fotogramas por segundo cada uno tiene unos 16,7 milisegundos.

En la build de esta web. promti.app se vigila a sí misma: la build falla si el script que la portada ejecuta primero pasa de 16 KB comprimido o si su 3D pasa de 200 KB; en la build del 27 de septiembre de 2026 se quedaron en 11,8 KB y 159 KB. En los kits, three.js, la librería que dibuja su 3D, ocupa 142 KB comprimida, y la descarga de cada kit se monta con entre 19 y 27 archivos que pesan de 1,1 a 3,7 MB, más las tipografías; casi todo son las imágenes y el modelo de la demo, que los tuyos sustituyen. Los scripts de la página son módulos, que no frenan al navegador mientras lee el HTML, y el código de la escena de cada kit se carga aparte, con la página ya en marcha.

Los kits dibujan como mucho 1,75 veces los píxeles del diseño, admita lo que admita la pantalla; Forest dibuja a 1,5 en el móvil y, si los fotogramas pasan de 19 milisegundos de media durante un segundo, baja la resolución de cuarto en cuarto, hasta 1. Mientras la pestaña está en segundo plano no se dibuja nada, y un fotograma sin nada en pantalla se salta. En el asistente, las fotos de Forest se reducen a 2.048 píxeles por el lado largo, y las demás imágenes que pasan de 2.400 se dejan en esa medida. Product y App vuelven a encuadrar la escena para un móvil en vertical, con los textos debajo del protagonista y no a su lado.

Para todo el mundo: menos movimiento y textos que son texto

El movimiento en pantalla puede marear o dar náuseas a algunas personas —la guía de accesibilidad del W3C menciona los trastornos vestibulares—, y los sistemas operativos tienen un ajuste para reducirlo que la página puede leer con la consulta prefers-reduced-motion. Una página 3D que no lo lee se mueve igual para quien ha pedido que no se mueva.

En los kits. Con el movimiento reducido activado, la página usa el scroll del navegador, los textos aparecen sin animarse y la escena deja de seguir al puntero; App se salta su entrada, y Forest pasa de una foto a la siguiente con un fundido en vez de adentrarse en ella. La escena sigue acompañando al scroll: en estas páginas es el contenido, y ahí se queda.

La otra mitad es el texto. Una escena WebGL se dibuja en un canvas, y un canvas no tiene nada que leer: MDN lo describe como un mapa de bits que no da a las tecnologías de apoyo ninguna información de lo que hay dibujado, y Google dice que no indexa el contenido que se muestra en uno. Por eso los textos tienen que ser HTML de verdad —títulos, párrafos, botones, enlaces— encima de la escena, no pintados dentro de ella.

En los kits. Los títulos, textos, precios y botones que escribes en el asistente van en el HTML de la página, sobre la escena; cuando un kit también pone palabras dentro del 3D, como la frase grande de Product, esas mismas palabras están en el HTML para los lectores de pantalla. La descripción de cada foto de Forest también entra en la página como texto. Y en un aparato que no puede con WebGL, la página sigue mostrando sus textos y sus botones, y Forest enseña tus fotos, planas.

Lo que una demo nunca enseña: idiomas y página legal

Un segundo idioma es una segunda copia de cada texto y, para los buscadores, una segunda dirección: Google pide una URL distinta para cada versión de idioma, con anotaciones hreflang que las enlacen entre sí, y deduce el idioma de una página por su texto visible, no por su código.

En los kits. Un kit hace una web en un solo idioma, español o inglés, el que elijas en el asistente; las palabras propias del kit, como su menú y sus botones, salen en ese idioma, y el código de la página indica cuál es. Una web en dos idiomas necesita más de lo que da un kit.

La página legal es lo que ninguna demo lleva y ninguna web de negocio puede saltarse. En España, la LSSI obliga a decir quién está detrás de una web que forma parte de una actividad económica, y un formulario de contacto trae consigo la información de privacidad del RGPD; el aviso legal de tu web repasa las dos cosas.

En los kits. La descarga incluye una página legal rellenada con tus respuestas —tu nombre, tu NIF, tu dirección y tus datos de contacto—, con un apartado de privacidad que nombra solo los servicios que usa tu web (el alojamiento, y Web3Forms o Stripe si has puesto formulario o enlace de pago) y una nota de que la web no usa cookies. Es una plantilla con tus datos, para revisarla, no asesoramiento legal. La misma descarga añade el título, la descripción y las etiquetas para compartir, robots.txt, un sitemap cuando das tu dominio y una página para los enlaces rotos.

Preguntas

¿Hace falta un modelo 3D para tener una web 3D?

No siempre. Una escena puede construirse en código, como hacen App y Studio con sus aparatos y su galería, o salir de fotos, como hace Forest con seis de las tuyas. El modelo hace falta cuando el 3D es tu propio producto: Product lo acepta en un archivo .glb y, si no lo tienes, usa su frasco con el nombre de tu producto grabado. El asistente se ofrece a hacer tu modelo contigo en la llamada de 30 minutos.

¿Qué son WebGL y three.js?

WebGL es la interfaz del navegador para dibujar gráficos 2D y 3D con la tarjeta gráfica del aparato, dentro de un elemento canvas de la página, según MDN. three.js es una librería de JavaScript de código abierto, construida sobre WebGL, que se ocupa de la escena, la cámara, las luces y la carga de modelos. Los cuatro kits de Promti están hechos con ella.

¿Una web 3D puede ir bien en el móvil?

Puede, si el móvil se tiene en cuenta desde el principio: menos resolución al dibujar, una escena encuadrada para una pantalla alta, archivos más ligeros y una página que funcione sin el 3D. Una escena ajustada solo en un portátil suele notarse pesada en un móvil de gama media, y por eso el móvil tiene aquí su propio apartado.

¿Google puede leer una web 3D?

Lee los textos del HTML, no lo que dibuja la escena, y por eso los kits dejan cada título, texto y botón en el HTML, sobre la escena. Lo que el 3D le hace a la velocidad y a las Core Web Vitals está en ¿una web 3D es lenta o perjudica el SEO?.

¿Por qué no puedo cambiar la escena de un kit?

Porque la escena —sus modelos, su luz, su coreografía, su versión para el móvil— es la parte que ha llevado el tiempo, y la comparte todo el que compra el kit. Lo que cambia es lo que hace tuya la web: tus textos, colores y enlaces y, según el kit, tu modelo, tus fotos, tus capturas o las imágenes de tus proyectos. La descarga es HTML, CSS y JS normales y la licencia te deja cambiar lo que quieras, así que un programador puede llevarla más lejos.