About Pop Solar System – realistic solar system simulation

Dive into Pop Solar System—a fully interactive, scientifically accurate 3D simulation featuring real planetary orbits, axial tilts, moons, rings, and the asteroid belt. Powered by advanced Three.js and WebGL shaders, it offers dynamic controls, responsive design, and deep customization. Explore every celestial body in real time, from the blazing Sun to distant icy moons, all with immersive visuals and seamless integration for any website or device.

Main features

Pop Solar System is a Three.js and WebGL shader toolkit that lets you embed a glowing Sun, ultra-realistic planets, Earth with its Moon, nebula and even a bonus animated rocket directly into your web pages. Available as both a JavaScript component and a WordPress / WooCommerce plugin, it’s fully responsive, mobile-friendly and easy to integrate into any modern layout. Learn more & view the main page.

Main features

Responsive Layout – Fully responsive and adaptable regardless of which device or screen size is used.

Desktop & Mobile Optimized – Pop Solar System will adapt to any screen size and device, whether you’re using a mobile phone (iOS, iPhone, Android), tablet, laptop or desktop browser.

Multiple Display Types – Supports two display modes: responsive (scales to a specific width and height) and afterparent (automatically scales to its parent container’s dimensions).

Intro Teleport Transition – When the scene is displayed first time a teleport post=processing transition is used.

Parallax – Optional vertical parallax adds depth and a subtle 3D motion feeling while scrolling.

Optional Celestials – Show or hide any celestial—Sun, planets, moons, or asteroid belt—to create a tailored solar system. Build focused views, such as just the Sun and Earth, or any combination you need.

Controller – Customize your controller with optional buttons for navigation, zoom, simulation speed, sharing, printing, and fullscreen—each feature can be shown or hidden to fit your workflow.

Table of contents – The Table of Content sidebar lists all celestial bodies for easy navigation and selection—fully customizable and optional for your layout.

Info window – The Info Window displays detailed information about any selected celestial—fully customizable and optional for your interface.

Realistic Simlation – The simulation uses accurate math, so you can configure the solar system to match real astronomical proportions. This demo is more artistic for easier navigation, since true planetary distances are vast and hard to explore interactively. For a realistic setup, simply update each celestial’s values—radius, semi-major axis, eccentricity, semi-minor axis, orbit time, inclination, and more. For example, Earth’s parameters can be set to match reality.

Realistic Geometry – Each celestial body can have its own radius, orbit size, shape, speed, and tilt—these features are set individually for every planet or moon in the simulation.

Detailed Documentation – Detialed Documentation for both WordPress and JavaScript versions, JavaScript Documentation, WordPress Documentation.