{"id":6185,"date":"2026-05-31T13:01:05","date_gmt":"2026-05-31T11:01:05","guid":{"rendered":"https:\/\/nlion.fr\/blog\/?p=6185"},"modified":"2026-06-04T22:49:59","modified_gmt":"2026-06-04T20:49:59","slug":"une-petite-escapade-dans-lespace-ma-simulation-3d-en-temps-reel","status":"publish","type":"post","link":"https:\/\/nlion.fr\/blog\/une-petite-escapade-dans-lespace-ma-simulation-3d-en-temps-reel\/","title":{"rendered":"Une petite escapade dans l&rsquo;espace : ma simulation 3D en temps r\u00e9el."},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Lever les yeux vers le ciel par une nuit claire offre un spectacle magnifique, mais il est parfois difficile de se repr\u00e9senter la m\u00e9canique c\u00e9leste qui s&rsquo;op\u00e8re au-dessus de nos t\u00eates. Saviez-vous qu&rsquo;\u00e0 l&rsquo;instant pr\u00e9cis o\u00f9 vous lisez ces lignes, la Terre fonce \u00e0 pr\u00e8s de 30 kilom\u00e8tres par seconde autour du Soleil tout en tournant sur elle-m\u00eame ?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pour essayer de visualiser cette danse cosmique \u00e0 mon \u00e9chelle, je me suis accord\u00e9 une petite escapade technique et cr\u00e9ative \u00e0 la suite d\u2019un projet client. N&rsquo;\u00e9tant pas du tout astronome de m\u00e9tier, j&rsquo;ai voulu cr\u00e9er \u00e0 ma mani\u00e8re une <strong>simulation interactive en 3D du syst\u00e8me solaire<\/strong>, accessible directement depuis un simple navigateur web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><div class=\"cta-container\">\n    <span class=\"cta-emoji\">\ud83c\udf0d<\/span>\n    <div class=\"cta-content\">\n        <p class=\"cta-text\">Si vous voulez aller y jeter un \u0153il, l\u2019exp\u00e9rience est en direct ici :<\/p>\n        <a href=\"https:\/\/nlion.fr\/Solaire\/\" class=\"cta-button\" target=\"_blank\" rel=\"noopener\">\n            D\u00e9couvrir la simulation 3D\n        <\/a>\n    <\/div>\n<\/div>\n\n<style>\n.cta-container {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    background-color: #fdfbf7; \/* Fond cr\u00e8me identique aux cartes lat\u00e9rales *\/\n    border: 1px solid #f3ece4;    \/* Bordure fine et discr\u00e8te *\/\n    border-radius: 20px;         \/* Arrondis doux identiques \u00e0 tes blocs *\/\n    padding: 24px;\n    margin: 25px 0;\n}\n\n.cta-emoji {\n    font-size: 2.5rem;\n}\n\n.cta-content {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    flex: 1;\n}\n\n.cta-text {\n    margin: 0;\n    font-size: 1.1rem;\n    color: #4a3e3d;             \/* Marron fonc\u00e9 textuel du site *\/\n    font-weight: 500;\n}\n\n.cta-button {\n    align-self: flex-start;\n    background-color: #8c432d;   \/* Terracotta \/ Marron de tes liens actifs *\/\n    color: #fdfbf7 !important;   \/* Texte cr\u00e8me clair *\/\n    text-decoration: none !important;\n    padding: 10px 22px;\n    border-radius: 12px;\n    font-weight: 600;\n    transition: background-color 0.2s ease, transform 0.1s ease;\n}\n\n.cta-button:hover {\n    background-color: #6e3220;   \/* Version l\u00e9g\u00e8rement plus sombre au survol *\/\n    transform: translateY(-1px);\n}\n\n.cta-button:active {\n    transform: translateY(0);\n}\n\n@media (max-width: 576px) {\n    .cta-container {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 15px;\n        border-radius: 16px;\n    }\n    .cta-emoji {\n        font-size: 2rem;\n    }\n}\n<\/style><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Une tentative de synchronisation en direct<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">La particularit\u00e9 de cette petite maquette num\u00e9rique est d&rsquo;essayer de se caler sur le pr\u00e9sent. Ce n&rsquo;est pas une animation fixe qui tourne en boucle.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c0 chaque chargement de la page :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Le cycle jour\/nuit se synchronise<\/strong> avec l&rsquo;heure r\u00e9elle de votre syst\u00e8me. Si vous vous connectez \u00e0 la nuit tomb\u00e9e, vous verrez la France basculer progressivement dans l&rsquo;ombre.<\/li>\n\n\n\n<li><strong>La position des plan\u00e8tes<\/strong> essaie de refl\u00e9ter leur alignement astronomique du moment.<\/li>\n\n\n\n<li>Un bouton <strong>\u00ab\u00a0Me localiser\u00a0\u00bb<\/strong> vous permet de recentrer la cam\u00e9ra 3D sur votre position g\u00e9ographique approximative \u00e0 la surface du globe.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">D\u00e8s que la page se charge, le script JavaScript r\u00e9cup\u00e8re la date et l&rsquo;heure exactes de votre appareil. \u00c0 partir de ce rep\u00e8re temporel, un algorithme math\u00e9matique applique des \u00e9quations de trajectoires elliptiques simplifi\u00e9es (les lois de Kepler) propres \u00e0 chaque corps c\u00e9leste. Ces formules d\u00e9finissent l&rsquo;angle, la distance et la vitesse de r\u00e9volution th\u00e9oriques de chaque plan\u00e8te et de la Lune par rapport au Soleil \u00e0 cet instant pr\u00e9cis. L&rsquo;application convertit ensuite ces coordonn\u00e9es astronomiques en positions 3D (axes X, Y, Z) dans l&rsquo;espace virtuel pour placer pr\u00e9cis\u00e9ment chaque sph\u00e8re les unes par rapport aux autres.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Un projet d&rsquo;artisan du web (et ses limites)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">N&rsquo;\u00e9tant pas scientifique, j&rsquo;ai d\u00fb faire des choix et des concessions pour que l&rsquo;outil reste fluide et fonctionne sur un ordinateur comme sur un t\u00e9l\u00e9phone portable, sans faire surchauffer votre machine.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pour les curieux de technique, voici comment j&rsquo;ai assembl\u00e9 les briques de ce projet :<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Les textures de la NASA :<\/strong> Pour avoir un rendu visuel un minimum fid\u00e8le, j&rsquo;ai utilis\u00e9 les cartes et textures publiques officielles fournies par la <strong>NASA<\/strong> pour le Soleil, la Terre et la Lune.<\/li>\n\n\n\n<li><strong>Le moteur 3D (Three.js) :<\/strong> Tout le projet repose sur la biblioth\u00e8que JavaScript <strong>Three.js<\/strong>. C&rsquo;est elle qui g\u00e8re l&rsquo;affichage en 3D, les cam\u00e9ras, la lumi\u00e8re centrale (via une source <code>PointLight<\/code> plac\u00e9e au c\u0153ur du Soleil) et la projection des ombres.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Erreurs bienvenues : n&rsquo;h\u00e9sitez pas \u00e0 me corriger !<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Je le r\u00e9p\u00e8te, la programmation web est mon m\u00e9tier, mais l\u2019astronomie est un univers complexe que je ne ma\u00eetrise pas. Des erreurs de proportion ou d\u2019\u00e9chelle se sont tr\u00e8s certainement gliss\u00e9es dans le projet. \u00c0 commencer par la taille du Soleil et des g\u00e9antes gazeuses, qui devraient \u00eatre infiniment plus gigantesques par rapport aux plan\u00e8tes rocheuses en r\u00e9alit\u00e9. J&rsquo;ai volontairement trich\u00e9 sur ces dimensions pour que l&rsquo;ensemble reste lisible et visible sur un m\u00eame \u00e9cran.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si vous rep\u00e9rez des anomalies flagrantes ou si vous avez des suggestions pour am\u00e9liorer la pr\u00e9cision de l&rsquo;outil, <strong>n&rsquo;h\u00e9sitez surtout pas \u00e0 me corriger ou \u00e0 me laisser un commentaire<\/strong>. C&rsquo;est aussi comme \u00e7a que l&rsquo;on apprend !<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">R\u00e9f\u00e9rences et Sources<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Outils et technologies de l&rsquo;application :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Gestion de la 3D :<\/strong> <a href=\"https:\/\/threejs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Three.js (Site officiel)<\/a> et ses contr\u00f4les interactifs <a href=\"https:\/\/threejs.org\/docs\/#examples\/en\/controls\/OrbitControls\" target=\"_blank\" rel=\"noreferrer noopener\">OrbitControls<\/a><\/li>\n\n\n\n<li><strong>Couches de cartes :<\/strong> <a href=\"https:\/\/leafletjs.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Leaflet (Site officiel)<\/a><\/li>\n\n\n\n<li><strong>Donn\u00e9es visuelles de base :<\/strong> <a href=\"https:\/\/science.nasa.gov\/\" target=\"_blank\" rel=\"noreferrer noopener\">NASA Science<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Donn\u00e9es scientifiques de l&rsquo;article :<sup><\/sup><\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Donn\u00e9es globales du syst\u00e8me solaire :<\/strong> <a href=\"https:\/\/science.nasa.gov\/solar-system\/\">NASA Solar System Exploration<\/a><\/li>\n\n\n\n<li><strong>Fiches techniques et vitesse orbitale moyenne (29,78 km\/s) :<\/strong> <a href=\"https:\/\/science.nasa.gov\/earth\/facts\/\" target=\"_blank\" rel=\"noreferrer noopener\">NASA Science Earth Facts<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>L&rsquo;application est totalement respectueuse de votre vie priv\u00e9e : elle ne r\u00e9cup\u00e8re et ne collecte aucune de vos donn\u00e9es personnelles.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lever les yeux vers le ciel par une nuit claire offre un spectacle magnifique, mais il est parfois difficile de se repr\u00e9senter la m\u00e9canique c\u00e9leste qui s&rsquo;op\u00e8re au-dessus de nos&#8230;<\/p>\n","protected":false},"author":1,"featured_media":6186,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-6185","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-actualites"],"_links":{"self":[{"href":"https:\/\/nlion.fr\/blog\/wp-json\/wp\/v2\/posts\/6185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nlion.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nlion.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nlion.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nlion.fr\/blog\/wp-json\/wp\/v2\/comments?post=6185"}],"version-history":[{"count":13,"href":"https:\/\/nlion.fr\/blog\/wp-json\/wp\/v2\/posts\/6185\/revisions"}],"predecessor-version":[{"id":6202,"href":"https:\/\/nlion.fr\/blog\/wp-json\/wp\/v2\/posts\/6185\/revisions\/6202"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nlion.fr\/blog\/wp-json\/wp\/v2\/media\/6186"}],"wp:attachment":[{"href":"https:\/\/nlion.fr\/blog\/wp-json\/wp\/v2\/media?parent=6185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nlion.fr\/blog\/wp-json\/wp\/v2\/categories?post=6185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nlion.fr\/blog\/wp-json\/wp\/v2\/tags?post=6185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}