A Phaser-Labs-style gallery of focused scenes that exercise the Phaser.WEBGL3D renderer feature by feature.

The shell is a tiny React + react-router-dom app: each route mounts its own Phaser.Game so navigating between examples truly resets the GL context, scene plugins and lights. Source for every example lives next to its registry entry under src/examples/<id>.js.

examples/vite-3d/
  index.html              # React entry, loads /phaser-build.js
  vite.config.js          # serves the latest build/phaser.js under /phaser-build.js
  src/
    main.jsx              # React root + HashRouter
    App.jsx               # sidebar + outlet
    pages/
      Home.jsx            # landing gallery
      ExamplePage.jsx     # mounts a single example
    components/
      Sidebar.jsx         # grouped navigation
      ExampleHost.jsx     # wraps Phaser.Game lifecycle (destroy on unmount)
    common/
      hud.js              # setHud(scene, lines, cls?) helper
      textures.js         # procedural canvas textures
    examples/
      registry.js         # central catalogue of every scene
      <id>.js             # one file per example
  public/
    assets/
      gltf/               # Khronos sample assets copied locally
      textures/           # 2D textures used by examples (procedural by default)

This sandbox consumes the freshly built build/phaser.js from the repo root. The Vite dev plugin streams the latest UMD bundle under /phaser-build.js, so iterating on the engine itself is just:

# from the phaser3D repo root
npm install
npm run build

# then in this folder
cd examples/vite-3d
npm install
npm run dev          # http://localhost:5173

If you change the engine source, re-run npm run build at the repo root and refresh the browser. There is no engine-side HMR; the React shell on the other hand reloads on save normally.

npm run build produces a static drop in dist/.

1. Create src/examples/<id>.js exporting a Phaser.Scene subclass as the default export.
2. Register it in src/examples/registry.js under the right group (basics / camera / materials / lighting / scene / gltf / helpers / demos).
3. Optional width, height, backgroundColor and webgl3d overrides are forwarded to the per-route Phaser.Game.

Examples should:

• Read the active HUD setter via setHud(this, [...lines], 'ok' | 'warn' | 'err') from common/hud.js.
• Use makeHudThrottle() to avoid 60Hz HUD writes.
• Live entirely in their own file: shared assets go through public/ (Phaser loader) or common/textures.js (procedural canvases).

public/assets/gltf/ carries the Khronos samples in use by the gallery:

The originals stay untouched in examples/gltf-samples/; copy more in when you add an example that needs them. Do not commit large samples without a reason — keep this folder lean.

Every example has a stable #/<id> URL: send a colleague http://…/#/gltf-skinned to drop them straight into the Fox demo. The home page lives at #/.

Each example bar exposes a Game / Code pill. Code lazy-loads @monaco-editor/react and shows the example's source verbatim, with syntax highlighting and line numbers. The Phaser.Game is destroyed when you switch to Code so the GL context isn't held while you read, and a fresh Game boots on the way back. Sources are pulled with Vite's import.meta.glob('./*.js', { query: '?raw' }) so the Monaco bundle (~15 kB gzipped) only ships once anyone asks for it.