This interactive visualization models the Pluto-Charon system, one of the most famous binary systems in the Solar System, where both bodies orbit a common center of mass (the barycenter) located outside Pluto's surface.
Technology Stack
- Three.js (r128): JavaScript library used for creating and rendering the 3D graphics (scene, planets, stars, lighting).
- OrbitControls: A Three.js helper used to allow interactive camera control (zoom, rotate, pan) via mouse and touch.
- HTML/JavaScript: Core structure and logic for animation, rendering loop, and UI control.
- Tailwind CSS: Utility-first framework for responsive and aesthetic styling of the information panel and modal.
Simulation Details
- Barycenter Orbit: Pluto and Charon are positioned relative to the barycenter based on their approximate mass ratio (Pluto $\approx 8$ times Charon's mass), ensuring the barycenter is the rotational pivot.
- Tidal Locking: The simulation correctly shows that both Pluto and Charon are tidally locked, meaning they rotate on their axes at the same rate they orbit each other.
- Scaling: The sizes of Pluto and Charon are scaled relative to each other (Charon $\approx 51\%$ the radius of Pluto). The orbital distance is scaled for visualization purposes.