Site webWeb, sur mobile et ordinateur, 2026
Odyssée
Le Système solaire, au fil du scroll.
- Rôle
- Conception, design et développement
- Client
- Projet personnel
- Modèle
- Gratuit, sans compte
- Stack
- JavaScript, three.js, WebGL, GLSL, Vite, API NASA, Vercel
Le projet
Odyssée est un voyage au fil du scroll, du Soleil jusqu’à la Voie lactée : quatorze escales en 3D temps réel, où chaque astre est dessiné par le code et chaque chiffre du jour vient de la NASA.
Aucune planète n’est une photo. Le Soleil et sa couronne, les continents et les lumières des villes de la Terre, la Grande Tache rouge de Jupiter, les anneaux de Saturne avec la division de Cassini et l’ombre de la planète : tout est calculé par des shaders, image après image. La caméra suit le scroll, glisse d’une escale à l’autre et accélère pendant les trajets, avec des traînées de vitesse, un flou radial et une aberration chromatique.
À chaque escale, un panneau donne les repères essentiels, et trois sources de la NASA apportent l’actualité : l’image astronomique du jour, les astéroïdes qui frôlent la Terre cette semaine et les dernières éruptions solaires. Sur mobile, l’expérience reste complète : on pilote la caméra du doigt ou en inclinant le téléphone, et la qualité s’ajuste à l’appareil sans retirer d’animation.
Les visites du Système solaire en ligne présentent souvent les planètes une par une, comme des fiches. Odyssée part d’un trajet : on quitte le Soleil, on traverse les orbites dans l’ordre, avec la distance en unités astronomiques et le temps que met la lumière, jusqu’à voir notre galaxie de l’extérieur.
Fonctionnalités
- 1 / 5
Un voyage en quatorze escales
Le scroll pilote la caméra d’une escale à l’autre, en douceur, avec un léger arc et un roulis. Le grand nom de chaque escale, en Bodoni italique, s’inverse sur la planète, et la barre du haut donne la distance au Soleil et le temps-lumière.
- 2 / 5
Des astres sans aucune texture
Chaque surface est générée par des shaders GLSL : bruit, cratères, bandes des géantes en rotation différentielle, atmosphères plus lumineuses côté jour, anneaux qui reçoivent l’ombre de Saturne. Rien n’est téléchargé, tout est calculé.
- 3 / 5
Les données de la NASA en direct
Les dernières éruptions solaires, avec leur classe, leur date et leur région, viennent de la base DONKI. Chaque source qui ne répond pas bascule seule sur un instantané daté, et un témoin indique si les données sont en direct.
- 4 / 5
Les géocroiseurs de la semaine
Les astéroïdes qui passent près de la Terre dans les sept prochains jours sont tracés autour d’elle : le périgée de chaque orbite suit la vraie distance de passage, une traînée suit chaque roche, et les plus proches sont nommés.
- 5 / 5
La Voie lactée et l’image du jour
Le voyage se termine hors de notre galaxie : 65 000 points en bras spiraux, qui tournent plus vite près du centre. Sa carte affiche l’image astronomique du jour publiée par la NASA.
Sous le capot
Un site statique en JavaScript, construit autour de three.js, et une seule fonction serverless pour garder la clé de la NASA côté serveur.
- Frontthree.js et shaders
- three.js, Vite et JavaScript en modules, sans framework
- Shaders GLSL procéduraux : bruit simplex, fbm et Worley
- Post-traitement : halo lumineux et passe finale de vitesse
- Qualité adaptative : résolution, puis particules, puis ciel
- Version calme quand l’appareil demande moins d’animations
- BackUn proxy serverless
- Fonction Vercel qui sert de proxy aux API de la NASA
- Clé gardée côté serveur, masquée dans les réponses
- Cache d’une heure sur le CDN et dans le navigateur
- Instantané daté pour chaque source qui ne répond pas
- ServicesDonnées et hébergement
- NASA : image du jour, géocroiseurs NeoWs, éruptions DONKI
- Vercel : hébergement et fonction serverless
- GitHub : code source, dépôt privé
- Google Fonts : Bodoni Moda et Hanken Grotesk
Galerie
Glissez pour voir les écrans.
Où en est le projet
En ligne et libre d’accès, sans compte. Les données de la NASA se mettent à jour à chaque visite, avec un repli daté si une source ne répond pas. Le rendu des quatorze escales est vérifié automatiquement, sur ordinateur et sur mobile.












