logo

Babylon.js Market

By Lawrence

5 minutes

TL;DR — Set up a create-arcade project. Then put Transform6DOF and Renderable on the Player entity. This draws the real falconship GLB at the origin, lit, and held in frame by a static 6-DOF camera. Skip this lesson if you already have an arcade project that draws a GLB ship through Renderable + Transform6DOF. The flight model starts next lesson.

A fresh create-arcade project gives you a running render loop and a black canvas. The best part of a flight game is the ship. So before anything moves, get the real falconship model on screen. Not a placeholder box. The actual fighter, lit and framed, by the time this lesson ends.

Scaffold, download, and turn on the overlay

Start from a clean arcade. The scaffolder builds src/main.ts for you. It wires in a Babylon renderer, the ECS framework, a render loop, and a scene loader:

npm create @babylonjsmarket/arcade@latest wingman-flight
cd wingman-flight
npm install

The falcon is not in the repo. It lives in the scene's asset bundle. Download it, and every other asset this scene uses, before you run anything:

bjs download scene WingmanFlight1 --all

That drops the /wingman/*.glb files into public/. Now npm run dev serves the starter at http://localhost:3000.

Before the scene loads, mount the debug overlay once. The @babylonjsmarket/viz panels attach to the live world at runtime. They are a DEV overlay, not scene entities. So they never touch the scene you are building. Add this in main.ts, right after game.init():

if (import.meta.env.DEV) {
  const { mountArcadeViz } = await import('@babylonjsmarket/arcade/viz');
  const { mountViz } = await import('@babylonjsmarket/viz/solid');
  await import('@babylonjsmarket/viz/themes/flat.css');
  mountArcadeViz(game.world, { sceneName: 'WingmanFlight1' }); // Entities (`) + EventBus debugger + FPS
  mountViz(game.world, { sceneName: 'WingmanFlight1' });        // panel-spec renderer + StateStepper + gear menu
}

The import.meta.env.DEV guard tells the bundler to drop the whole panel subtree from a production build. Now you can always see what changed. Press backtick (`) for the Entities panel, or ≈F4 for the EventBus debugger.

Continue reading

Unlock the Full Course

Every lesson, the runnable examples, and the finished build — yours to keep.

$9one-time

Was this page helpful?

We read every note — tell us what's working and what isn't.

↑↓ NavigateEnter SelectEsc CloseCtrl+K Open Search