A Planet on Screen

The canvas is empty. Before anything can fly, we need a camera. It has to show a whole orbit on a wide monitor, and on a phone held upright.

Make the project

Log in, make a game that uses the Babylon renderer, and download the two parts this scene needs:

bjs login
bjs create spacegolf --kind game --renderer babylon
cd spacegolf
npm install
bjs download NebulaSky
bjs download AxisViewCamera

bjs create makes the new folder. bjs download drops each component into src/components/<Name>/. That code is yours now, so poke at it all you like. The lights and MeshPrimitive come built into @babylonjsmarket/arcade.

src/main.ts stays as it is. It sets up the add-ons your downloads bring (NebulaSky brings one to draw its sky), mounts the debug panels, and loads the scene named in src/scenes/index.ts. Point that file at a JSON scene:

import SPACEGOLF from './spacegolf.json'

export const SCENES = {
  spacegolf: SPACEGOLF,
}

export const DEFAULT_SCENE: keyof typeof SCENES = 'spacegolf'

Delete the starter src/scenes/game.ts. We won't miss it. This one JSON file grows into Space Golf, a course at a time.