¿Puedes hacer tú una web 3D? Cuatro caminos y dónde se complica cada uno

Camino 1: three.js, programando

three.js es una librería de JavaScript gratuita, con licencia MIT, para poner 3D en una página web; los cuatro kits de Promti están escritos con ella. Te da el control total: cualquier escena, cualquier movimiento de cámara, cualquier efecto que sepas programar.

Qué te pide. Su manual da por hecho que ya programas en JavaScript y conoces el DOM, el HTML, los selectores de CSS, los módulos ES y los import maps. La instalación recomendada es desde npm con una herramienta de build como Vite; incluso sin ella necesitas un servidor web local, porque el navegador no deja a WebGL cargar imágenes directamente de tu disco. Luego vienen las bases: una escena, una cámara, un renderizador y un bucle de animación que vuelve a dibujar la escena unas 60 veces por segundo. Los modelos entran en glTF, el formato que recomienda el manual.

Dónde se complica. La memoria: three.js no libera por sí solo geometrías, materiales y texturas —cada textura de 1024 × 1024 ocupa de 4 a 6 MB, advierte su manual—, y quitar una malla de la escena no la elimina. El móvil: dibujar a la densidad de píxeles completa del teléfono es algo que el manual desaconseja rotundamente en escenas pesadas. Y todo lo que rodea a la escena lo construyes tú: la coreografía del scroll, el texto sobre el canvas, el movimiento reducido, una versión sin WebGL.

Dónde se aprende. Three.js Journey, el curso de Bruno Simon, son 66 lecciones y 93 horas de vídeo por 95 dólares estadounidenses, IVA incluido y en un solo pago (120 con su curso de WebGPU), y pide saber lo básico de JavaScript antes. Si trabajas con React, React Three Fiber es un renderizador de React para three.js; su documentación avisa de que hay que dominar React y three.js antes de empezar.

Camino 2: Spline, sin programar

Spline es una herramienta de diseño 3D que funciona en el navegador: modelas, iluminas y animas una escena sin código, le añades estados y eventos, y la publicas como enlace, como pieza incrustada o como código. El curso de iniciación de su Academy, Spline 101, son 16 vídeos, unas cuatro horas.

Dónde se complica. La escena vive dentro de una web hecha en otro sitio —Webflow, Framer, Wix, Shopify— o en el alojamiento de Spline, y los textos que la rodean son cosa de esa web; las páginas de Spline no dicen nada de buscadores. Su documentación aconseja una o dos piezas incrustadas por página y menos de tres luces por escena. Lo que exporta a la web el plan gratuito lleva marca de agua, que se quita desde Hobby, a 12 $ al mes con pago anual, y descargar la exportación en código para alojarla tú pide Pro. Más en Promti vs Spline.

Camino 3: un creador de webs con 3D

Framer mueve cualquier capa en el espacio con sus transformaciones 3D —rotación, inclinación, profundidad, perspectiva— y mete escenas 3D de verdad con su componente Embed, a menudo desde Spline. Su propia ayuda avisa de que piezas incrustadas como las ilustraciones 3D de Spline pueden ralentizar la web, aunque Framer las cargue en diferido. Webflow tiene un elemento propio para escenas de Spline, que sus interacciones pueden animar, y transformaciones 3D que necesitan una perspectiva en el elemento padre.

Para su Studio Editor, el centro de ayuda de Wix dice que no se puede añadir un elemento 3D desde el panel y propone en su lugar un iframe HTML con código externo. Squarespace admite JavaScript e iframes en los bloques de código desde su plan Core, y aclara que la personalización con código queda fuera de lo que cubre su soporte.

Dónde se complica. La escena en sí se sigue haciendo fuera, casi siempre en Spline, así que aprendes dos herramientas y a menudo pagas dos suscripciones. Promti vs Framer y Promti vs Webflow repasan lo que cuesta cada creador.

Camino 4: un modelo en la página

Si lo que necesitas es un producto que el visitante pueda girar y ampliar —en una ficha de producto, por ejemplo—, el model-viewer de Google es un componente web que muestra un modelo glTF o GLB con una sola etiqueta HTML y que puede abrirlo en realidad aumentada en los móviles compatibles. Es gratuito, con licencia Apache 2.0.

Dónde se complica. Enseña un modelo; no coreografía una página. El modelo lo sigues necesitando: hecho en Blender, que se puede usar gratis para cualquier fin y exporta a glTF de serie, o encargado. Sus propias preguntas frecuentes dicen que la realidad aumentada no funciona bien en todas partes, así que tómala como un extra, y un modelo alojado en otro servidor exige que ese servidor envíe cabeceras CORS.

Cuándo compensa hacerlo tú

Cuando ya escribes JavaScript o quieres aprender 3D como oficio: three.js es el camino, y las horas son una inversión más que un gasto. Cuando quieres diseñar tú la escena sin programar: Spline, dentro de un creador que ya uses. Cuando necesitas un producto que girar y no una página que recorrer: model-viewer es lo más directo. Y siempre que tengas más tiempo que presupuesto y ninguna fecha para estar en línea.

Cuándo no: cuando la web tiene que estar publicada pronto, aguantar en móviles de gama media, dejarse leer por Google y llevar su página legal. Esa es la parte del trabajo que una demo no enseña. Un kit de Promti es esa parte hecha para un tipo de negocio, por 500 €: tú pones los textos, los colores y las imágenes y, en Product, tu propio modelo, que el asistente se ofrece a hacer contigo en la llamada de 30 minutos.

Preguntas

¿Hace falta saber programar para hacer una web 3D?

No en todos los caminos. Spline hace escenas sin código, y Framer o Webflow pueden colocarlas en una página. three.js pide JavaScript, y su manual espera además que conozcas los módulos y el DOM. model-viewer pide una línea de HTML y un modelo.

¿Una IA puede hacerme una web 3D?

Empiezan a hacerlo: los planes de pago de Spline incluyen generación de 3D con IA, y Spline Inc. tiene Omma, que describe como capaz de crear escenas 3D, webs, juegos y apps a partir de lenguaje natural, y que su propio registro de cambios presentó como una beta temprana. Haga quien haga la página, lo que hay que comprobar es lo mismo: si carga en el móvil, si Google puede leer sus textos, si funciona sin el 3D.

¿En qué formato tiene que estar un modelo 3D para la web?

En glTF, normalmente como un único archivo .glb. Lo recomienda el manual de three.js, model-viewer solo acepta glTF y GLB, y el Khronos Group describe glTF como un formato pensado para transmitirse y cargarse de forma eficiente. Que pese poco: menos polígonos, texturas del tamaño de una pantalla y compresión si tu visor la admite.

¿Cuánto se tarda en aprender three.js?

Ninguna fuente oficial da una cifra, y depende de cuánto JavaScript sepas ya. Como referencia, el curso más conocido, Three.js Journey, son por sí solo 66 lecciones y 93 horas de vídeo, y empieza desde lo básico de JavaScript.

¿Puedo partir de un kit y cambiarlo yo?

Sí. Un kit se descarga como HTML, CSS y JavaScript normales construidos sobre three.js, y la licencia permite modificarlo todo para tu propio negocio. Eso sí: si después cambias algo en el asistente y vuelves a descargar, la nueva descarga no llevará tus cambios a mano.