10 superbes exemples open-source de Three.js en action

Cela peut sembler fou, mais vous pouvez réellement créer des objets 3D avec JavaScript. La plupart des développeurs Web s'appuient sur des bibliothèques telles que Three.js pour y parvenir.

Mais c'est un processus tellement détaillé que tout le monde ne prend pas la peine de s'y intéresser. Maintenant, si vous êtes curieux de connaître les trucs 3D JS, la meilleure façon d'apprendre est d'étudier les autres. C'est exactement pourquoi j'ai créé cette galerie.

Voici quelques-uns des meilleurs projets Three.js que j'ai pu trouver hébergés sur CodePen. Ils présentent un tas de styles et de caractéristiques différents qui stimuleront votre moteur créatif.

1. Terre Low Poly

Avec un seul élément HTML et quelques dizaines de lignes de CSS/JS, nous avons ce low poly Earth du développeur Sam Saccone.

Cela peut ne pas sembler beaucoup au début. Mais c'est l'une des idées les plus importantes que j'ai vues et elle utilise même un effet d'animation personnalisé. Les masses continentales dépassent même de la Terre, ce qui lui donne une apparence beaucoup plus réaliste.

Quiconque a déjà utilisé Three.js devrait savoir à quel point c'est génial.

C'est certainement une longueur d'avance sur des projets similaires - principalement pour sa base de code plus petite.

2. Sphères

Cet étrange projet semblable à une planète utilise également Three.js avec un effet assez soigné. Spheres s'exécute sur le préprocesseur Stylus, que vous pouvez voir importé dans le CSS.

Il fonctionne également sans HTML - ce qui en fait vraiment un spectacle à voir. Tout est JS, tout en 3D et fonctionne parfaitement dans tous les navigateurs modernes.

Les plus petites sphères glissent sur le plus grand orbe en utilisant les fonctions géométriques de la bibliothèque JS. Cela semble fou que cela soit même possible, mais cela témoigne du chemin parcouru avec CSS.

3. Rotation de la planète

Entrant dans d'autres idées de planétoïdes, nous avons cette galaxie rotative folle créée par le développeur Bryan Jones.

Il n'utilise également que Three.js et quelques CSS de base pour styliser et organiser les planètes. Je dois dire que les effets 3D sont surprenants. Je n'arrive toujours pas à comprendre que ce genre de choses est possible dans un navigateur Web typique !

Mais il est indéniable que cet extrait CodePen est une excellente aide à l'étude si vous débutez sur le territoire de Three.js.

4. Logo de la cabane dans les arbres dans Three.js

La ressource d'apprentissage en ligne Treehouse est tout simplement phénoménale, en particulier pour les débutants. L'un de leurs instructeurs, Nick Pettit, a en fait créé un logo Treehouse complet à l'aide de Three.js.

Et laissez-moi vous dire que ce truc est génial ! Je n'ai jamais vu une configuration comme celle-ci et je vois rarement des stylos qui ont des commentaires aussi détaillés. Le code de Nick permet de creuser beaucoup plus facilement, de trouver des fonctions que vous ne comprenez pas, puis de cliquer sur Google pour obtenir des réponses.

Tout dans ce logo 3D devrait prouver que le JS moderne est loin d'être obsolète.

Astuce : essayez de cliquer et de faire glisser sur l'écran pour faire pivoter le logo. Truc amusant!

5. Tonneau en bois

Voici un autre extrait fou développé par Nick Pettit en utilisant uniquement du code JS pur. Pas de HTML, pas de CSS - tout est rendu via le langage JavaScript.

Naturellement, cela repose sur l'élément canvas, que vous pouvez générer dans JavaScript. Je l'ai utilisé un peu moi-même - mais jamais à ce niveau. Cela montre à quel point vous pouvez faire avec une bibliothèque 3D solide.

Et cela prouve également que Nick sait vraiment comment enseigner. Ce n'est qu'un des nombreux exemples de son compte CodePen - qui ont tous des commentaires faciles à lire pour apprendre au fur et à mesure.

6. Three.js + TweenMax

Le développeur Martand Kashyap a combiné le script TweenMax avec Three.js pour créer ce truc fou.

C'est l'un des stylos les plus uniques de cette liste, avec des effets d'animation sympas. Les panneaux ressemblent en fait à des surfaces 2D plates, mais les animations de retournement créent un effet 3D naturel. Cela devient assez fou si vous le regardez assez longtemps.

C'était en fait basé sur un projet d'animation graphique que Martand a converti en JavaScript. Je vois ça beaucoup plus souvent et c'est sacrément impressionnant.

7. Champ d'étoiles à particules

Le concept de mouvement sur une surface 2D évoque toutes sortes de conceptions de parallaxe. Vous les trouverez partout sur le Web, souvent en utilisant des fonctionnalités expérimentales en JavaScript.

Et cet extrait de CodePen est plus que fantastique pour rassembler de telles idées. Il a une animation assez folle avec différentes vitesses de zoom, un panoramique latéral et un tas d'autres fonctionnalités connexes.

Les particules sont générées dynamiquement et vous pouvez cliquer n'importe où sur la page pour zoomer. Cela ressemble à un vide d'espace sans fin - un peu comme celui dans lequel nous vivons. Mais celui-ci est créé avec du code JS pur.

8. Cubes Haml

Pour une géométrie plus rotative, consultez ces cubes Three.js. Ils fonctionnent sur le langage de template Haml avec environ 100 lignes de JavaScript.

La partie la plus impressionnante de cette conception est peut-être l'effet d'ombrage. Vous ne voyez pas cela très souvent, mais c'est l'un des meilleurs moyens de créer un effet 3D réaliste dans le navigateur.

Heureusement, vous pouvez tout gérer via Three.js - avec les bons extraits. Et celui-ci peut fonctionner comme un excellent modèle à cette fin.

9. Tesseract

Mike Fey a développé ce tesseract incroyablement complexe rendu dans l'espace 3D. En fait, cela ressemble plus à un cube déplié organisé en espace 3D - un peu comme un cube dans un cube.

Mais notez que cette démo nécessite beaucoup de bibliothèques pour fonctionner. Mike a cinq scripts JS différents avec jQuery, jQuery UI, ThreeJS, TweenJS et un script CubeJS. Ces 3 derniers sont hébergés sur son site personnel et devraient être libres d'accès.

Je ne peux pas dire que ce projet serait utile dans le monde réel. Mais c'est une sacrée ressource d'apprentissage si vous voulez vous plonger dans la géométrie spatiale 3D.

10. Éclats 3D

Le développeur Tobias Duhr a construit ces fragments 3D comme un échantillon de ce qui est possible dans ThreeJS. Ils fonctionnent comme les cubes rotatifs mentionnés précédemment, sauf que les formes sont différentes et que l'ombrage a également disparu.

Je considérerais cela comme une introduction plus facile pour apprendre ThreeJS si vous ne savez pas par où commencer. Certes, ce n'est pas un didacticiel, il ne peut donc pas vous apprendre comme d'autres ressources.

Mais, rien qu'en étudiant ce code, vous repartirez avec de nouvelles idées pour votre propre travail.

11. Arbre de Pythagore 3D

Cet arbre de Pythagore 3D est tout simplement magnifique. Le développeur Josep Llodra a créé ce projet avec seulement 150 lignes de JavaScript, aux côtés de la bibliothèque Three.js.

C'est en fait basé sur ce projet, dont j'ai parlé plus tôt. Fondamentalement, il structure ces cubes en une seule forme définie, puis les organise en fonction de la taille et de la position.

Si vous n'êtes pas sûr de ce que vous pouvez faire avec Three.js, j'espère que cette galerie vous offrira un peu d'inspiration. Mais vous pouvez toujours en trouver plus sur CodePen si vous êtes prêt à regarder autour de vous.