Qué es Three.js, en qué proyectos el 3D justifica su coste y en cuáles es una animación cara que hunde el rendimiento. Con las alternativas más baratas que casi nadie propone.
Cada cierto tiempo llega la misma petición: "quiero algo en 3D en la home, como el de Apple". Es una petición razonable —el 3D bien hecho impresiona— pero casi siempre se plantea al revés: primero se decide la tecnología y después se busca para qué sirve.
Merece la pena hacerlo al contrario. Este artículo va de cuándo el 3D en una web se paga solo y cuándo es una animación cara que ralentiza todo lo demás.
Qué es Three.js exactamente
Three.js es una librería de JavaScript que se apoya en WebGL, la tecnología que permite al navegador hablar directamente con la tarjeta gráfica. Sin ella, programar 3D en la web significa escribir shaders y gestionar búferes a mano; con ella, trabajas con conceptos manejables: una escena, una cámara, luces y objetos.
Es software libre, maduro y funciona en cualquier navegador moderno sin plugins. Todo lo que verás por ahí como "web 3D interactiva" está hecho con Three.js o con algo construido encima.
Cuándo el 3D se gana su sitio
La regla es sencilla: el 3D vale la pena cuando lo que enseñas es realmente espacial y el usuario necesita manipularlo. No cuando queda bonito.
En los cuatro casos hay algo en común: si quitas el 3D, el usuario pierde información. Esa es la prueba del algodón.
Cuándo es solo peso de más
El patrón opuesto también es fácil de reconocer: una figura que gira en la cabecera, unas partículas que siguen al ratón, un logo con volumen. Queda bien en la presentación del diseño y no aporta nada al visitante.
El problema no es estético, es de coste. Esa decoración se paga en los primeros segundos de carga, que son justo los que deciden si alguien se queda. Y se paga en cada visita, en cada móvil, para siempre.
Si al quitar el 3D nadie echa nada de menos salvo el equipo de diseño, no era necesario.
Lo que cuesta de verdad
Peso de descarga. Three.js no es una librería pequeña. Importando solo lo imprescindible se puede recortar bastante, pero una escena básica con carga de modelos y controles sigue siendo de las cosas más pesadas de la página. Y eso antes de contar el modelo 3D, que tiene su propio tamaño.
Trabajo de GPU. El 3D no se dibuja una vez y ya está: se redibuja muchas veces por segundo mientras esté en pantalla. En un portátil no se nota. En un móvil de gama media se traduce en calor, batería y ventilador, y el navegador puede acabar limitando el rendimiento.
Métricas de Google. Todo lo anterior empuja en la dirección equivocada de los Core Web Vitals: más JavaScript que descargar y ejecutar, hilo principal ocupado, y una cabecera que tarda más en estar lista. Si el 3D está en la parte alta de la página, afecta directamente a lo que Google mide.
El problema que casi nadie menciona
Una escena de Three.js se dibuja dentro de un elemento canvas. Y un canvas es opaco: Google no ve nada dentro, y un lector de pantalla tampoco.
Esto significa que si el mensaje principal de tu página está dentro del 3D, para un buscador esa página está vacía. Y para una persona ciega, también.
La solución no es complicada, pero hay que aplicarla a propósito: el contenido real —titulares, descripciones, precios, botones— tiene que existir en HTML normal junto al canvas, no dentro de él. El 3D acompaña; no sustituye.
Alternativas más baratas que casi nadie propone
Antes de montar una escena completa, conviene descartar estas:
Una de estas cubre la mayoría de peticiones que empiezan con "quiero algo en 3D".
Si decides hacerlo, hazlo bien
Cuando el 3D sí está justificado, estas decisiones marcan la diferencia entre una web rápida con 3D y una web lenta:
Cómo decidir en dos preguntas
Antes de encargar nada, respóndelas con honestidad:
¿El usuario pierde información si quito el 3D? Si la respuesta es no, no lo necesitas: necesitas una buena imagen o un vídeo.
¿Estoy dispuesto a que la página cargue más despacio a cambio? Si el 3D está en la cabecera y tu negocio depende de que la gente no se vaya, la respuesta honesta suele ser que no.
Con dos noes, te acabas de ahorrar bastante dinero. Con dos síes, tienes un caso de uso real y merece la pena hacerlo bien.
En resumen
Three.js es una herramienta excelente resolviendo problemas espaciales concretos: configurar, recorrer, inspeccionar. Como decoración de cabecera es de las formas más caras que existen de ralentizar una web.
La pregunta correcta nunca es "¿puedo poner 3D?". Es "¿qué entiende mejor mi cliente si se lo enseño en 3D?". Si tienes respuesta a la segunda, adelante.
¿Tienes un proyecto en mente?
Cuéntanos qué quieres conseguir.