create-playcanvas 0.16.0 → 0.17.0

package/templates/_shared/first-person-game/src/game.ts

@@ -0,0 +1,232 @@
+// The game, and the file to replace to make this starter your own (see "Make it your own" in
+// README.md). Only the entry file uses it, to attach `Game` and drive the HUD from the `game:state`
+// app event and `CARDS`
+import type { Asset, Entity, RigidBodyComponentSystem } from 'playcanvas';
+import { Script, Vec3 } from 'playcanvas';
+import { FirstPersonController } from 'playcanvas/scripts/esm/first-person-controller.mjs';
+
+/**
+ * Where a run is: waiting for the first click, in play, held, held because the browser wouldn't
+ * lock the mouse, or finished either way.
+ */
+export type GameState = 'ready' | 'playing' | 'paused' | 'blocked' | 'won' | 'lost';
+
+/** The app events the HUD follows. */
+export type GameEvents = {
+    /** Fired by the game whenever its state, the orbs found or the whole seconds left change. */
+    'game:state': (state: GameState, found: number, total: number, seconds: number) => void;
+
+    /**
+     * Fired by the controller as a thumb on the left of the screen steers: where it went down and
+     * where it is now, in page pixels, and -1 for all four once it lifts.
+     */
+    'joystick:left': (baseX: number, baseY: number, knobX: number, knobY: number) => void;
+};
+
+/** What the HUD card says in each state. `null` hides the card. */
+export const CARDS: Record<GameState, { title: string; hint: string } | null> = {
+    ready: { title: 'Orb Run', hint: 'Collect every orb before the clock runs out. Click or tap to play' },
+    playing: null,
+    paused: { title: 'Paused', hint: 'Click or tap to resume' },
+    blocked: {
+        title: 'Mouse not locked',
+        hint: "The browser didn't lock the mouse to the game, and the keyboard and mouse can't steer without it. Click to try again, or open the game in its own browser tab if this keeps happening"
+    },
+    won: { title: 'You got them all', hint: 'Click or tap to play again' },
+    lost: { title: 'Out of time', hint: 'Click or tap to play again' }
+};
+
+// seconds a run lasts
+const TIME_LIMIT = 90;
+
+// how close the middle of the player must come to an orb to collect it, in metres
+const REACH = 1.2;
+
+// the height of the player's middle above the ground it stands on: half the capsule's height
+const PLAYER_HEIGHT = 0.9;
+
+// milliseconds after a run ends before a click starts another, so a touch that was steering when
+// the clock ran out doesn't restart it
+const RESTART_DELAY = 800;
+
+// stronger than Earth's 9.8, so a jump is quick and lands firmly
+const GRAVITY = -18;
+
+// degrees an orb turns each second
+const ORB_SPIN = 90;
+
+/**
+ * A first-person game: collect every orb in the level before the clock runs out. It builds the level
+ * from the `level` asset, gives `player` a first-person controller and talks to the page only
+ * through the `game:state` app event.
+ *
+ * The level is a GLB whose nodes are found by name: a mesh called `level` to look at, one called
+ * `collision` to stand on, any number called `orb-…` to collect, and one called `spawn` where the
+ * player starts.
+ */
+class Game extends Script {
+    static scriptName = 'game';
+
+    /** The level's GLB, as a loaded container asset. */
+    level!: Asset<'container'>;
+
+    /** The player: an entity with a capsule collision and a dynamic rigid body. */
+    player!: Entity;
+
+    /** The camera, a child of the player at eye height. */
+    camera!: Entity;
+
+    state: GameState = 'ready';
+    found = 0;
+    timeLeft = TIME_LIMIT;
+    endedAt = 0;
+
+    // whether the canvas holds the mouse
+    locked = false;
+
+    orbs: Entity[] = [];
+    spawn = new Vec3();
+
+    initialize() {
+        const canvas = this.app.graphicsDevice.canvas;
+
+        const root = this.level.resource!.instantiateRenderEntity();
+        this.entity.addChild(root);
+
+        // the player stands on the level's collision mesh, which is simpler than the one they see: a
+        // flight of stairs is a ramp in it, so the capsule glides up. It is never drawn. A level
+        // without one is stood on as it is seen
+        const solid = (root.findByName('collision') ?? root.findByName('level')) as Entity;
+        solid.addComponent('collision', { type: 'mesh', renderAsset: solid.render!.asset });
+        solid.addComponent('rigidbody', { type: 'static' });
+        if (solid.name === 'collision') solid.render!.enabled = false;
+
+        this.orbs = root.find((node) => node.name.startsWith('orb-')) as Entity[];
+        this.spawn.copy(root.findByName('spawn')!.getPosition()).add(new Vec3(0, PLAYER_HEIGHT, 0));
+
+        (this.app.systems.rigidbody as RigidBodyComponentSystem).gravity.set(0, GRAVITY, 0);
+        if (!this.player.script) this.player.addComponent('script');
+
+        canvas.addEventListener('pointerdown', this.onPointerDown);
+        document.addEventListener('pointerlockchange', this.onPointerLockChange);
+        document.addEventListener('pointerlockerror', this.onPointerLockError);
+        document.addEventListener('visibilitychange', this.onVisibilityChange);
+        this.on('destroy', () => {
+            canvas.removeEventListener('pointerdown', this.onPointerDown);
+            document.removeEventListener('pointerlockchange', this.onPointerLockChange);
+            document.removeEventListener('pointerlockerror', this.onPointerLockError);
+            document.removeEventListener('visibilitychange', this.onVisibilityChange);
+            this.player.script?.destroy('firstPersonController');
+            root.destroy();
+            this.app.timeScale = 1;
+        });
+
+        this.reset();
+    }
+
+    /** Puts everything back where a run starts. The first run goes through here too. */
+    reset() {
+        this.found = 0;
+        this.timeLeft = TIME_LIMIT;
+        for (const orb of this.orbs) orb.enabled = true;
+
+        this.player.rigidbody!.teleport(this.spawn);
+        this.player.rigidbody!.linearVelocity = Vec3.ZERO;
+
+        // a new controller each run, so the view starts level and facing into the yard again
+        this.player.script!.destroy('firstPersonController');
+        this.camera.setLocalEulerAngles(0, 0, 0);
+        this.player.script!.create(FirstPersonController, {
+            properties: {
+                camera: this.camera,
+                // tuned for the player's 80 kg under this gravity: a jump rises about 1.8 m, enough
+                // for every step and gap in the yard, and the ground speed is a brisk run
+                jumpForce: 650,
+                speedGround: 55
+            }
+        });
+
+        this.setState('ready');
+    }
+
+    setState(state: GameState) {
+        this.state = state;
+
+        // stop the clock outside play: physics, the controller and this script's own update all
+        // run on scaled time, so nothing moves and no time is lost
+        this.app.timeScale = state === 'playing' ? 1 : 0;
+        this.report();
+    }
+
+    report() {
+        this.app.fire('game:state', this.state, this.found, this.orbs.length, Math.ceil(this.timeLeft));
+    }
+
+    end(state: 'won' | 'lost') {
+        this.endedAt = performance.now();
+        this.setState(state);
+
+        // hand the mouse back, after the state has changed, so losing the lock isn't read as a pause
+        if (document.pointerLockElement) document.exitPointerLock();
+    }
+
+    onPointerDown = (event: PointerEvent) => {
+        if (this.state === 'playing') return;
+
+        if (this.state === 'won' || this.state === 'lost') {
+            if (performance.now() - this.endedAt < RESTART_DELAY) return;
+            this.reset();
+
+            // the controller asks for the mouse on every click, but the one this reset made joined
+            // too late to hear this click, so ask for it here. Only here: asking twice for one
+            // click makes the browser report a lock that was lost
+            if (event.pointerType === 'mouse') this.app.graphicsDevice.canvas.requestPointerLock();
+        }
+
+        this.setState('playing');
+    };
+
+    // Escape gives the mouse back, which holds the game. Only a lock that was held can be lost: a
+    // browser that refuses the lock also reports a change, and touch never has one
+    onPointerLockChange = () => {
+        const locked = document.pointerLockElement === this.app.graphicsDevice.canvas;
+        if (this.locked && !locked && this.state === 'playing') this.setState('paused');
+        this.locked = locked;
+    };
+
+    // The controller ignores the keyboard and the mouse until the canvas holds the lock. A browser
+    // can refuse it, as a preview pane embedded in an editor does, and Chrome does for a second after
+    // Escape. Say so, since otherwise the run starts and nothing steers it
+    onPointerLockError = () => {
+        if (this.state === 'playing') this.setState('blocked');
+    };
+
+    onVisibilityChange = () => {
+        if (document.hidden && this.state === 'playing') this.setState('paused');
+    };
+
+    update(dt: number) {
+        if (this.state !== 'playing') return;
+
+        const position = this.player.getPosition();
+
+        const seconds = Math.ceil(this.timeLeft);
+        this.timeLeft = Math.max(this.timeLeft - dt, 0);
+
+        const found = this.found;
+        for (const orb of this.orbs) {
+            if (!orb.enabled) continue;
+            orb.rotate(0, ORB_SPIN * dt, 0);
+            if (orb.getPosition().distance(position) < REACH) {
+                orb.enabled = false;
+                this.found++;
+            }
+        }
+
+        if (this.found === this.orbs.length) this.end('won');
+        else if (this.timeLeft === 0) this.end('lost');
+        else if (this.found !== found || Math.ceil(this.timeLeft) !== seconds) this.report();
+    }
+}
+
+export { Game };

package/templates/_shared/{sprite-game → platformer}/README.md

@@ -1,4 +1,4 @@
-## Sprite Game
+## Platformer
 
 A small procedural sprite animation, platforms and a simple side-scrolling controller.
 

package/templates/_shared/{sprite-game/src/sprite-game.ts → platformer/src/platformer.ts}

@@ -28,8 +28,8 @@ const PLATFORMS = [
     { x: 3.6, y: 1.1, width: 2.8 }
 ];
 
-class SpriteGame extends Script {
-    static scriptName = 'spriteGame';
+class Platformer extends Script {
+    static scriptName = 'platformer';
 
     keys = new Set<string>();
     player!: Entity;
@@ -194,4 +194,4 @@ class SpriteGame extends Script {
 
 const mathClamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
 
-export { SpriteGame };
+export { Platformer };

package/templates/_shared/{third-person-controller → third-person-game}/README.md

@@ -1,4 +1,4 @@
-## Third-Person Controller
+## Third-Person Game
 
 A physics-backed third-person controller, follow camera and animated robot.
 

package/templates/_shared/{vr-starter → vr}/README.md

@@ -1,4 +1,4 @@
-## VR Starter
+## Virtual Reality
 
 An immersive VR room with controller models and standard snap-turn and teleport locomotion.
 

package/templates/engine/ar/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Augmented Reality</title>
+    </head>
+    <body>
+        <canvas id="application-canvas"></canvas>
+        <div class="hud">
+            <section class="panel">
+                <h1>Augmented Reality</h1>
+                <p id="xr-status">Checking AR support…</p>
+                <div class="controls"><button id="xr-button" disabled>Start AR</button></div>
+            </section>
+        </div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/engine/{ar-placement → ar}/src/main.ts

@@ -17,24 +17,36 @@ import {
 import { ArPlacement } from './ar-placement';
 import './starter.css';
 
-document.body.insertAdjacentHTML(
-    'beforeend',
-    '<div class="hud"><section class="panel"><h1>AR Placement</h1><p id="xr-status">Checking AR support…</p><div class="controls"><button id="xr-button" disabled>Start AR</button></div></section></div>'
-);
-
 const canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
+
 const device = await createGraphicsDevice(canvas);
-const options = new AppOptions();
-options.graphicsDevice = device;
-options.componentSystems = [RenderComponentSystem, CameraComponentSystem, LightComponentSystem, ScriptComponentSystem];
-options.xr = XrManager;
+device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+
+const createOptions = new AppOptions();
+createOptions.graphicsDevice = device;
+createOptions.componentSystems = [
+    RenderComponentSystem,
+    CameraComponentSystem,
+    LightComponentSystem,
+    ScriptComponentSystem
+];
+createOptions.xr = XrManager;
 
 const app = new AppBase(canvas);
-app.init(options);
+app.init(createOptions);
 app.start();
+
+// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
 app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
 app.setCanvasResolution(RESOLUTION_AUTO);
 
+// Ensure canvas is resized when window changes size
+const resize = () => app.resizeCanvas();
+window.addEventListener('resize', resize);
+app.on('destroy', () => {
+    window.removeEventListener('resize', resize);
+});
+
 const camera = new Entity('camera');
 camera.addComponent('camera', { clearColor: new Color(0.05, 0.08, 0.12, 1) });
 camera.setPosition(3, 2.4, 4);
@@ -73,5 +85,3 @@ const placement = new Entity('placement');
 placement.addComponent('script');
 placement.script!.create(ArPlacement, { properties: { camera, preview } });
 app.root.addChild(placement);
-
-window.addEventListener('resize', () => app.resizeCanvas());

package/templates/engine/base/package.json

@@ -15,13 +15,13 @@
         "typecheck": "tsc --noEmit"
     },
     "dependencies": {
-        "playcanvas": "^2.24.0"
+        "playcanvas": "^2.24.1"
     },
     "devDependencies": {
         "@playcanvas/eslint-config": "3.0.0",
         "@playcanvas/inspector": "^0.5.0",
         "eslint": "^9.39.5",
-        "prettier": "^3.10.0",
+        "prettier": "^3.10.1",
         "typescript": "~6.0.3",
         "vite": "^8.3.8"
     },

package/templates/engine/first-person-game/index.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>First-Person Game</title>
+    </head>
+    <body>
+        <canvas id="application-canvas"></canvas>
+        <div class="hud">
+            <header class="status">
+                <span id="orbs"></span>
+                <span id="time"></span>
+            </header>
+            <section class="panel card" id="card">
+                <h1 id="card-title"></h1>
+                <p id="card-hint"></p>
+            </section>
+            <div class="crosshair"></div>
+            <div class="joystick" id="joystick" hidden></div>
+            <div class="joystick-knob" id="joystick-knob" hidden></div>
+        </div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/engine/first-person-game/src/main.ts

@@ -0,0 +1,167 @@
+import {
+    AppBase,
+    AppOptions,
+    Asset,
+    AssetListLoader,
+    CameraComponentSystem,
+    CollisionComponentSystem,
+    Color,
+    ContainerHandler,
+    Entity,
+    FILLMODE_FILL_WINDOW,
+    LightComponentSystem,
+    RenderComponentSystem,
+    RESOLUTION_AUTO,
+    RigidBodyComponentSystem,
+    ScriptComponentSystem,
+    SHADOW_PCF5_32F,
+    TextureHandler,
+    TONEMAP_ACES2,
+    Vec3,
+    WasmModule,
+    createGraphicsDevice
+} from 'playcanvas';
+import { ProceduralSky } from 'playcanvas/scripts/esm/sky/procedural-sky.mjs';
+
+import { CARDS, Game } from './game';
+import type { GameEvents } from './game';
+import './game.css';
+import './starter.css';
+
+// Swap this for your own level - files in public/ are served next to index.html, so use a ./ path.
+// The game finds its nodes by name: a mesh called `level` to look at, one called `collision` to
+// stand on, any number called `orb-…` to collect, and one called `spawn` where the player starts
+const LEVEL_URL = './level.glb';
+
+// Physics runs in Ammo, a WebAssembly module, which has to be ready before the app is created
+WasmModule.setConfig('Ammo', {
+    glueUrl: './ammo/ammo.wasm.js',
+    wasmUrl: './ammo/ammo.wasm.wasm'
+});
+await new Promise<void>((resolve) => {
+    WasmModule.getInstance('Ammo', () => resolve());
+});
+
+const canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
+
+const device = await createGraphicsDevice(canvas);
+device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+
+const createOptions = new AppOptions();
+createOptions.graphicsDevice = device;
+createOptions.componentSystems = [
+    RenderComponentSystem,
+    CameraComponentSystem,
+    LightComponentSystem,
+    ScriptComponentSystem,
+    CollisionComponentSystem,
+    RigidBodyComponentSystem
+];
+createOptions.resourceHandlers = [TextureHandler, ContainerHandler];
+
+const app = new AppBase(canvas);
+app.init(createOptions);
+
+// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
+app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
+app.setCanvasResolution(RESOLUTION_AUTO);
+
+// Ensure canvas is resized when window changes size
+const resize = () => app.resizeCanvas();
+window.addEventListener('resize', resize);
+app.on('destroy', () => {
+    window.removeEventListener('resize', resize);
+});
+
+// Load the level before starting, so the first frame already has something in it
+const level = new Asset('level', 'container', { url: LEVEL_URL });
+
+await new Promise<void>((resolve) => {
+    new AssetListLoader([level], app.assets).load(() => resolve());
+});
+
+app.start();
+
+// The HUD follows the game's state
+const hud = {
+    orbs: document.getElementById('orbs')!,
+    time: document.getElementById('time')!,
+    card: document.getElementById('card')!,
+    title: document.getElementById('card-title')!,
+    hint: document.getElementById('card-hint')!,
+    joystick: document.getElementById('joystick')!,
+    knob: document.getElementById('joystick-knob')!
+};
+
+const onState: GameEvents['game:state'] = (state, found, total, seconds) => {
+    const card = CARDS[state];
+    hud.orbs.textContent = `${found} / ${total}`;
+    hud.time.textContent = `${seconds}s`;
+    hud.card.hidden = !card;
+    if (card) {
+        hud.title.textContent = card.title;
+        hud.hint.textContent = card.hint;
+    }
+};
+app.on('game:state', onState);
+
+// A thumb on the left of the screen steers, and the circle and knob show where it is
+const onJoystick: GameEvents['joystick:left'] = (baseX, baseY, knobX, knobY) => {
+    hud.joystick.hidden = hud.knob.hidden = baseX < 0;
+    hud.joystick.style.left = `${baseX}px`;
+    hud.joystick.style.top = `${baseY}px`;
+    hud.knob.style.left = `${knobX}px`;
+    hud.knob.style.top = `${knobY}px`;
+};
+app.on('joystick:left', onJoystick);
+
+// The sun is a directional light that the sky keeps pointing the way its own sun does
+const sun = new Entity('sun');
+sun.addComponent('light', {
+    type: 'directional',
+    intensity: 2,
+    castShadows: true,
+    // far enough to reach across the yard from any corner
+    shadowDistance: 45,
+    // one shadow map over that distance is too coarse up close, so split it into cascades
+    numCascades: 4,
+    shadowResolution: 2048,
+    shadowType: SHADOW_PCF5_32F,
+    shadowBias: 0.2,
+    normalOffsetBias: 0.05
+});
+app.root.addChild(sun);
+
+// The procedural sky is both the background and the ambient light. Its default luminance is
+// scene-scale bright, so turn it down to keep the yard out of clipping
+const sky = new Entity('sky');
+sky.addComponent('script');
+sky.script!.create(ProceduralSky, {
+    properties: { luminance: 0.3, azimuth: 150, elevation: 45, sunLight: sun }
+});
+app.root.addChild(sky);
+
+// The sky lights the shade blue. A warm light from the other side, with no shadows of its own,
+// stands in for the sunlight the ground bounces back, so the shade stays soft and the sand warm
+const fill = new Entity('fill');
+fill.addComponent('light', { type: 'directional', intensity: 0.7, color: new Color().fromString('#ffdbb3') });
+fill.setEulerAngles(60, -30, 0);
+app.root.addChild(fill);
+
+// The player is a capsule the physics moves, with the camera at eye height. The game places it
+// at the level's spawn point and gives it a first-person controller
+const player = new Entity('player');
+player.addComponent('collision', { type: 'capsule', radius: 0.45, height: 1.8 });
+player.addComponent('rigidbody', { type: 'dynamic', mass: 80, angularFactor: Vec3.ZERO });
+app.root.addChild(player);
+
+// The sky is HDR, so the camera needs tone mapping to bring it back into displayable range
+const camera = new Entity('camera');
+camera.addComponent('camera', { fov: 80, toneMapping: TONEMAP_ACES2 });
+camera.setLocalPosition(0, 0.65, 0);
+player.addChild(camera);
+
+const game = new Entity('game');
+game.addComponent('script');
+game.script!.create(Game, { properties: { level, player, camera } });
+app.root.addChild(game);

package/templates/engine/platformer/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Platformer</title>
+    </head>
+    <body>
+        <canvas id="application-canvas"></canvas>
+        <div class="hud">
+            <section class="panel">
+                <h1>Platformer</h1>
+                <p>Use A/D or the arrow keys to move and Space to jump.</p>
+            </section>
+        </div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/engine/{sprite-game → platformer}/src/main.ts

@@ -13,28 +13,38 @@ import {
     createGraphicsDevice
 } from 'playcanvas';
 
-import { SpriteGame } from './sprite-game';
+import { Platformer } from './platformer';
 import './starter.css';
 
-document.body.insertAdjacentHTML(
-    'beforeend',
-    '<div class="hud"><section class="panel"><h1>Sprite Game</h1><p>Use A/D or the arrow keys to move and Space to jump.</p></section></div>'
-);
-
 const canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
+
 const device = await createGraphicsDevice(canvas);
 device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
 
-const options = new AppOptions();
-options.graphicsDevice = device;
-options.componentSystems = [RenderComponentSystem, CameraComponentSystem, SpriteComponentSystem, ScriptComponentSystem];
+const createOptions = new AppOptions();
+createOptions.graphicsDevice = device;
+createOptions.componentSystems = [
+    RenderComponentSystem,
+    CameraComponentSystem,
+    SpriteComponentSystem,
+    ScriptComponentSystem
+];
 
 const app = new AppBase(canvas);
-app.init(options);
+app.init(createOptions);
 app.start();
+
+// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
 app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
 app.setCanvasResolution(RESOLUTION_AUTO);
 
+// Ensure canvas is resized when window changes size
+const resize = () => app.resizeCanvas();
+window.addEventListener('resize', resize);
+app.on('destroy', () => {
+    window.removeEventListener('resize', resize);
+});
+
 const camera = new Entity('camera');
 camera.addComponent('camera', {
     projection: 1,
@@ -66,7 +76,5 @@ app.root.addChild(grass);
 const game = new Entity('game');
 game.setPosition(0, -2.15, 0);
 game.addComponent('script');
-game.script!.create(SpriteGame);
+game.script!.create(Platformer);
 app.root.addChild(game);
-
-window.addEventListener('resize', () => app.resizeCanvas());

package/templates/engine/product-configurator/index.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Product Configurator</title>
+    </head>
+    <body>
+        <canvas id="application-canvas"></canvas>
+        <div class="hud">
+            <section class="panel">
+                <h1>Product Configurator</h1>
+                <p>Choose a paint finish, then drag to orbit.</p>
+                <div class="controls variants" id="paints">
+                    <button aria-pressed="true" data-color="#d6293e" data-shade="#9b1731">
+                        <span class="finish" style="--color: #d6293e"></span>Crimson
+                    </button>
+                    <button data-color="#d8e4e9" data-shade="#8fa8b5">
+                        <span class="finish" style="--color: #d8e4e9"></span>Arctic
+                    </button>
+                    <button data-color="#9acb34" data-shade="#3c742d">
+                        <span class="finish" style="--color: #9acb34"></span>Volt
+                    </button>
+                </div>
+            </section>
+        </div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>