Three.js

Three.js est une bibliothèque JavaScript open source qui affiche des graphismes 3D dans les navigateurs web à l'aide de [WebGL](/glossary/webgl). Elle masque la complexité de l'API WebGL en offrant aux développeurs une boîte à outils de haut niveau pour construire des scènes 3D avec caméras, éclairage, matériaux, géométrie et boucles d'animation. Créée à l'origine par Ricardo Cabello (Mr.doob) en 2010, Three.js est devenue la bibliothèque 3D la plus largement adoptée pour le web, utilisée dans tout, des configurateurs de produits et visites architecturales aux visualisations de données et à la narration interactive. Comme elle s'exécute sur le GPU via WebGL, Three.js peut afficher des scènes complexes à 60 images par seconde sur du matériel moderne, sans nécessiter de plugins ni d'installation d'application native.

Three.js rend possible un rendu 3D haute fidélité au sein d'un simple onglet de navigateur. Pour la publication numérique, cette capacité est transformatrice. Au lieu de livrer des images plates de pages imprimées, les éditeurs peuvent présenter du contenu avec une profondeur physique, un éclairage réaliste et des animations fluides. Les lecteurs interagissent avec des pages qui se courbent, projettent des ombres et répondent au toucher ou à la souris, créant une sensation tactile que les PDF statiques ne peuvent reproduire. La bibliothèque fonctionne sur tous les principaux navigateurs (Chrome, Firefox, Safari, Edge) et s'adapte à un large éventail d'appareils, des ordinateurs de bureau haut de gamme aux smartphones de milieu de gamme. Cette portée multiplateforme signifie que les éditeurs peuvent offrir une expérience de lecture premium sans restreindre leur audience à une application ou à un système d'exploitation précis.

Three.js est le moteur de rendu au cœur de l'expérience flipbook de FlipLink. Quand tu téléverses un PDF et crées un flipbook, FlipLink utilise Three.js pour afficher chaque page comme une surface 3D avec des [animations de tourne-page](/glossary/page-flip-animation) réalistes. Chaque tour de page est calculé en temps réel : le papier se déforme le long d'une courbe, le dessous de la page devient visible et des ombres dynamiques se déplacent sur la double page. Le moteur de rendu prend en charge différents [types de couverture](/glossary/cover-type) — [couverture rigide](/glossary/hardcover) et [couverture souple](/glossary/paperback) — chacun avec un comportement de pliage et une mécanique de reliure distincts. Three.js affiche toute la scène en utilisant le GPU du lecteur, de sorte que les animations restent fluides sans traitement côté serveur. FlipLink propose aussi un [lecteur de documents](/glossary/document-viewer) basé sur PDF.js pour les situations où une mise en page plus simple est préférable, laissant les éditeurs choisir le bon format pour chaque publication.

En coulisses, l'intégration de Three.js dans FlipLink fait intervenir plusieurs étapes de rendu. Chaque page PDF est tramée et appliquée comme texture à une géométrie de plan subdivisée. Quand le lecteur amorce un tour de page, les sommets de la géométrie sont déplacés le long d'une courbe de Bézier pour simuler le pliage du papier. Une source de lumière directionnelle positionnée au-dessus du livre génère des cartes d'ombre en temps réel, de sorte que la page qui se courbe projette une ombre sur la page en dessous. La caméra utilise une projection en perspective, donnant au livre une sensation naturelle de profondeur que les projections orthographiques plates n'ont pas. Sur les appareils à puissance GPU limitée, Three.js réduit automatiquement le nombre de polygones et simplifie les calculs d'ombre pour maintenir une fréquence d'images fluide. Tout le pipeline de rendu s'exécute côté client, ce qui signifie qu'aucun streaming vidéo ni rendu serveur n'est requis — l'appareil même du lecteur gère tout.

Les transformations CSS 3D (`transform: rotateY()`, `perspective()`) peuvent retourner des éléments plats dans un espace 3D et servent parfois à de simples effets de tourne-page. Cependant, le CSS 3D opère sur des éléments DOM rectangulaires et ne peut pas les déformer — une page peut pivoter mais jamais se courber, se plier ou s'enrouler. Three.js, en revanche, travaille avec une géométrie de maillage composée de nombreux sommets, ce qui lui permet de simuler la déformation du papier, des épaisseurs variables, la courbure de la reliure et la projection d'ombres. Le CSS 3D est plus léger et plus facile à mettre en œuvre pour des interactions basiques de retournement de carte, mais il ne peut pas reproduire la [simulation de livre réaliste](/glossary/realistic-book-simulation) que les lecteurs associent à un livre physique. Pour les éditeurs qui veulent l'aspect et la sensation d'un vrai document imprimé, Three.js est le moteur qui le rend possible.

Three.js apporte un rendu 3D propulsé par le GPU au navigateur, permettant à FlipLink de proposer des flipbooks avec un enroulement de page réaliste, des ombres dynamiques et une profondeur en perspective — une expérience que les lecteurs plats et les animations en CSS ne peuvent égaler.