In this blog post, I’ll walk you through how I implemented interactive planet selection in a 3D solar system using raycasting and explain how each element of the interaction contributes to an intuitive and engaging experience.

Eyes on the Solar System - NASA/JPL

Solar System Scope

Video demo：

录屏2025-03-10 18.55.46.mov

Step 1: Defining the Interaction

The goal of this interaction is to allow users to explore the solar system by clicking on planets. When the user hovers over a planet, it highlights, and when clicked, a popup or alert displays the planet’s name

Step 2: Triggering the Interaction

Actions the User Takes

1. Moving the mouse over a planet makes it glow slightly.
2. Clicking a planet triggers an event that displays its name.
3. Moving away from the planet restores its normal appearance.

Step 3: Understanding the Nature of the Interaction

The user is free to click on any planet of his choice. Once clicked, the system displays information about that planet. The user can explore the planets in any order. Because the interaction is limited to clicking on planets, it is not completely free movement.

Step 4: Visual Cues and Feedback

• Highlighting on Hover: This tells the user, “This object is interactive.”
• Click Feedback (Popup or UI Change): Confirms to the user that they clicked successfully.
• Rotation and Movement: Planets moving around the sun create a dynamic and living world that encourages exploration.