celestialengine🪐

The universe, at your site.

This component introduces a planetarium to your React webpage.

demo: https://celestian.io/engine

Prerequisites

• React
• Three.js
• react-three-fiber
• react-three-postprocessing

Installation

npm install celestialengine

you probably also need to install these libraries:

npm install react three @react-three/fiber @react-three/postprocessing

How to use

1. Prepare star data

Before installing components into your page, you have to download & extract star data.

1. cd into the public folder
2. Execute npx get-star-db

2. Install components into your page

<CelestialEngineProvider
  metadataSource="./dat_hp_meta.json"
  initialProps={{ vMag: 5.0 }}
>
  <CelestialCanvas useEngine={true} />
</CelestialEngineProvider>

3. Control the properties

import { deg, useCelestialEngine } from "celestialengine";
import { useEffect } from "react";

...

  const { setProps } = useCelestialEngine();
  useEffect(() => {
    setProps((p) => ({
      ...p,
      controllable: true,
      selectable: true,
      vMag: 7.0,
      altitude: deg(60),
    }))
  }, []);

see properties.ts and contexts/contextProperties.ts.

How does it work?

celestialengine renders the starry skies on the Canvas via ThreeJS and react-three-fiber.

This module includes:

• star renderer, it can render over one-hundred thousand stars (although depends on the performance of the client).
• constellation lines and navigation lines, it is a handy hint to find stars.
• astrometric calculations, render the actual sky corresponding to the actual location, time, and observation az/alt.

Redux compatibility?

Remove <CelestialEngine> and manage CelestialEngineProps in your redux store, then seed the CelestialEngineProps to <CelestialCanvas>.