Quickstart — first level in ~15 minutes

A linear walkthrough from zero to a rotating object in the browser. Kit version: engine v0.31.1 · Blender add-on v0.32.0.

Before you start

• Blender 4.2 or newer (5.x recommended)
• Node.js 18+ and this repo cloned
• babylon_level_kit_extension.zip in the repo root (or build it from blender_addon/)

1. Install the add-on

1. Blender → Edit → Preferences → Get Extensions
2. Drop-down (top-right) → Install from Disk… → pick babylon_level_kit_extension.zip
3. Enable the extension
4. In the 3D viewport press N → open the Babylon Object / Babylon Scene tabs

You should see Add Component on a selected object and Export Level under Babylon Scene.

2. Prepare a simple scene

1. Open or create a Blender scene with at least one mesh (the default cube is fine)
2. Add a Camera and set it as the scene camera if you don't have one
3. Select the cube (or your mesh)

3. Attach a script behavior

1. Babylon Object → Add Component → Script
2. Click Open Script… and pick apps/playground/src/behaviors/Rotator.ts from this repo
3. The registry key should read Rotator (filename stem)
4. Adjust Speed and Axis in the exposed fields if you like

The playground already registers Rotator via AutoRegisterBehaviors — no code changes needed for this step.

4. Export the level

1. Babylon Scene → Export Level
2. Choose a folder under the playground, e.g.
   …/apps/playground/public/levels/Quickstart/Quickstart.glb
3. Confirm you get Quickstart.glb and Quickstart.scene.json side by side

Optional: click Validate first to catch missing scripts or a missing active camera. See validation diagram.

5. Run the playground

From the repo root:

npm install
npm run dev

Point the playground at your export. Either edit apps/playground/src/main.ts to load /levels/Quickstart/Quickstart.scene.json, or copy your two files over an existing level path the app already loads.

Open the dev URL in a browser. You should see your mesh and it should rotate if the Script component is enabled.

6. Enable Live Link (optional)

1. In Blender, Babylon Scene → export once to the same path as step 4
2. Tick Live Link
3. With npm run dev still running, change the exposed Speed in Blender and press Ctrl+S
4. The browser should reload with the updated level

Details: 09 — Workflow (Live Link) · livelink diagram.

7. Debug keys (dev builds)

With Debug Build enabled in the Export panel:

• C — toggle physics collider wireframes
• I — open the Babylon Inspector

What you built

Blender authored a Script component and exported two files:

• Quickstart.glb — geometry, transforms, GUIDs in glTF extras
• Quickstart.scene.json — the Script row, exposed field values, scene settings

At runtime, LevelLoader.Load appends the glb, matches the cube by GUID, instantiates Rotator, applies your exposed values, then calls OnStart / OnUpdate each frame. See 01 — Architecture and 04 — Load Pipeline.

Next steps