En vous baladant sur Internet, vous croisez certainement de plus en plus de sites qui proposent des éléments 3D, parfois même interactifs, au sein de leur interface. Contrairement à ce que vous pourriez penser, il ne s’agit pas de vidéo, mais bel est bien d’éléments 3D au sein de votre navigateur ! Mais comment diable est-ce possible ? 🧐
Réponse : La majorité d’entre eux, font appel à une libraire Javascript qui existe depuis 2010 et qui s’appelle Three.JS.
Pas tout jeune, Tree.JS connait pourtant depuis plusieurs mois un certain essor. Il est donc peut être temps de vous y intéresser et voire même, de vous y mettre 💪
Quelques exemples de sites qui utilisent Three.js
Commençons déjà par vous aider à vous faire concrètement une idée sur ce que ThreeJS est capable de faire ! Voici donc une petite sélection de sites Internet utilisant cette techno :
- L’intégration de petits éléments 3D interactifs dans un site : La Terre interactive sur la page d’accueil de Github ou le petit camion du logiciel FTP Transmit.
- Ou carrément des portfolios : Le site de l’Agence Midwam , celui de Guillaume Gouessan ou encore Richard Mattka.
- Des sites de ventes ! Le site Ecommerce pour le Velo de la marque VanMoof
ou le magnifique site du Champagne Chartogne Taillet (on l’adore 😊 ). - Ou bien encore, d’autres expérimentations en tout genre : https://fremtidensuddannelser.dk/en, https://cineshader.com/, https://go.pioneer.com/cornrevolution, https://www.kodeclubs.com/
Comme vous avez pu le constater, Three.Js permet de créer des expériences interactives et visuelles très différenciantes, dans un web qui est devenu un peu statique et « plat », suite à la disparition de Flash et l’apparition des sites « Boostrapés » qui se ressemblent un peu tous, il faut bien se l’avouer…
C’est donc une techno qui vous permettra de vous différencier.
Allez on vous re-balance encore 1 petit exemple visible directement dans l’article, tellement on est excité 🤪
See the Pen TinyPolyWorld – ThreeJS experiements. by Zultan (@Zultan) on CodePen.dark
Quels sont les pré-requis pour utiliser la librairie Three.js ?
Pour utiliser et profiter de toute la puissance de Three.js, il est important d’avoir de bonnes bases en HTML, CSS mais surtout JavaScript.
Comme toute librairie, il s’agira de l’importer dans votre projet.
Mais, avant d’aller plus loin, il est intéressant d’introduire 2 notions : le WebGL et les Canvas.
- Le WebGL correspond à une API JavaScript qui permet d’avoir du rendu 3D au sein de l’affichage du navigateur web.
- Le Canvas (ou canevas en français) est un composant HTML qui permet de générer un rendu graphique.
Ce mix Canvas WebGL permet donc à Three.js d’exécuter des scènes 3D sans demander à l’utilisateur final d’installer le moindre plugin (comme c’était le cas par exemple avec Shockwave à une époque reculée…)
Rajoutons que, comme Three.Js vous permet de manier des objets et des scènes 3D, avoir une acculturation à la 3D sera un vrai plus.
Comment ça fonctionne ?
La librairie Three.js propose de nombreuses formules ou fonctions déjà pré-établies qui utilisent le WebGL dans un Canvas HTML5.
Nous simplifions ici car, en réalité, Three.js peut aussi générer le résultat dans un canvas 2D « classique », notamment en cas d‘incompatibilité du navigateur utilisé.
Mais, si vous vous êtes déjà intéressé à WebGL, vous savez que c’est un système de bas niveau. Il dessine simplement des points, des lignes et des triangles. Alors, quand il s’agit d’utiliser celui-ci pour réaliser quelque chose d’élaboré en images de synthèse, il y a de quoi prendre peur 😰
Et c’est là que Three.js intervient.
Comme toute librairie, elle facilite votre travail. Et c’est ici peu de le dire ! Avec elle, vous obtenez des résultats impressionnants sans écrire de lignes de code complexes. De simples fonctions vous permettent d’obtenir des formes complexes, des ombres, des lumières, des effets de matière et de texture…
Notez tout de même que, en plus de compétences de programmation, il vous faut avoir quelques bases sur la création graphique en 3D. Pour coder avec cette librairie, vous devez organiser :
- une scène ;
- des objets 3D et/ou des Mesh ;
- un point de vue (l’objet caméra) ;
- des lumières, etc.
Le moteur du rendu permet également d’animer les objets 3D, en interaction avec l’environnement, jusqu’à 60 images par seconde.
Si vous avez l’habitude d’utiliser des logiciels d’animation 3D, comme Blender par exemple, vous ne serez pas perdu. Il existe de nombreuses similitudes entre les fonctions de la librairie Three.js et les systèmes d’animation que l’on retrouve dans ces logiciels 3D.
Petite analogie avec la vidéo pour mieux comprendre le fonctionnement de Three.js
- La scène correspond à l’ensemble de ce que vous voulez filmer.
- L’objet (ou Mesh) correspond à ce qui est présent, fixe ou en mouvement. Il faut lui donner une forme, une matière, une consistance. Tout ceci se fait à l’aide de fonctions présentes dans la librairie Three.js. Une scène peut comprendre, bien sûr, plusieurs objets 3D en mouvement.
- Le point de vue s’apparente à l’endroit où vous placeriez votre caméra pour filmer la scène.
- Et, pour mettre en valeur votre (ou vos) objet(s), vous devez placer des lumières.
- L’animation est le mouvement que vous demandez à votre objet. L’action ! Celle-ci se fait par rapport à votre point de vue 😉
Three.js : quels avantages ?
- La solution est robuste. Elle a fait ses preuves (près d’une décennie !)
- De nombreuses ressources peuvent être trouvées (en plus de la documentation officielle)
- Afficher de la 3D sur un site sans plugin, c’est quand même le must en terme d’expérience utilisateur !
- En prenant en main cette librairie, vos sites internet sortiront du lot.
Mais d’autres solutions existent aussi…
Actuellement Babylon.js prend également de l’ampleur. Une autre librairie JS créée par 2 salariés de Microsoft (dont un français, David Rousset 🤘).
Conclusion
Au delà de l’aspect techno, il nous parait certain que l’usage de la 3D au sein, des navigateurs va continuer à se développer dans les prochaines années.
Vous êtes développeur front-end ou fullstack ?
👉 La 3D peut devenir votre nouveau terrain de jeu.
Et vous n’êtes même pas obligé de vous lancer dans la formation d’un logiciel 3D.
De nombreuses ressources 3D libres de droit sont à votre disposition sur Internet.
Et vous avez toujours la possibilité de vous associer avec un infographiste 3D (Blender, Unity…) qui pourra vous aider à créer des projets sur mesure.
Bref : un nouveau terrain d’expérimentation s’ouvre à vous et à vos visiteurs.
Plutôt fun non ?
On espère que cet article vous aura donné envie d’en savoir un peu plus sur Three.js. Et nous espérons pouvoir vous proposer rapidement les premiers tutos sur le sujet !
A très vite 😀
(5859)