5 minutes
TL;DR — Set up a create-arcade project. Then put
Transform6DOFandRenderableon thePlayerentity. 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 throughRenderable+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:
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:
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():
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.