Presentación

Three.js es una biblioteca JavaScript dedicada al 3D en el navegador. Su objetivo es facilitar el uso de las API gráficas de la Web proporcionando abstracciones para crear escenas, cámaras, luces, objetos, materiales, animaciones e interacciones sin tener que gestionar directamente toda la complejidad de WebGL o WebGPU.

Una escena Three.js se basa generalmente en tres elementos fundamentales: una Scene, una Camera y un renderer. A partir de esta base, el desarrollador añade geometrías, modelos importados, texturas, luces, efectos o interfaces, y después anima y actualiza la escena con JavaScript.

Three.js no debe confundirse con un motor de juegos completo como Godot, Unity o Unreal Engine. No proporciona por defecto un sistema de gameplay, un editor de niveles completo, una arquitectura de entidades impuesta, un motor de física generalista ni un pipeline de publicación para consolas. Es ante todo una biblioteca de renderizado y herramientas 3D para la Web, que deja al desarrollador mucha más libertad sobre la arquitectura de su aplicación.

Este enfoque hace que Three.js sea especialmente adecuado para configuradores de productos, visualizaciones científicas, portfolios interactivos, experiencias Web creativas, aplicaciones educativas, minijuegos, interfaces 3D o experiencias AR/VR accesibles desde un navegador.

El proyecto es completamente open source bajo licencia MIT. Su código puede utilizarse, modificarse e integrarse en proyectos personales o comerciales sin royalties.

Durante esta verificación, la versión publicada más reciente es 0.186.0, correspondiente a la revisión r186. Three.js evoluciona regularmente y su API puede cambiar entre revisiones, por lo que consultar la guía de migración resulta importante al actualizar proyectos antiguos.

Funcionalidades

Escenas, cámaras y grafo de objetos

Three.js estructura las escenas como jerarquías de objetos.

Una Scene puede contener meshes, luces, cámaras, grupos y otros objetos derivados de Object3D. Cada elemento puede tener posición, rotación, escala y una relación padre-hijo.

Esta organización permite, por ejemplo, agrupar varios componentes de un vehículo, asociar una cámara a un personaje o desplazar un conjunto completo de objetos mediante un único grupo.

Las cámaras principales incluyen especialmente PerspectiveCamera, adaptada a escenas 3D tradicionales, y OrthographicCamera, útil para determinadas interfaces, visualizaciones técnicas o juegos con proyección ortográfica.

Three.js también proporciona raycasting, frustum culling, layers y distintas herramientas que facilitan la selección, visibilidad e interacción con la escena.

WebGLRenderer y WebGPURenderer de nueva generación

Three.js se construyó históricamente alrededor de WebGLRenderer, que sigue siendo un renderer ampliamente utilizado y compatible con una gran cantidad de navegadores y dispositivos.

El proyecto desarrolla ahora también WebGPURenderer, presentado como su renderer de nueva generación.

WebGPU ofrece un acceso más moderno a la GPU y abre la puerta a técnicas gráficas y de cálculo más avanzadas. Three.js ha diseñado, sin embargo, WebGPURenderer como un renderer universal: cuando un navegador o dispositivo no admite WebGPU, puede utilizar automáticamente un backend de respaldo WebGL 2.

Esto permite empezar a aprovechar WebGPU sin reservar necesariamente la aplicación a los dispositivos más recientes.

Los builds principales actuales de Three.js incluyen WebGL y WebGPU. Otros enfoques, como los renderers CSS3D o SVG, siguen disponibles mediante addons para usos más específicos.

Materiales PBR, luces, sombras y entornos

Three.js ofrece numerosos materiales que van desde renderizado simple sin iluminación hasta materiales físicamente basados.

MeshStandardMaterial y MeshPhysicalMaterial permiten especialmente gestionar workflows PBR con propiedades metallic, roughness, transmission, clear coat, iridescence, dispersion y distintos tipos de texturas.

Existen varias fuentes de luz: direccionales, puntuales, spot, ambient o hemisphere.

El renderer también admite sombras, environment maps, HDR, tone mapping y distintos espacios de color necesarios para obtener un renderizado coherente.

Estas funciones permiten mostrar tanto una escena estilizada y ligera como un producto realista utilizando texturas y un entorno HDR.

WebGPU, TSL y sistema de materiales por nodos

El desarrollo de WebGPURenderer viene acompañado de TSL — Three.js Shading Language.

TSL permite construir materiales y cálculos gráficos mediante nodos JavaScript en lugar de escribir directamente todo el shader en un lenguaje de bajo nivel.

Esta arquitectura sirve tanto para crear materiales personalizados como para aprovechar determinados cálculos GPU o efectos de postprocesado.

También permite compartir más lógica entre los backends WebGPU y WebGL 2 compatibles con WebGPURenderer.

Para desarrolladores que quieran ir más allá de los materiales estándar sin mantener varias versiones de shaders, TSL representa una evolución importante de Three.js.

Postprocesado y RenderPipeline

Three.js permite añadir efectos después del renderizado principal: bloom, depth of field, anti-aliasing, color grading, ambient occlusion, reflejos o efectos estilizados.

Con WebGPURenderer, la pila moderna de postprocesado se basa en RenderPipeline y el sistema de nodos.

El pipeline puede combinar varios efectos para reducir determinadas pasadas de renderizado y admite de forma nativa Multiple Render Targets — MRT, útiles para técnicas más avanzadas.

El ecosistema WebGL anterior también dispone de soluciones de postprocesado basadas especialmente en distintos passes y EffectComposer.

La elección depende por tanto en parte del renderer utilizado y de la generación del proyecto.

Importar glTF, FBX, OBJ, STL y muchos otros formatos

Uno de los puntos fuertes de Three.js es su amplio conjunto de loaders.

La documentación actual ofrece especialmente loaders para:

  • glTF y GLB;
  • FBX;
  • OBJ y MTL;
  • Collada;
  • STL;
  • PLY;
  • 3MF;
  • USD;
  • Rhino 3DM;
  • LDraw;
  • VOX;
  • BVH;
  • SVG;
  • HDR y EXR;
  • distintos formatos de texturas comprimidas.

Para escenas 3D modernas en tiempo real, glTF 2.0 suele ser el formato preferido.

GLTFLoader admite numerosas extensiones de glTF, incluidos materiales avanzados, Draco, Meshopt, texturas KTX2/Basis, instancing GPU y varios formatos de texturas modernos.

Esta compatibilidad permite exportar un modelo desde Blender u otro software DCC y conservar en Three.js su jerarquía, materiales y animaciones.

Draco, Meshopt y KTX2 para aligerar las escenas Web

El peso de los recursos constituye un problema importante para el 3D en el navegador.

Three.js proporciona varias herramientas para reducir la cantidad de datos transferidos.

Draco puede comprimir considerablemente la geometría de un mesh. DRACOLoader utiliza después un decodificador JavaScript o WebAssembly según las capacidades del navegador.

Meshopt representa otro método de compresión y optimización integrable en archivos glTF.

Para las texturas, KTX2/Basis Universal permite distribuir texturas comprimidas y después transcodificarlas a un formato adaptado a la GPU del usuario.

Estas técnicas son especialmente importantes para una escena destinada a la Web: un modelo que funciona perfectamente en un ordenador local puede resultar inutilizable si necesita descargar varios cientos de megabytes en cada carga.

Animación de modelos y sistemas de morphing

Three.js incluye un sistema de animación capaz de reproducir y mezclar varios clips.

AnimationMixer puede controlar animaciones esqueléticas, transformaciones, morph targets y distintas propiedades animables.

Un personaje importado desde un archivo glTF puede incluir así varios clips — caminar, correr, atacar, idle — que después se activan o mezclan según el estado de la aplicación.

Los morph targets también pueden utilizarse para expresiones faciales, transformaciones progresivas o variaciones de geometría.

Three.js proporciona las piezas necesarias para renderizar y controlar estas animaciones, pero la lógica de gameplay o la máquina de estados debe seguir construyéndola el desarrollador o una biblioteca complementaria.

Controles, interacciones y raycasting

Los addons proporcionan distintos sistemas de cámara y navegación.

OrbitControls, por ejemplo, permite girar una cámara alrededor de un objeto mediante ratón, táctil o trackpad. Otros controles están adaptados a vista en primera persona, desplazamiento libre o interacciones más específicas.

El raycasting permite determinar qué objeto se encuentra bajo el puntero o en la dirección de un rayo.

Esta función constituye la base de muchas interacciones: seleccionar un producto, hacer clic sobre una pieza mecánica, apuntar a un objeto, mostrar un tooltip o activar una acción dentro de una escena.

Three.js proporciona por tanto las herramientas fundamentales, dejando al desarrollador la responsabilidad de construir la interfaz y las reglas adaptadas al proyecto.

WebXR para realidad virtual y aumentada

Three.js admite WebXR, la API Web destinada a experiencias de realidad virtual y aumentada.

WebXRManager, utilizado por los renderers, permite gestionar la activación XR, cámaras, controladores y distintos elementos necesarios para una sesión inmersiva.

Los ejemplos oficiales cubren especialmente VR, AR, controladores, hand tracking y distintos modos de interacción.

Una experiencia compatible puede ejecutarse directamente desde un navegador que admita WebXR, incluso en determinados cascos autónomos.

Las capacidades disponibles dependen, sin embargo, en gran medida del navegador, dispositivo y API expuestas por la plataforma.

Instalación con npm, módulos ES o CDN

Three.js puede integrarse de varias maneras.

Para un proyecto moderno, la documentación recomienda generalmente instalarlo mediante npm y utilizar una herramienta de build como Vite:

npm install --save three

Los addons se importan después por separado desde three/addons/.

La integración mediante CDN sigue siendo posible, especialmente con módulos ES y una import map.

Esta modularidad permite utilizar únicamente los componentes necesarios en lugar de considerar Three.js como una aplicación monolítica.

La biblioteca también puede alojarse directamente con el proyecto, sin depender de un servicio remoto durante la ejecución.

Un amplio conjunto de addons y ejemplos oficiales

Three.js mantiene deliberadamente su núcleo relativamente generalista.

Numerosas funciones adicionales se proporcionan como addons: controles de cámara, loaders, exporters, postprocesado, utilidades geométricas, herramientas WebXR, CSS3D, curvas, efectos, helpers y otros componentes.

El sitio oficial también contiene una enorme colección de ejemplos funcionales.

Estos ejemplos son especialmente importantes dentro del ecosistema Three.js: sirven a la vez como demostraciones de las capacidades de la biblioteca y como referencias técnicas para integrar determinadas funciones avanzadas.

Una parte importante del aprendizaje consiste por tanto en combinar documentación API, manual y ejemplos existentes.

Un editor Web, pero no un motor visual completo

Three.js también ofrece un editor Web que permite crear una escena, añadir objetos, luces y cámaras, modificar sus propiedades e importar distintos assets.

Esta herramienta resulta práctica para experimentar, preparar una escena o comprender la estructura del motor.

No debe, sin embargo, considerarse equivalente al editor de Unreal, Unity o Godot.

En un proyecto Three.js clásico, la mayor parte de la lógica, interacciones y pipeline sigue construyéndose en JavaScript o TypeScript dentro de un entorno de desarrollo externo.

TypeScript mediante definiciones comunitarias

El código de Three.js está escrito principalmente en JavaScript.

Los proyectos TypeScript pueden utilizar la biblioteca mediante las definiciones @types/three, mantenidas por la comunidad en el proyecto three-types y distribuidas mediante DefinitelyTyped.

Esta solución ofrece autocompletado, verificación de tipos y mejor integración con IDE modernos.

Hay que tener en cuenta, sin embargo, que las definiciones TypeScript constituyen un proyecto separado del código principal Three.js. Cuando se publica una nueva revisión puede existir ocasionalmente un pequeño retraso antes de que se actualicen los tipos correspondientes.

Casos de uso

Crear un configurador de producto en 3D

Un sitio de e-commerce puede cargar un producto en glTF y permitir al visitante girarlo, hacer zoom y modificar su color o determinados materiales.

Las interacciones se gestionan mediante raycasting y la interfaz HTML, mientras que Three.js se encarga del renderizado en tiempo real.

El mismo principio puede utilizarse para muebles, vehículos, calzado, equipos industriales u objetos personalizables.

La principal ventaja es mantener la experiencia directamente dentro de la página Web sin obligar al usuario a instalar una aplicación 3D.

Construir un portfolio o una experiencia Web creativa

Un artista o diseñador puede crear una página completamente animada donde los proyectos adopten la forma de objetos, entornos o transiciones 3D.

Three.js puede combinarse con HTML, CSS, vídeo, audio y otras tecnologías front-end.

Esta capacidad para mezclar el DOM tradicional con renderizado GPU explica su uso frecuente en sitios experimentales, portfolios, campañas interactivas y experiencias de marca.

El desarrollador conserva un control mucho más directo sobre la interfaz que con un motor de juegos integrado dentro de una página.

Visualizar datos científicos o técnicos

Una aplicación puede representar moléculas, edificios, nubes de puntos, trayectorias, redes o conjuntos de datos dentro de un espacio 3D navegable.

Los objetos pueden generarse dinámicamente en JavaScript en lugar de cargarse únicamente desde modelos preparados previamente.

Three.js se convierte entonces en una capa de visualización conectada a los datos de la aplicación.

Para conjuntos muy grandes, sin embargo, las técnicas de instancing, niveles de detalle y optimización GPU resultan indispensables.

Desarrollar un juego Web o un prototipo interactivo

Three.js puede servir perfectamente como base para un juego ejecutado en el navegador.

El desarrollador dispone de renderizado, animaciones, raycasting, audio Web, carga de modelos y gestión de entradas del navegador.

Debe, sin embargo, construir o integrar por sí mismo una gran parte de los sistemas que proporcionaría un motor de juegos: física, navegación, guardado, entidades, comportamiento de IA o herramientas de level design.

Three.js resulta por tanto especialmente adecuado para juegos Web personalizados y experiencias interactivas donde esta libertad constituye una ventaja.

Crear una experiencia VR o AR accesible desde un navegador

Una aplicación WebXR puede mostrar un entorno Three.js dentro de un casco compatible o superponer determinados contenidos al entorno real.

El mismo grafo de escena, los mismos modelos y gran parte de la misma lógica pueden reutilizarse entre visualización convencional y sesión XR.

Esto permite distribuir determinadas experiencias inmersivas directamente mediante una URL.

La compatibilidad WebXR sigue dependiendo de los navegadores y dispositivos utilizados, por lo que es necesario prever soluciones alternativas cuando se dirige a un público amplio.

Conclusión

Three.js sigue siendo una de las bibliotecas fundamentales para el 3D en la Web.

Su principal fortaleza consiste en proporcionar una capa suficientemente de alto nivel para evitar gestionar directamente todas las complejidades de WebGL o WebGPU, al mismo tiempo que deja al desarrollador mucho más control que un motor de juegos completo.

El proyecto cubre actualmente una gran parte de las necesidades del renderizado 3D moderno: PBR, HDR, animaciones, glTF, compresión, postprocesado, WebXR y ahora un trabajo importante alrededor de WebGPU y TSL.

La llegada de WebGPURenderer también muestra la dirección del proyecto. Three.js ya no se limita a mantener su histórico WebGL: construye progresivamente una arquitectura capaz de aprovechar las nuevas API GPU del navegador conservando un backend WebGL 2 para dispositivos que todavía no disponen de WebGPU.

Esta flexibilidad tiene una contrapartida. Three.js proporciona piezas y no un workflow de producción completo. No impone sistema de gameplay, motor de física completo ni editor de niveles comparable a Godot o Unreal. Los proyectos grandes requieren por tanto más decisiones de arquitectura y, con frecuencia, varias bibliotecas complementarias.

Las actualizaciones también son frecuentes. Algunas API evolucionan o desaparecen entre revisiones, y un proyecto antiguo no debería necesariamente saltar directamente a la versión más reciente sin consultar la guía de migración.

Para un desarrollador que quiera integrar una verdadera escena 3D directamente dentro de una aplicación Web, mantener el control sobre su código y utilizar WebGL, WebGPU, glTF o WebXR sin adoptar un motor de juegos completo, Three.js sigue siendo una referencia especialmente sólida.

Puntos de atención

  • Three.js es una biblioteca JavaScript y no un motor de juegos completo. Gameplay, arquitectura de aplicación, física avanzada y herramientas de producción deben añadirse a menudo por separado.

  • La versión actual verificada es 0.186.0 / r186. El proyecto evoluciona regularmente y las nuevas revisiones pueden modificar determinadas API.

  • Three.js es completamente gratuito y open source bajo licencia MIT, incluso para proyectos comerciales.

  • Los builds principales actuales incluyen WebGLRenderer y WebGPURenderer. SVGRenderer y CSS3DRenderer siguen disponibles mediante addons.

  • WebGPURenderer puede utilizar WebGPU y recurrir después a un backend WebGL 2 cuando WebGPU no está disponible, facilitando una transición progresiva.

  • glTF 2.0 es generalmente el formato recomendado para assets 3D modernas. Three.js admite, sin embargo, muchos otros formatos mediante sus loaders.

  • Draco, Meshopt y KTX2 pueden reducir considerablemente el peso de modelos y texturas, pero añaden etapas de compresión y decodificación al pipeline.

  • El peso y la complejidad de las escenas siguen siendo críticos en la Web. Una escena perfectamente fluida en un PC potente puede resultar demasiado pesada en smartphone o dispositivo integrado.

  • Three.js no proporciona un motor de física generalista comparable al sistema integrado de un motor de juegos. Bibliotecas externas como Rapier u otras soluciones pueden combinarse con el proyecto.

  • La compatibilidad WebXR depende en gran medida del navegador y del dispositivo, especialmente para realidad aumentada.

  • Los tipos TypeScript son mantenidos por separado por la comunidad mediante @types/three, y pueden ocasionalmente quedar ligeramente retrasados respecto a una revisión recién publicada.

  • Los proyectos antiguos deben actualizarse con precaución. La guía de migración de Three.js recomienda especialmente evitar saltos de versiones demasiado grandes para gestionar mejor las API deprecadas.

  • Three.js funciona principalmente en el navegador y puede instalarse mediante npm, cargarse desde un CDN o alojarse directamente con el proyecto.

  • El editor Web de Three.js existe pero no sustituye a un editor completo como Godot, Unity o Unreal Engine. La mayor parte del trabajo sigue orientada al código.