Three.js

Three.js is een open-source JavaScript-bibliotheek die 3D-graphics rendert in webbrowsers met behulp van [WebGL](/glossary/webgl). Het abstraheert de complexiteit van de [WebGL](/glossary/webgl) API en biedt ontwikkelaars een high-level toolkit voor het bouwen van 3D-scènes met camera's, belichting, materialen, geometrie en animatielussen. Oorspronkelijk gemaakt door Ricardo Cabello (Mr.doob) in 2010, is Three.js de meest gebruikte 3D-bibliotheek voor het web geworden, ingezet in productconfiguratoren, architecturale rondleidingen, datavisualisaties en interactieve storytelling. Omdat het via WebGL op de GPU draait, kan Three.js complexe scènes renderen met 60 frames per seconde op moderne hardware zonder plugins of native installaties.

Three.js maakt high-fidelity 3D-rendering mogelijk in een gewone browsertab. Voor digitaal publiceren is dit vermogen transformatief. In plaats van platte afbeeldingen van gedrukte pagina's te leveren, kunnen uitgevers content presenteren met fysieke diepte, realistische belichting en vloeiende animatie. Lezers interageren met pagina's die krullen, schaduwen werpen en reageren op aanraking of muisinvoer, waardoor een tastbare ervaring ontstaat die statische PDF's niet kunnen nabootsen. De bibliotheek werkt in alle grote browsers (Chrome, Firefox, Safari, Edge) en past zich aan een breed scala aan apparaten aan, van high-end desktops tot mid-range smartphones. Dit cross-platform bereik stelt uitgevers in staat een premium leeservaring te bieden zonder hun publiek te beperken tot een specifieke app of besturingssysteem.

Three.js is de centrale rendering-engine achter FlipLink's [flipbook](/glossary/flipbook)-ervaring. Wanneer je een PDF uploadt en een flipbook maakt, gebruikt FlipLink Three.js om elke pagina te renderen als een 3D-oppervlak met realistische [paginaomslaganimaties](/glossary/page-flip-animation). Elke paginaomslag wordt in real-time berekend: het papier vervormt langs een curve, de achterkant van de pagina wordt zichtbaar en dynamische schaduwen verschuiven over de spread. De renderer ondersteunt verschillende [omslagtypes](/glossary/cover-type) — [hardcover](/glossary/hardcover) en [paperback](/glossary/paperback) — elk met eigen buiggedrag en rugmechanica. Three.js rendert de hele scène met de GPU van de lezer, zodat animaties vloeiend blijven zonder server-side verwerking. FlipLink biedt ook een [PDF.js](/glossary/pdf-js)-gebaseerde [documentviewer](/glossary/document-viewer) voor situaties waar een eenvoudiger layout de voorkeur heeft, zodat uitgevers per publicatie het juiste formaat kunnen kiezen.

Onder de motorkap omvat FlipLink's Three.js-integratie meerdere renderingfasen. Elke PDF-pagina wordt gerasterd en als textuur toegepast op een gesubdivide vlakke geometrie. Wanneer de lezer een paginaomslag initieert, worden de geometrievertices verplaatst langs een Bézier-curve om het buigen van papier te simuleren. Een directionele lichtbron boven het boek genereert real-time schaduwkaarten, zodat de krullende pagina een schaduw werpt op de onderliggende pagina. De camera gebruikt een perspectieve projectie, waardoor het boek een natuurlijk gevoel van diepte krijgt dat platte orthografische projecties missen. Op apparaten met beperkte GPU-kracht vermindert Three.js automatisch het aantal polygonen en vereenvoudigt schaduwberekeningen om een vloeiende framerate te behouden. De gehele renderingpipeline draait client-side — geen videostreaming of server-rendering nodig, het apparaat van de lezer doet al het werk.

CSS 3D-transformaties (`transform: rotateY()`, `perspective()`) kunnen platte elementen in 3D-ruimte draaien en worden soms gebruikt voor eenvoudige paginaomslageffecten. CSS 3D werkt echter met rechthoekige DOM-elementen en kan deze niet vervormen — een pagina kan roteren maar nooit krullen, buigen of vouwen. Three.js daarentegen werkt met mesh-geometrieën van veel vertices, waardoor het papiervervorming, variërende dikte, rugkromming en schaduwprojectie kan simuleren. CSS 3D is lichter en makkelijker te implementeren voor eenvoudige card-flip-interacties, maar kan de [realistische boeksimulatie](/glossary/realistic-book-simulation) niet reproduceren die lezers associëren met een fysiek boek. Voor uitgevers die het uiterlijk en gevoel van een echt gedrukt document willen, is Three.js de engine die dat mogelijk maakt.

Three.js brengt GPU-aangedreven 3D-rendering naar de browser, waardoor FlipLink flipbooks kan leveren met realistische paginakrulling, dynamische schaduwen en perspectiefdiepte — een ervaring die platte viewers en CSS-gebaseerde animaties niet kunnen evenaren.