J’aime bien quand des développeurs utilisent la technologie pour rendre accessible des concepts complexes. Alors après le système solaire, vous allez pouvoir visualiser des atomes en 3D de manière totalement interactive. Comme ça, s’en est terminé des schémas statiques dans les manuels de physique ! Ici, grâce à AtomAnimation, vous pourrez faire tourner, zoomer, observer sous tous les angles des structures atomiques qui prennent même vie sous vos yeux.

Ce projet, développé par matt765, utilise une stack technologique bien moderne à base de React 19, NextJS 15, TypeScript, CSS Modules, Zustand pour la gestion d’état, ThreeJS pour la 3D, et Recharts pour les graphiques. En gros, tout ce qu’il faut pour créer une expérience utilisateur fluide et moderne.

Il y a même des graphs et une table périodique ainsi que des tas de filtres pour par exemple visualiser les atomes par densité, électronégativité, point de fusion et j’en passe…

Et ce qui rend ce projet vraiment intéressant, c’est qu’il permet à tous mais surtout aux étudiants d’explorer les structures atomiques de manière dynamique. Comme ça, on apprend des choses et c’est pas chiant car au lieu de simplement regarder une image figée d’un atome, on peut le manipuler, voir les électrons en mouvement qui lui tourne autour, et comprendre sa structure nucléaire. Bref, si vous êtes prof de physique, vos rêves les plus humides viennent de s’exaucer.

Le côté open-source rend le tout encore plus sympa puisque le code est disponible sur Github. Une fois encore avec WebGL et des bibliothèques comme ThreeJS, on peut faire des trucs vraiment chouette en web 3D.

Voilà, AtomAnimation.com est un super outil éducatif de plus à bookmarker !!

Elle est loin l’époque où on s’extasiait devant un gif animé de la Terre qui tournait. Mais non, rien de rien, je ne regrette rien car un développeur du nom de SoumyaEXE nous a pondu un système solaire complet avec 50 lunes et des ceintures d’astéroïdes, le tout qui tourne dans votre navigateur. Sans plugin. Sans téléchargement. Juste du JavaScript et sa magie.

En plus ce projet débarque pile au moment où de plus en plus de développeurs cherchent l’équilibre parfait entre la simplicité et la performance pour leurs applications web, et ce système solaire en est le parfait exemple. Les textures viennent directement de la NASA, les distances sont mises à l’échelle pour que votre cerveau puisse y comprendre quelque chose, et même votre vieux smartphone peut faire tourner le tout sans broncher ou presque.

J’ai passé plusieurs minutes à zoomer / dezoomer sur les lunes de Jupiter et les astéroides, et c’est assez hypnotisant. Pan, zoom, rotation… tout est fluide comme dans du Planta Fin ^^ et le dev a même pensé à ajouter des toggles pour afficher ou masquer les orbites, les labels, les ceintures d’astéroïdes. Bref, vous pouvez littéralement personnaliser votre exploration spatiale pour vous la jouer Thomas Pesquet en culottes courtes.

C’est fou surtout de voir comment Three.js a évolué. Sur les forums spécialisés, le développeurs explique que créer ce genre de simulation était sa motivation principale pour apprendre cette technologie, et je trouve ça bien comment façon de faire. Et quand on voit le résultat, je me dit que les limites du web sont vraiment repoussées chaque jour un peu plus.

Techniquement, le projet utilise également Vite pour le build, ce qui explique pourquoi tout est si rapide à charger. Les modèles 3D sont optimisés, les animations d’orbites sont calculées en temps réel, et pourtant, aucun ralentissement. C’est accessible, performant, et surtout open source.

D’ailleurs, parlant d’open source, tout le code est disponible sur GitHub. Donc vous pouvez le cloner, le modifier, ajouter d’autres objets si ça vous chante (Ou faire basculer Pluton du côté des planètes…^^), ou pourquoi pas le franciser. Et pour apprendre Three.js, c’est également un excellent point de départ.

Et si vous voulez une ambiance plus immersive, vous pouvez même ajouter de la musique d’Interstellar. Bon, ok, c’est un peu gadget, mais ça fait son petit effet.

Pour les développeurs qui lisent ça, sachez que le projet utilise les GLTFLoader et OrbitControls de Three.js, avec un système de caméra perspective bien pensé. L’éclairage combine ambient et directional lights pour donner ce rendu réaliste aux planètes. C’est du travail propre, bien commenté, et facilement extensible.

Donc si vous cherchez une excuse pour procrastiner intelligemment aujourd’hui, foncez tester cette merveille. Et qui sait, peut-être que ça vous donnera envie de vous lancer dans le développement web 3D.

Source