The latest articles on DEV Community by Abdul Wasay (@0xight). https://dev.to/0xight https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3852261%2F8ca2f270-dbad-4827-8180-9b16b32495f0.jpg https://dev.to/0xight en Abdul Wasay Mon, 30 Mar 2026 20:43:33 +0000 https://dev.to/0xight/how-i-used-threejs-to-create-a-real-time-solar-system-simulation-in-the-browser-45lf https://dev.to/0xight/how-i-used-threejs-to-create-a-real-time-solar-system-simulation-in-the-browser-45lf <p><strong>Atlas26: A Browser-Based Real-Time Solar System</strong></p> <p>Most solar system simulations are pre-animated. I wanted to build something different, a system that actually evolves with time. So I built Atlas26, a real-time 3D solar system in the browser using Three.js.</p> <p>The concept was straightforward, I wanted to build a system that feels alive, where everything constantly changes in response to time, in place of static animations.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frr0iz4x7y40s9w7vs393.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frr0iz4x7y40s9w7vs393.png" alt="Default camera angle of Atlas26 dashboard" width="800" height="366"></a></p> <h2> Fundamental Idea </h2> <p>The majority of solar system demonstrations are animated beforehand.</p> <p>Atlas26 is not the same:</p> <ul> <li><p>Everything is motivated by time.</p></li> <li><p>Positions are continuously computed. You have time control (speed/pause).</p></li> </ul> <h2> Characteristics </h2> <ol> <li>Moons and planets in orbit</li> <li>Dynamic-path comets</li> <li>Kuiper belt + asteroid belt</li> <li>Satellites in real time (ISS, HST)</li> <li>Global time controller</li> <li>Performance scaling based on devices</li> <li>Responsive design</li> </ol> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgn4qak2jo9q8j240k8n6.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgn4qak2jo9q8j240k8n6.png" alt="Hubble Space Telescope" width="800" height="366"></a></p> <h2> Obstacles </h2> <p>A major obstacle was striking a balance between <strong>Actuality</strong>, <strong>Performance</strong> and <strong>Scalability</strong>. Performance and load speed became challenging as more objects were added, particularly with ongoing updates.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffv1y7tmt74qhr5306acd.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffv1y7tmt74qhr5306acd.png" alt="Asteroid belt along with Jupiter's moon" width="800" height="366"></a></p> <p><strong>What I Would Target Next</strong></p> <p>Currently, I have deployed v1 of Atlas26. It's not a production grade system yet. I basically tried to create a proof of concept and validate the idea. Now I have few improvements in mind to make Atlas even better:</p> <ol> <li>Transition to a JSON-based data-driven architecture</li> <li>Minimize the duplication of components</li> <li>Boost rendering efficiency</li> <li>Reduce initial load time</li> <li>Add more artificial satellites and compute their location properly using SGP4 alogorithm.</li> <li>Add Galaxies and Constellations</li> </ol> <p><strong>Links</strong></p> <p>The code is open source and available on Github. The app is also deployed on Vercel. If you find this interesting, consider giving the repo a star, it really helps!</p> <p>Live: <a href="https://atlas26.vercel.app" rel="noopener noreferrer">https://atlas26.vercel.app</a><br> GitHub: <a href="https://github.com/Abdul-Wasay-008/Atlas26" rel="noopener noreferrer">https://github.com/Abdul-Wasay-008/Atlas26</a></p> <p><em>Would love feedback from the community 🙌</em></p> webdev opensource showdev threejs