Found in Space Learn & build

Lesson 2

Look and fly with SkyKit

Keep the pasteable embed, then use the browser handle to animate the view after startup.

Learning goal

Lesson 1 configured the browser with HTML attributes. This lesson adds a tiny script. Skykit.whenReady() gives you the live browser object, and transitionTo() can rotate the view or move the observer through parsec space.

Live code

Look toward Orion, then fly out

The first transition rotates the view. The second moves the observer through 3D space.

Ready.
Console 
 
 
 
  
  
 
 
Things to try
 
     
  • Change the wait times before each transition.
    •  
  • Change durationSecs to make the movement slower or faster.
    •  
  • Change observerPc to fly to another place in parsec space.
    •  
  • Use only lookAt when you want to rotate without moving.
    •  
 
 
 
What changed in the code
 

The first transition changes only the look direction. The second transition includes
observerPc, so SkyKit also moves the observer. The
movement and orientation lanes can have different
					durations.

 
 
 Look direction  
 
import {
  SKYKIT_ACTIONS,
  createRaDecLookAt,
  createSkykitNavigationPlugin,
} from '@found-in-space/skykit';

const browser = await Skykit.whenReady();
await browser.install(createSkykitNavigationPlugin());
const ALNILAM_LOOK_AT = createRaDecLookAt('05h 36m 12.81s', '−01° 12′ 06.9″');

function transitionTo(payload) {
  return browser.viewer.actions.invoke(SKYKIT_ACTIONS.navigation.transitionTo, payload);
}

await transitionTo({
  lookAt: ALNILAM_LOOK_AT,
  durationSecs: 3,
});
 
  
 
 Fly through space  
 
import {
  SKYKIT_ACTIONS,
  createRaDecLookAt,
  createSkykitNavigationPlugin,
} from '@found-in-space/skykit';

const browser = await Skykit.whenReady();
await browser.install(createSkykitNavigationPlugin());
const ALNILAM_LOOK_AT = createRaDecLookAt('05h 36m 12.81s', '−01° 12′ 06.9″');

function transitionTo(payload) {
  return browser.viewer.actions.invoke(SKYKIT_ACTIONS.navigation.transitionTo, payload);
}

await transitionTo({
  observerPc: { x: 28, y: -18, z: 10 },
  lookAt: ALNILAM_LOOK_AT,
  movement: { durationSecs: 8 },
  orientationTransition: { durationSecs: 3 },
});
 
  
 
 
Next step
 
Turn one-off moves into chapters.
 

Once you have more than a couple of transitions, give the stops names and let
					chapter functions manage the sequence.