Si alguna vez has entrado en una web y te has encontrado con objetos en 3D que giran con el ratón, partículas que reaccionan al scroll o escenas que parecen sacadas de un videojuego, es muy probable que detrás estuviera Three.js. Un buen ejemplo de lo que se puede llegar a hacer es mengto.github.io/kage, un portfolio interactivo construido con esta tecnología, donde el usuario navega por un entorno tridimensional en lugar de por una web «plana» de toda la vida.
Vamos a explicar qué es, cómo funciona y, sobre todo, si tiene sentido aplicarlo en un proyecto real como una web en WordPress.
¿Qué es Three.js?
Three.js es una librería de JavaScript que permite crear gráficos en 3D dentro del navegador, sin que el usuario tenga que instalar ningún plugin.
Por debajo utiliza una tecnología llamada WebGL, que es la que realmente habla con la tarjeta gráfica del ordenador o del móvil para dibujar todo en tiempo real.
La gracia de Three.js es que hace de «traductor» entre nosotros y WebGL. Programar directamente en WebGL es muy complejo y requiere mucho código para hacer cosas básicas. Three.js simplifica todo eso con funciones mucho más sencillas para crear cámaras, luces, materiales, objetos 3D, animaciones, etc.
Ventajas de usar Three.js
- Experiencias visuales únicas: permite crear webs muy únicas, ideal para portfolios, marcas creativas, agencias de diseño.
- Funciona en el navegador, sin apps ni plugins: solo necesita JavaScript, algo que cualquier navegador moderno soporta.
- Gran comunidad y documentación: es la librería 3D para web más usada del mundo, con muchísimos ejemplos, tutoriales y foros de ayuda.
- Compatible con otras tecnologías: se integra bien con React (a través de librerías como React Three Fiber), Vue, o incluso con HTML y CSS normales.
- Rendimiento aceptable si se optimiza bien, ya que aprovecha la GPU del dispositivo en lugar de sobrecargar el procesador.
¿Cómo se usa Three.js?
En un proyecto típico, un desarrollador usa Three.js para:
- Crear una «escena» (el espacio 3D).
- Añadir una cámara (el punto de vista del usuario).
- Colocar objetos 3D (modelos, formas geométricas, texturas).
- Añadir luces para dar volumen y realismo.
- Programar animaciones o interacciones (que reaccione al scroll, al ratón, al mando, etc.).
Todo esto se escribe en código JavaScript y se ejecuta dentro de un elemento <canvas> en la página. No es algo que se pueda hacer «a golpe de clics» como con Elementor: requiere programación.
¿Se puede aplicar en WordPress?
Sí, aunque no es tan directo como instalar un plugin de un clic.
Como usar Three.js en WordPress
- Insertar el código directamente en una plantilla o en un bloque HTML personalizado, cargando la librería Three.js y el script correspondiente.
- Usar plugins específicos que ya integran escenas 3D o efectos WebGL preconfigurados (más limitados, pero más rápidos de implementar).
- Crear un bloque personalizado o una sección concreta de la web solo con Three.js, dejando el resto del sitio con Elementor o Gutenberg de forma normal.
Lo habitual y recomendable es no aplicarlo a toda la web, sino a secciones muy concretas: una portada, un hero visual, una presentación de producto… El resto del contenido (textos, formularios, blog, tienda) sigue funcionando de forma tradicional.
¿Es malo para al SEO Three.js?
Aquí hay que ser realistas: Three.js no es amigo natural del SEO, por varios motivos:
- El contenido generado en 3D (canvas) no es indexable por Google. Si un texto o información importante solo existe dentro de la escena 3D, los buscadores no lo «leerán».
- Puede aumentar el peso de la página, ya que hay que cargar la librería, modelos 3D, texturas, etc.
- Si no se optimiza, puede ralentizar el tiempo de carga, lo que sí afecta directamente al SEO (Core Web Vitals).
La solución, si se quiere mantener el SEO, es usar Three.js solo como elemento visual/decorativo, dejando todo el contenido importante (títulos, textos, metaetiquetas) en HTML normal, fuera del canvas.
¿Afecta a la velocidad Three.js?
Depende mucho de cómo esté implementado. Una escena 3D mal optimizada (demasiados polígonos, texturas muy pesadas, animaciones mal programadas) puede hacer que la web vaya muy lenta, especialmente en móviles.
Aunque si se cuida el número de objetos, se comprimen bien los recursos y se carga el script de forma diferida (lazy loading), el impacto puede ser bastante contenido.
¿Uso Three.js en mi web?
Three.js es una herramienta potente para crear experiencias visuales brutales en la web, pero no es una solución universal.
Tiene sentido para proyectos donde el diseño y la experiencia son el argumento principal, no tanto para webs donde el SEO y la velocidad de carga son prioritarios (como una tienda online o una web informativa).
Lo ideal, muchas veces, es un término medio: usarlo en zonas puntuales de la web y mantener el resto del sitio optimizado de forma tradicional.
