Spacekit is a JavaScript library for creating interactive 3D space visualizations - whether of the Earth/moon system, solar system, or beyond.

You can check out an editable live example on jsfiddle, or look at a variety of live examples on SpaceReference.org. This library generalizes work that is currently used on Asterank, Meteor Showers, Ancient Earth, and many other things into a single open-source 3D engine for space that is both accurate and visually stunning.

See the full documentation

Note that this library is a work in progress and the API might change!

Spacekit requires WebGL 2 and uses Three.js r186 (0.186.1). Devices without WebGL 2 support receive an error when creating a Simulation.

Install via npm:

npm install spacekit.js

And then use require or import:

const Spacekit = require('spacekit.js');
// or
import Spacekit from 'spacekit.js';

You can also download a raw build or use the latest build in a script tag:

<script src="https://typpo.github.io/spacekit/build/spacekit.js"></script>

Simulation: the main container for your visualization. A simulation is comprised by a Camera plus whatever you choose to put in it. See documentation for full options.

const sim = new Spacekit.Simulation(document.getElementById('my-container'), {
 // Required
 basePath: '../path/to/asset',
 // Optional
 camera: {
   initialPosition: [0, -10, 5],
   enableDrift: false,
 },
 debug: {
   showAxes: false,
   showGrid: false,
   showStats: false,
 },
});

Skybox: the image background of the visualization. The "universe" of the visualization is contained within a large sphere, so "skysphere" may be a better (less conventional) way to describe it. Some skybox assets are provided, including starry milky way background from ESA and NASA Tycho. See documentation for full preset options.

// Use an existing skybox preset.
const skybox = sim.createSkybox(Spacekit.SkyboxPresets.NASA_TYCHO);

// Add a skybox preset
const skybox = sim.createSkybox({
  textureUrl: '../path/to/image.png'
});

Stars: an alternative to a skybox. Instead of showing an image, this class loads real star data and positions the stars accordingly in the simulation. Usually this is more performant but less visually stunning.

// Use an existing skybox preset.
const skybox = sim.createStars({minSize /* optional */: 0.75 /* default */});

// Add a skybox preset
const skybox = sim.createSkybox({
  textureUrl: '../path/to/image.png'
});

SpaceObject: an object that can be added to the visualization (SpaceObjects can sometimes be referred to as simply "Object"). SpaceObjects can orbit, rotate, etc. Subclasses include RotatingObject (has a defined spin axis), ShapeObject (has a 3D shapefile), and SphereObject (is spherical, like the Earth).

// Create objects using presets. The presets include scientific ephem params and/or position.
const sun = viz.createObject('sun', Spacekit.SpaceObjectPresets.SUN);
viz.createObject('mercury', Spacekit.SpaceObjectPresets.MERCURY);
viz.createObject('venus', Spacekit.SpaceObjectPresets.VENUS);

// Create a stationary object at [3, 1, -5] position.
const obj = viz.createObject('myobj', {
  position: [3, 1, -5],
};

// Create an object that orbits.

// Ephem is a class representing Kepler ephemerides, which defines the trajectory of astronomical objects as well
// as artificial satellites in the sky, i.e., the position (and possibly velocity) over time.
const ephem