Three.js

Three.js es una biblioteca JavaScript de código abierto que renderiza gráficos 3D en navegadores web mediante [WebGL](/glossary/webgl). Abstrae la complejidad de la API [WebGL](/glossary/webgl) y ofrece a los desarrolladores un conjunto de herramientas de alto nivel para construir escenas 3D con cámaras, iluminación, materiales, geometría y bucles de animación. Creada originalmente por Ricardo Cabello (Mr.doob) en 2010, Three.js se ha convertido en la biblioteca 3D más adoptada para la web, utilizada en configuradores de productos, recorridos arquitectónicos, visualizaciones de datos y narrativa interactiva. Al ejecutarse en la GPU a través de WebGL, Three.js puede renderizar escenas complejas a 60 fotogramas por segundo en hardware moderno sin necesidad de complementos ni instalaciones nativas.

Three.js hace posible el renderizado 3D de alta fidelidad dentro de una pestaña ordinaria del navegador. Para la publicación digital, esta capacidad es transformadora. En lugar de entregar imágenes planas de páginas impresas, los editores pueden presentar contenido con profundidad física, iluminación realista y animación fluida. Los lectores interactúan con páginas que se curvan, proyectan sombras y responden al tacto o al ratón, creando una sensación táctil que los PDF estáticos no pueden replicar. La biblioteca funciona en todos los navegadores principales (Chrome, Firefox, Safari, Edge) y se adapta a una amplia gama de dispositivos, desde equipos de escritorio de alta gama hasta smartphones de gama media. Este alcance multiplataforma permite a los editores ofrecer una experiencia de lectura premium sin restringir a su audiencia a una aplicación o sistema operativo específico.

Three.js es el motor de renderizado principal detrás de la experiencia de [flipbook](/glossary/flipbook) de FlipLink. Cuando subes un PDF y creas un flipbook, FlipLink utiliza Three.js para renderizar cada página como una superficie 3D con [animaciones realistas de cambio de página](/glossary/page-flip-animation). Cada vuelta de página se calcula en tiempo real: el papel se deforma a lo largo de una curva, el reverso de la página se hace visible y las sombras dinámicas se desplazan sobre la doble página. El renderizador soporta diferentes [tipos de portada](/glossary/cover-type) — [tapa dura](/glossary/hardcover) y [tapa blanda](/glossary/paperback) — cada uno con un comportamiento de plegado y mecánica de lomo distintos. Three.js renderiza toda la escena usando la GPU del lector, manteniendo animaciones fluidas sin procesamiento del lado del servidor. FlipLink también ofrece un [visor de documentos](/glossary/document-viewer) basado en [PDF.js](/glossary/pdf-js) para situaciones donde se prefiere un diseño más sencillo, permitiendo a los editores elegir el formato adecuado por publicación.

Internamente, la integración de Three.js en FlipLink involucra varias etapas de renderizado. Cada página del PDF se rasteriza y se aplica como textura a una geometría plana subdividida. Cuando el lector inicia un cambio de página, los vértices de la geometría se desplazan a lo largo de una curva de Bézier para simular el doblado del papel. Una fuente de luz direccional posicionada sobre el libro genera mapas de sombras en tiempo real, de modo que la página que se curva proyecta una sombra sobre la página inferior. La cámara utiliza una proyección en perspectiva que le da al libro una sensación natural de profundidad que las proyecciones ortográficas planas no logran. En dispositivos con GPU limitada, Three.js reduce automáticamente el conteo de polígonos y simplifica los cálculos de sombras para mantener una tasa de fotogramas fluida. Toda la canalización de renderizado se ejecuta en el lado del cliente, lo que significa que no se requiere transmisión de video ni renderizado en servidor — el propio dispositivo del lector se encarga de todo.

Las transformaciones CSS 3D (`transform: rotateY()`, `perspective()`) pueden voltear elementos planos en el espacio 3D y a veces se utilizan para efectos simples de cambio de página. Sin embargo, CSS 3D opera sobre elementos DOM rectangulares y no puede deformarlos — una página puede rotar pero nunca curvarse, doblarse o plegarse. Three.js, en cambio, trabaja con geometrías de malla compuestas por muchos vértices, lo que permite simular la deformación del papel, grosor variable, curvatura del lomo y proyección de sombras. CSS 3D es más ligero y más fácil de implementar para interacciones básicas de tipo card-flip, pero no puede reproducir la [simulación realista de libro](/glossary/realistic-book-simulation) que los lectores asocian con un libro físico. Para los editores que desean la apariencia y la sensación de un documento impreso real, Three.js es el motor que lo hace posible.

Three.js lleva el renderizado 3D acelerado por GPU al navegador, permitiendo que FlipLink ofrezca flipbooks con curvatura realista de páginas, sombras dinámicas y profundidad de perspectiva — una experiencia que los visores planos y las animaciones basadas en CSS no pueden igualar.