-
-
Home screen after the intro
-
A close-up of the earth planet with the info panel open
-
comparison mode
Inspiration
The idea stemmed from a simple desire: to transform an ordinary navigation bar into a genuine journey. Instead of merely scrolling through pages, why not make every click feel like a spacecraft swooping down toward its destination? The solar system was the natural choice for a theme—eight worlds, eight colors, and eight distinct atmospheres—drawing on a shared cultural imagination (science fiction, astronomy) to evoke a sense of wonder rather than just a technical showcase.
What it does
Odyssée Solaire is an interactive 3D site where eight planets orbit the Sun in real time. Clicking a planet's name in the navigation bar triggers a spiral camera transition—with the angle rotating as the radius tightens—until the view centers on the selected planet; a panel then reveals its actual scientific data (diameter, distance, day and year lengths, number of moons, and temperature). The site also features a comet with an elliptical orbit that accelerates as it approaches the Sun, visible orbiting moons, an Easter egg (clicking the Sun triggers a solar flare), a mode that aligns the eight planets to compare their actual sizes, and ambient space audio.
How we built it
The project is built using pure Three.js (without a framework), utilizing GSAP for animation orchestration and the Web Audio API for sound. All planet textures—such as Jupiter’s bands and Great Red Spot, Mercury’s craters, Mars’s polar caps, and Earth’s continents and storms—are procedurally generated via the <canvas> element rather than using external images. This was a deliberate choice to ensure a reliable, fast site free from network dependencies or licensing issues.
The development process unfolded in two distinct phases. I started as a complete beginner with no prior experience in 3D graphics or even JavaScript, guided step-by-step by Claude (Anthropic). I made sure to understand each component of the project—scene, camera, orbit pivot, BufferGeometry, post-processing—before writing the code, with systematic explanations provided for the "why" behind every line. As the deadline approached, I made the pragmatic decision to have Claude directly implement the remaining features—bloom, the comet, the Easter egg, comparison mode, synthesized sound, and responsiveness. This allowed me to prioritize a complete, polished result within the allotted time, with the intention of deepening my understanding of those specific sections after submission.
Challenges we ran into
The most valuable learning experience came from seeing firsthand how JavaScript executes code sequentially: several "Cannot access '...' before initialization" errors popped up whenever a variable was used in the animation loop before being declared earlier in the file—a classic pitfall for beginners.
Another memorable bug involved a fully functional particle system that remained invisible on screen, with no errors appearing in the console. The culprit was Three.js's frustum culling—an optimization that calculates a "bounding box" just once upon object creation to determine visibility, without ever automatically recalculating it when positions change dynamically. I had to disable this behavior (frustumCulled = false) so that the particles, updated frame by frame, would become visible again.
Finally, the layout presented its own set of overlapping issues (such as the navbar being pushed off-screen by justify-content: space-between and buttons stacking on top of each other), which had to be debugged one by one to ensure a clean look on both desktop and mobile.
Accomplishments that we're proud of
Starting from scratch—with no prior experience in JavaScript or 3D before this hackathon—and building a complete, polished site featuring animations and sound. Gaining a deep understanding of the core mechanisms (such as parent-child hierarchies for orbits, the animation loop, and post-processing) rather than simply copy-pasting code without grasping how it works. And succeeding, despite time constraints, in delivering a project with a unique visual and audio identity, rather than relying on a generic template.
What we learned
The fundamental mechanics of Three.js (scene/camera/renderer, geometry + material = mesh, orbit pivots), the importance of execution order in JavaScript, how post-processing (bloom) works, and concepts encountered only through hands-on practice, such as frustum culling. More broadly, this project was a lesson in balancing in-depth learning with real-world time constraints—knowing when to slow down to understand and when to speed up to deliver.
What's next for Odyssée solaire
Replace certain procedural textures with authentic NASA/JPL textures for complete photorealism, add named moons with their own details, enhance the audio with planet-specific effects, and—why not—include a Kuiper belt featuring Pluto as a nod to the curious explorers who venture to the very edge.
Log in or sign up for Devpost to join the conversation.