Three.js

Three.js è una libreria JavaScript open-source che renderizza grafiche 3D nei browser web utilizzando [WebGL](/glossary/webgl). Astrae la complessità dell'API [WebGL](/glossary/webgl), offrendo agli sviluppatori un toolkit di alto livello per costruire scene 3D con telecamere, illuminazione, materiali, geometria e cicli di animazione. Creata originariamente da Ricardo Cabello (Mr.doob) nel 2010, Three.js è diventata la libreria 3D più diffusa per il web, utilizzata in configuratori di prodotto, tour architettonici, visualizzazioni di dati e storytelling interattivo. Poiché sfrutta la GPU tramite WebGL, Three.js può renderizzare scene complesse a 60 fotogrammi al secondo su hardware moderno senza plugin o installazioni native.

Three.js rende possibile il rendering 3D ad alta fedeltà all'interno di una normale scheda del browser. Per l'editoria digitale, questa capacità è trasformativa. Invece di offrire immagini piatte di pagine stampate, gli editori possono presentare contenuti con profondità fisica, illuminazione realistica e animazioni fluide. I lettori interagiscono con pagine che si arricciano, proiettano ombre e rispondono al tocco o al mouse, creando una sensazione tattile che i PDF statici non possono replicare. La libreria funziona su tutti i principali browser (Chrome, Firefox, Safari, Edge) e si adatta a un'ampia gamma di dispositivi, dai desktop di fascia alta agli smartphone di gamma media. Questa portata multipiattaforma permette agli editori di offrire un'esperienza di lettura premium senza limitare il pubblico a un'app o un sistema operativo specifico.

Three.js è il motore di rendering alla base dell'esperienza [flipbook](/glossary/flipbook) di FlipLink. Quando caricate un PDF e create un flipbook, FlipLink usa Three.js per renderizzare ogni pagina come superficie 3D con realistiche [animazioni di sfoglio pagine](/glossary/page-flip-animation). Ogni voltata di pagina è calcolata in tempo reale: la carta si deforma lungo una curva, il retro della pagina diventa visibile e le ombre dinamiche si spostano sulla doppia pagina. Il renderer supporta diversi [tipi di copertina](/glossary/cover-type) — [copertina rigida](/glossary/hardcover) e [brossura](/glossary/paperback) — ciascuno con comportamenti di piegatura e meccaniche del dorso distinti. Three.js renderizza l'intera scena usando la GPU del lettore, quindi le animazioni restano fluide senza elaborazione lato server. FlipLink offre anche un [visualizzatore documenti](/glossary/document-viewer) basato su [PDF.js](/glossary/pdf-js) per le situazioni in cui si preferisce un layout più semplice, lasciando agli editori la scelta del formato migliore per ogni pubblicazione.

Dietro le quinte, l'integrazione Three.js di FlipLink coinvolge diverse fasi di rendering. Ogni pagina PDF viene rasterizzata e applicata come texture a una geometria piana suddivisa. Quando il lettore avvia una voltata di pagina, i vertici della geometria vengono spostati lungo una curva di Bézier per simulare la piegatura della carta. Una fonte di luce direzionale posizionata sopra il libro genera mappe d'ombra in tempo reale, così la pagina che si arriccia proietta un'ombra sulla pagina sottostante. La telecamera utilizza una proiezione prospettica, conferendo al libro una naturale sensazione di profondità che le proiezioni ortografiche piatte non hanno. Sui dispositivi con GPU limitata, Three.js riduce automaticamente il conteggio dei poligoni e semplifica i calcoli delle ombre per mantenere un frame rate fluido. L'intera pipeline di rendering funziona lato client, quindi non è necessario alcuno streaming video o rendering server — il dispositivo del lettore gestisce tutto.

Le trasformazioni CSS 3D (`transform: rotateY()`, `perspective()`) possono ruotare elementi piatti nello spazio 3D e vengono talvolta usate per semplici effetti di voltata pagina. Tuttavia, CSS 3D opera su elementi DOM rettangolari e non può deformarli — una pagina può ruotare ma mai arricciarsi, piegarsi o ripiegarsi. Three.js, al contrario, lavora con geometrie mesh composte da molti vertici, permettendo di simulare la deformazione della carta, lo spessore variabile, la curvatura del dorso e la proiezione delle ombre. CSS 3D è più leggero e più facile da implementare per interazioni base di tipo card-flip, ma non può riprodurre la [simulazione realistica del libro](/glossary/realistic-book-simulation) che i lettori associano a un libro fisico. Per gli editori che desiderano l'aspetto e la sensazione di un vero documento stampato, Three.js è il motore che lo rende possibile.

Three.js porta il rendering 3D accelerato dalla GPU nel browser, permettendo a FlipLink di offrire flipbook con arricciolatura realistica delle pagine, ombre dinamiche e profondità prospettica — un'esperienza che i visualizzatori piatti e le animazioni basate su CSS non possono eguagliare.