A reusable component for interactive visualization of the Solar System.
- WebGL-based: uses three.js for rendering
- Mobile-friendly: mouse and touch controls supported
- Framework-agnostic: no dependency on jQuery or other major libraries apart from three.js
- Customizable styles for the rendering of planets, moons, orbits, etc
The goal is to have something like a Google Maps or Cesium for the Solar System, making it easier to build apps and games depicting it.
This is a work in progress: the basics are there but many areas, especially satellites, still need a lot of work.
Corrections and bug reports are welcome.
Model / custom rendering: all astronomical data and orbital calculations are encapsulated in the solaris-model module. You can use it directly if you'd like to implement your own rendering of the Solar System.
npm install solaris-js
let Solaris =
It's also available as an ES6 module (using
The CSS is declared in
pkg.style, so you can get it from npm too:
To use the default assets (planet textures etc), serve the folder
node_modules/solaris/dist, by copying it to your public root or mounting it in your application. Ex.:
cp node_modules/solaris/dist public/solaris
Or mounting it in express:
If you prefer to install it the old-fashioned way, download the tarball and copy the
dist folder to your public root, renaming it
<!-- sets window.Solaris -->
Custom path for assets
Using either method above, if you wish to put the assets in a path other than the default
solaris, just pass your custom path during initialization:
let solaris = element root: 'path/to/wisdom'
Just give it an element id and you'll get a Solar System view with the default settings and theme:
let solaris = 'elementId'
You can also pass it an element reference:
let solaris = document
By default, the date/time used for the calculation of positions will be the system's local.
To set a specific date/time, you can either give it a date string:
solaris // will be parsed to 1961-04-12T12:00:00Z (UTC)
Sets the center of camera and controls.
Resets the scene to the default perspective (centered on the sun).
You can customize the appearance of celestial bodies and orbits by using the
let solaris = elementIdstyles:types:planet: color: 0xFFFFFF orbit: 0xFFFFFFdwarfPlanet: color: 0x666666 orbit: 0x666666moon: color: 0x666666 orbit: 0x666666spacecraft: color: 0x666666 orbit: 0x666666bodies:sun: color: 0xFFFFFF light: 0xFFFFFFmercury: texture: true orbit: 0xD2D0D3venus: color: 0xFFFFFF orbit: 0xFFFF99earth: texture: true orbit: 0x659EC1moon: texture: trueiss: orbit: 0x0000FFmars: texture: true orbit: 0xCC0000ceres: texture: true
By default, each celestial body will be rendered according to the styles defined for their
These can be selectively overriden by the individually-targeted styles defined in the
To get the complete list of objects you can style:
Object// => ["sun", "mercury", "venus", "earth", "moon", "iss", "mars", "phobos", "deimos", "ceres", "jupiter", "io", "europa", "ganymede", "callisto", "saturn", "mimas", "enceladus", "tethys", "dione", "rhea", "titan", "hyperion", "iapetus", "phoebe", "uranus", "titania", "neptune", "triton", "pluto", "eris", "sedna"]
The sphere's surface color, as a number. Ex.:
Instead of a color, use a texture for the sphere's surface.
If set to
true, the corresponding image will be expected at
If given a string, it will be interpreted as the full relative path to the image.
Color of the emitted light, only used for orbiters of type
Color of the line showing the orbit's path.
The FastClick library is used to eliminate tap delay on touch-based devices, and by default it is restricted to the element you supplied Solaris with.
You can use this option to attach FastClick to a different element, for example if you wish it to apply to the whole document:
let solaris = 'elementId' fastClickElement: documentbody
Camera positioning and direction
Emit events: onLoad, onBodyClicked, etc
Show message when WebGL is not available
Add Electron-based tests.
The milky way should be inclined 63 degrees to the plane of the ecliptic.
Add a "classic" theme (yellow sun, infrared venus). The current one depicts celestial bodies as close as possible to what they would look like to the human eye in space (white sun, white venus).
Check solaris-model for issues not related to presentation.