Three.js

Three.js is an open-source JavaScript library that renders 3D graphics in web browsers using [WebGL](/glossary/webgl). It abstracts away the complexity of the WebGL API, giving developers a high-level toolkit for building 3D scenes with cameras, lighting, materials, geometry, and animation loops. Originally created by Ricardo Cabello (Mr.doob) in 2010, Three.js has become the most widely adopted 3D library for the web, used in everything from product configurators and architectural walkthroughs to data visualizations and interactive storytelling. Because it runs on the GPU through WebGL, Three.js can render complex scenes at 60 frames per second on modern hardware without requiring plugins or native app installations.

Three.js makes high-fidelity 3D rendering possible inside an ordinary browser tab. For digital publishing, that capability is transformative. Instead of delivering flat images of printed pages, publishers can present content with physical depth, realistic lighting, and smooth animation. Readers interact with pages that curl, cast shadows, and respond to touch or mouse input, creating a tactile feel that static PDFs cannot replicate. The library works across all major browsers (Chrome, Firefox, Safari, Edge) and adapts to a wide range of devices, from high-end desktops to mid-range smartphones. This cross-platform reach means publishers can deliver a premium reading experience without restricting their audience to a specific app or operating system.

Three.js is the core rendering engine behind FlipLink's flipbook experience. When you upload a PDF and create a flipbook, FlipLink uses Three.js to render each page as a 3D surface with realistic [page-flip animations](/glossary/page-flip-animation). Every page turn is calculated in real time: the paper deforms along a curve, the underside of the page becomes visible, and dynamic shadows shift across the spread. The renderer supports different [cover types](/glossary/cover-type) — [hardcover](/glossary/hardcover) and [paperback](/glossary/paperback) — each with distinct bending behavior and spine mechanics. Three.js renders the entire scene using the reader's GPU, so animations stay smooth without server-side processing. FlipLink also offers a PDF.js-based [document viewer](/glossary/document-viewer) for situations where a simpler layout is preferred, letting publishers choose the right format per publication.

Under the hood, FlipLink's Three.js integration involves several rendering stages. Each PDF page is rasterized and applied as a texture to a subdivided plane geometry. When the reader initiates a page turn, the geometry vertices are displaced along a Bezier curve to simulate paper bending. A directional light source positioned above the book generates real-time shadow maps, so the curling page casts a shadow onto the page beneath it. The camera uses a perspective projection, giving the book a natural sense of depth that flat orthographic projections lack. On devices with limited GPU power, Three.js automatically reduces polygon counts and simplifies shadow calculations to maintain a fluid frame rate. The entire rendering pipeline runs on the client side, meaning no video streaming or server rendering is required — the reader's own device handles everything.

CSS 3D transforms (`transform: rotateY()`, `perspective()`) can flip flat elements in 3D space and are sometimes used for simple page-turn effects. However, CSS 3D operates on rectangular DOM elements and cannot deform them — a page can rotate but never curl, bend, or fold. Three.js, by contrast, works with mesh geometry made of many vertices, so it can simulate paper deformation, varying thickness, spine curvature, and shadow casting. CSS 3D is lighter and easier to implement for basic card-flip interactions, but it cannot reproduce the [realistic book simulation](/glossary/realistic-book-simulation) that readers associate with a physical book. For publishers who want the look and feel of a real printed document, Three.js is the engine that makes it possible.

Three.js brings GPU-powered 3D rendering to the browser, enabling FlipLink to deliver flipbooks with realistic page curling, dynamic shadows, and perspective depth — an experience that flat viewers and CSS-based animations cannot match.