Un système solaire 3D dans votre navigateur

[Violence]

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 comme 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.

---

– Sources :

Reddit

https://3d-solar-system-three-js.vercel.app/

https://korben.info/systeme-solaire-votre-navigateur-vous-faire.html

[Mister158]

c’est pas mal du tout ce truc !!!

[p bone]

J’aime beaucoup.

[Ern Dorr]

C’est somptueux, un grand merci @Violence pour cette trouvaille.