Three.js

Three.js ist eine Open-Source-JavaScript-Bibliothek, die 3D-Grafiken in Webbrowsern mittels [WebGL](/glossary/webgl) rendert. Sie abstrahiert die Komplexität der [WebGL](/glossary/webgl)-API und bietet Entwicklern ein High-Level-Toolkit zum Aufbau von 3D-Szenen mit Kameras, Beleuchtung, Materialien, Geometrie und Animationsschleifen. Ursprünglich 2010 von Ricardo Cabello (Mr.doob) erstellt, hat sich Three.js zur meistverwendeten 3D-Bibliothek für das Web entwickelt — eingesetzt in Produktkonfiguratoren, Architektur-Rundgängen, Datenvisualisierungen und interaktivem Storytelling. Da sie über WebGL auf der GPU läuft, kann Three.js komplexe Szenen mit 60 Bildern pro Sekunde auf moderner Hardware rendern, ohne Plugins oder native Installationen.

Three.js macht hochwertige 3D-Darstellung in einem normalen Browser-Tab möglich. Für digitales Publizieren ist diese Fähigkeit transformativ. Statt flacher Abbilder gedruckter Seiten können Verleger Inhalte mit physischer Tiefe, realistischer Beleuchtung und flüssiger Animation präsentieren. Leser interagieren mit Seiten, die sich kräuseln, Schatten werfen und auf Touch oder Mauseingaben reagieren — ein haptisches Gefühl, das statische PDFs nicht nachbilden können. Die Bibliothek funktioniert in allen gängigen Browsern (Chrome, Firefox, Safari, Edge) und passt sich an eine breite Palette von Geräten an, von High-End-Desktops bis zu Mittelklasse-Smartphones. Diese plattformübergreifende Reichweite ermöglicht es Verlegern, ein erstklassiges Leseerlebnis zu bieten, ohne ihr Publikum auf eine bestimmte App oder ein Betriebssystem zu beschränken.

Three.js ist die zentrale Rendering-Engine hinter FlipLinks [Flipbook](/glossary/flipbook)-Erlebnis. Wenn du ein PDF hochlädst und ein Flipbook erstellst, nutzt FlipLink Three.js, um jede Seite als 3D-Oberfläche mit realistischen [Seitenumblätter-Animationen](/glossary/page-flip-animation) darzustellen. Jede Seitenwende wird in Echtzeit berechnet: Das Papier verformt sich entlang einer Kurve, die Rückseite der Seite wird sichtbar und dynamische Schatten wandern über die Doppelseite. Der Renderer unterstützt verschiedene [Cover-Typen](/glossary/cover-type) — [Hardcover](/glossary/hardcover) und [Paperback](/glossary/paperback) — jeweils mit eigenem Biegeverhalten und eigener Rückenmechanik. Three.js rendert die gesamte Szene über die GPU des Lesers, sodass Animationen ohne serverseitige Verarbeitung flüssig bleiben. Für Situationen, in denen ein einfacheres Layout bevorzugt wird, bietet FlipLink alternativ einen [PDF.js](/glossary/pdf-js)-basierten [Dokument-Viewer](/glossary/document-viewer), sodass Verleger pro Publikation das passende Format wählen können.

Unter der Haube umfasst FlipLinks Three.js-Integration mehrere Rendering-Stufen. Jede PDF-Seite wird gerastert und als Textur auf eine unterteilte Ebenengeometrie aufgebracht. Wenn der Leser eine Seitenwende initiiert, werden die Geometrie-Vertices entlang einer Bézier-Kurve verschoben, um die Papierbiegung zu simulieren. Eine gerichtete Lichtquelle über dem Buch erzeugt Echtzeit-Schattenkarten, sodass die sich krümmende Seite einen Schatten auf die darunterliegende Seite wirft. Die Kamera verwendet eine Perspektivprojektion, die dem Buch ein natürliches Tiefengefühl verleiht, das flache orthographische Projektionen nicht bieten. Auf Geräten mit begrenzter GPU-Leistung reduziert Three.js automatisch die Polygonanzahl und vereinfacht die Schattenberechnungen, um eine flüssige Bildrate beizubehalten. Die gesamte Rendering-Pipeline läuft clientseitig — kein Video-Streaming oder Server-Rendering nötig, das Gerät des Lesers übernimmt alles.

CSS-3D-Transformationen (`transform: rotateY()`, `perspective()`) können flache Elemente im 3D-Raum drehen und werden manchmal für einfache Seitenumblätter-Effekte verwendet. Allerdings arbeitet CSS 3D mit rechteckigen DOM-Elementen und kann diese nicht verformen — eine Seite kann rotieren, sich aber nie kräuseln, biegen oder falten. Three.js hingegen arbeitet mit Mesh-Geometrien aus vielen Vertices und kann so Papierverformung, variierende Dicke, Rückenkrümmung und Schattenprojektion simulieren. CSS 3D ist leichter und einfacher zu implementieren für einfache Card-Flip-Interaktionen, kann aber die [realistische Buchsimulation](/glossary/realistic-book-simulation) nicht reproduzieren, die Leser mit einem physischen Buch verbinden. Für Verleger, die das Aussehen und Anfühlen eines echten Druckdokuments wollen, ist Three.js die Engine, die das möglich macht.

Three.js bringt GPU-beschleunigtes 3D-Rendering in den Browser und ermöglicht FlipLink, Flipbooks mit realistischer Seitenkrümmung, dynamischen Schatten und Perspektivtiefe zu liefern — ein Erlebnis, das flache Viewer und CSS-basierte Animationen nicht erreichen können.