Found in Space Learn & build

Lesson 4

Use SkyKit in a local app

Move from pasteable scripts to npm imports. You still get the same browser handle, then add an ordinary Three.js marker and toggle it with a checkbox.

Learning goal

The first three lessons used the quickstart embed and Skykit.whenReady(). In a Vite-style app, you import createSkykitBrowser() from npm instead. The result is still the same browser object: it can add objects, install plugins, and invoke navigation actions.

The custom object is ordinary Three.js. SkyKit gives it a place among the stars; your app owns the shape, color, animation, and checkbox.

Live code

Add a Hyades marker from app code

This browser-module playground uses CDN imports, but the code shape matches the Vite import shown below.

Ready.
Console 
 
 
 
  
  
 
 
Things to try
 
     
  • Change the marker color.
    •  
  • Change the marker size.
    •  
  • Move the marker by editing HYADES_CENTER_PC.
    •  
  • Add a second marker with another browser.addObject().
    •  
  • Change the pulse speed in the update function.
    •  
  • Move the same code into a Vite main.js file with the npm imports below.
    •  
 
 
 
What changed in the code
 

The quickstart examples got the browser from the global Skykit helper.
					A compiled app creates the browser directly. After that, the handle is the same:
browser.addObject() places app-owned Three.js objects in the star scene.

 

The object is ordinary Three.js. SkyKit does not own its shape, color, animation,
					or checkbox. SkyKit only gives it a place in the sky scene.

 
 
 
What to try next
 
Use the same browser handle to move the view.
 

The marker hangs off the browser object, and navigation stays in the viewer action registry.

 
 
 Look at the marker  
 
const browser = await createSkykitBrowser({
  host: '#viewer',
});
await browser.install(createSkykitNavigationPlugin());

browser.addObject(marker, {
  positionPc: HYADES_CENTER_PC,
});

await browser.viewer.actions.invoke(SKYKIT_ACTIONS.navigation.transitionTo, {
  lookAt: { targetPc: HYADES_CENTER_PC },
  durationSecs: 3,
});
 
  
 
 
Under the hood
 
 browser.addObject() accepts parsec coordinates, converts them into the
					viewer's scene scale, and places that ordinary Three.js object in the star scene.

 
 
 
Source and next steps
 
Use package examples for larger local apps.
 

This live example is intentionally small. The SkyKit custom object example shows
					the same idea with constellation art, a guide sphere, and a Hyades annotation.

  
 
 
Use this locally
 

In a local app, install SkyKit and Three.js, then put the imports in your app entry
					file. The object itself is ordinary Three.js, so your app can decide how to
					generate, animate, and dispose it.

 
 
 Install  
 
npm install @found-in-space/skykit@0.2.0 three
 
  
 
 Local imports  
 
import * as THREE from 'three';
import { createSkykitBrowser } from '@found-in-space/skykit/browser';
import {
  SKYKIT_ACTIONS,
  createSkykitNavigationPlugin,
} from '@found-in-space/skykit';