create-playcanvas 0.15.0 → 0.16.1

package/templates/engine/ar-placement/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>AR Placement</title>
+    </head>
+    <body>
+        <canvas id="application-canvas"></canvas>
+        <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>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/engine/ar-placement/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/AGENTS.md

@@ -26,6 +26,7 @@ A PlayCanvas Engine app in TypeScript, built with Vite. The scene is built in co
 - Builds use relative URLs (`base: './'` in `vite.config.ts`), so they run from any folder. Load files in `public/` with relative paths such as `./model.glb`, not `/model.glb`.
 - The engine ships ready-made scripts, such as camera controls and character controllers, under `playcanvas/scripts/esm/`. Use one before writing the same behavior yourself.
 - `node_modules/playcanvas/build/playcanvas.d.ts` documents the installed engine's API.
+- For guides, start from the [Engine guides index](https://developer.playcanvas.com/user-manual/engine/llms.txt), which links a Markdown version of every page.
 - TypeScript is strict, and unused locals and parameters are errors.
 
 ## Checking your work

package/templates/engine/base/README.md

@@ -45,6 +45,6 @@ This project includes [`@playcanvas/skills`](https://github.com/playcanvas/skill
 ## Further reading
 
 - [PlayCanvas Engine manual](https://developer.playcanvas.com/user-manual/engine/)
-- [PlayCanvas examples](https://playcanvas.github.io/)
+- [PlayCanvas examples](https://playcanvas.com/examples)
 - [Vite documentation](https://vite.dev/)
 - [TypeScript documentation](https://www.typescriptlang.org/docs/)

package/templates/engine/first-person-controller/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>First-Person Controller</title>
+    </head>
+    <body>
+        <canvas id="application-canvas"></canvas>
+        <div class="hud">
+            <section class="panel">
+                <h1>First-Person Controller</h1>
+                <p>Click the scene, then use WASD, mouse look and Space to jump.</p>
+            </section>
+        </div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

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

@@ -28,16 +28,14 @@ await new Promise<void>((resolve) => {
     WasmModule.getInstance('Ammo', () => resolve());
 });
 
-document.body.insertAdjacentHTML(
-    'beforeend',
-    '<div class="hud"><section class="panel"><h1>First-Person Controller</h1><p>Click the scene, then use WASD, mouse look and Space to jump.</p></section></div>'
-);
-
 const canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
+
 const device = await createGraphicsDevice(canvas);
-const options = new AppOptions();
-options.graphicsDevice = device;
-options.componentSystems = [
+device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+
+const createOptions = new AppOptions();
+createOptions.graphicsDevice = device;
+createOptions.componentSystems = [
     RenderComponentSystem,
     CameraComponentSystem,
     LightComponentSystem,
@@ -47,11 +45,20 @@ options.componentSystems = [
 ];
 
 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 material = (color: Color) => {
     const result = new StandardMaterial();
     result.diffuse = color;
@@ -134,5 +141,3 @@ const fill = new Entity('fill');
 fill.addComponent('light', { type: 'directional', intensity: 0.8 });
 fill.setEulerAngles(-25, -140, 0);
 app.root.addChild(fill);
-
-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>

package/templates/engine/product-configurator/src/main.ts

@@ -29,33 +29,38 @@ import './product.css';
 import './starter.css';
 
 const PRODUCT_URL = 'https://developer.playcanvas.com/assets/lambo.glb';
-const PAINTS = [
-    { name: 'Crimson', color: '#d6293e', shade: '#9b1731' },
-    { name: 'Arctic', color: '#d8e4e9', shade: '#8fa8b5' },
-    { name: 'Volt', color: '#9acb34', shade: '#3c742d' }
-];
 const CAMERA_FOCUS = new Vec3(0, 0.8, 0);
 const CAMERA_PITCH = new Vec2(-85, -4);
 
-document.body.insertAdjacentHTML(
-    'beforeend',
-    `<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">${PAINTS.map(({ name, color }, i) => `<button aria-pressed="${i === 0}" data-color="${color}"><span class="finish" style="--color:${color}"></span>${name}</button>`).join('')}</div></section></div>`
-);
-
 const canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
+
 const device = await createGraphicsDevice(canvas);
-device.maxPixelRatio = Math.min(device.maxPixelRatio, 2);
+device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
 
-const options = new AppOptions();
-options.graphicsDevice = device;
-options.componentSystems = [RenderComponentSystem, CameraComponentSystem, LightComponentSystem, ScriptComponentSystem];
-options.resourceHandlers = [TextureHandler, ContainerHandler];
+const createOptions = new AppOptions();
+createOptions.graphicsDevice = device;
+createOptions.componentSystems = [
+    RenderComponentSystem,
+    CameraComponentSystem,
+    LightComponentSystem,
+    ScriptComponentSystem
+];
+createOptions.resourceHandlers = [TextureHandler, ContainerHandler];
 
 const app = new AppBase(canvas);
-app.init(options);
+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);
+});
+
 const product = new Asset('car', 'container', { url: PRODUCT_URL });
 await new Promise<void>((resolve) => new AssetListLoader([product], app.assets).load(() => resolve()));
 
@@ -82,10 +87,18 @@ const paint = body[0].material!.clone() as StandardMaterial;
 const shade = panels[0].material!.clone() as StandardMaterial;
 body.forEach((mesh) => (mesh.material = paint));
 panels.forEach((mesh) => (mesh.material = shade));
-paint.diffuse.fromString(PAINTS[0].color);
-shade.diffuse.fromString(PAINTS[0].shade);
-paint.update();
-shade.update();
+
+// Each paint button in index.html carries its finish's two colors
+const buttons = document.querySelectorAll<HTMLButtonElement>('#paints button');
+const choose = (button: HTMLButtonElement) => {
+    paint.diffuse.fromString(button.dataset.color!);
+    shade.diffuse.fromString(button.dataset.shade!);
+    paint.update();
+    shade.update();
+    buttons.forEach((item) => (item.ariaPressed = String(item === button)));
+};
+buttons.forEach((button) => (button.onclick = () => choose(button)));
+choose(buttons[0]);
 
 const sky = new Entity('sky');
 sky.addComponent('script');
@@ -141,15 +154,3 @@ light.addComponent('light', {
 });
 light.setEulerAngles(45, -145, 0);
 app.root.addChild(light);
-
-document.querySelectorAll<HTMLButtonElement>('#paints button').forEach((button, i, buttons) => {
-    button.onclick = () => {
-        paint.diffuse.fromString(PAINTS[i].color);
-        shade.diffuse.fromString(PAINTS[i].shade);
-        paint.update();
-        shade.update();
-        buttons.forEach((item, j) => (item.ariaPressed = String(i === j)));
-    };
-});
-
-window.addEventListener('resize', () => app.resizeCanvas());

package/templates/engine/scene-editor/index.html

@@ -0,0 +1,33 @@
+<!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>Scene Editor</title>
+    </head>
+    <body>
+        <canvas id="application-canvas"></canvas>
+        <div class="hud">
+            <section class="panel">
+                <h1>Scene Editor</h1>
+                <p>Click an object to select it, then drag its gizmo. Drag anywhere else to orbit.</p>
+                <div class="controls">
+                    <button data-mode="translate" aria-pressed="true">Move</button>
+                    <button data-mode="rotate" aria-pressed="false">Rotate</button>
+                    <button data-mode="scale" aria-pressed="false">Scale</button>
+                </div>
+                <div class="controls">
+                    <button data-add="box">Add box</button>
+                    <button data-add="sphere">Add sphere</button>
+                    <button data-add="cone">Add cone</button>
+                </div>
+                <div class="controls">
+                    <button id="delete" disabled>Delete</button>
+                    <button id="reset">Reset</button>
+                </div>
+            </section>
+        </div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/engine/scene-editor/src/main.ts

@@ -6,52 +6,57 @@ import {
     Entity,
     FILLMODE_FILL_WINDOW,
     LightComponentSystem,
-    RenderComponentSystem,
     RESOLUTION_AUTO,
+    RenderComponentSystem,
     ScriptComponentSystem,
-    StandardMaterial,
     createGraphicsDevice
 } from 'playcanvas';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
 import { Grid } from 'playcanvas/scripts/esm/grid.mjs';
 
 import { SceneEditor } from './scene-editor';
+import type { Mode, Shape } from './scene-editor';
 import './starter.css';
 
-document.body.insertAdjacentHTML(
-    'beforeend',
-    '<div class="hud"><section class="panel"><h1>Scene Editor</h1><p>Select an object, then translate, rotate or scale it.</p><div class="controls"><button data-target="0" aria-pressed="true">Cube</button><button data-target="1">Sphere</button></div><div class="controls"><button data-mode="translate" aria-pressed="true">Move</button><button data-mode="rotate">Rotate</button><button data-mode="scale">Scale</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];
+device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+
+const createOptions = new AppOptions();
+createOptions.graphicsDevice = device;
+createOptions.componentSystems = [
+    RenderComponentSystem,
+    CameraComponentSystem,
+    LightComponentSystem,
+    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);
 
-app.scene.ambientLight = new Color(0.25, 0.28, 0.34);
-
-const coral = new StandardMaterial();
-coral.diffuse = new Color(1, 0.32, 0.27);
-coral.update();
-const cyan = new StandardMaterial();
-cyan.diffuse = new Color(0.14, 0.68, 0.88);
-cyan.update();
+// Ensure canvas is resized when window changes size
+const resize = () => app.resizeCanvas();
+window.addEventListener('resize', resize);
+app.on('destroy', () => {
+    window.removeEventListener('resize', resize);
+});
 
-const cube = new Entity('cube');
-cube.addComponent('render', { type: 'box', material: coral });
-cube.setPosition(-1.2, 0.5, 0);
-app.root.addChild(cube);
+const light = new Entity('light');
+light.addComponent('light', { type: 'directional', intensity: 2.5 });
+light.setEulerAngles(45, 30, 0);
+app.root.addChild(light);
 
-const sphere = new Entity('sphere');
-sphere.addComponent('render', { type: 'sphere', material: cyan });
-sphere.setPosition(1.2, 0.5, 0);
-app.root.addChild(sphere);
+// A weaker light from behind keeps the sides the first can't reach from going black
+const fill = new Entity('fill');
+fill.addComponent('light', { type: 'directional', intensity: 0.8 });
+fill.setEulerAngles(-25, -140, 0);
+app.root.addChild(fill);
 
 const grid = new Entity('grid');
 grid.addComponent('script');
@@ -59,32 +64,36 @@ grid.script!.create(Grid);
 grid.setLocalScale(12, 12, 12);
 app.root.addChild(grid);
 
+// Create camera entity with orbit controls
 const camera = new Entity('camera');
 camera.addComponent('camera', { clearColor: new Color(0.04, 0.06, 0.09) });
 camera.setPosition(4, 3.2, 5);
 camera.lookAt(0, 0.5, 0);
+camera.addComponent('script');
+camera.script!.create(CameraControls, { properties: { sceneSize: 5 } });
 app.root.addChild(camera);
 
-const light = new Entity('light');
-light.addComponent('light', {
-    type: 'directional',
-    intensity: 2.5,
-    castShadows: true,
-    shadowBias: 0.2,
-    normalOffsetBias: 0.05
-});
-light.setEulerAngles(45, 30, 0);
-app.root.addChild(light);
+// The editor creates the objects under its own entity, from the scene saved in this browser
+const host = new Entity('editor');
+host.addComponent('script');
+const editor = host.script!.create(SceneEditor, { properties: { camera } }) as SceneEditor;
+app.root.addChild(host);
 
-const editor = new Entity('editor');
-editor.addComponent('script');
-editor.script!.create(SceneEditor, {
-    properties: {
-        camera,
-        targets: [cube, sphere],
-        layer: app.scene.layers.getLayerByName('World')
-    }
+// The HUD drives the editor, and follows its selection
+const modes = document.querySelectorAll<HTMLButtonElement>('[data-mode]');
+modes.forEach((button) => {
+    button.addEventListener('click', () => {
+        editor.mode = button.dataset.mode as Mode;
+        modes.forEach((other) => (other.ariaPressed = String(other === button)));
+    });
+});
+document.querySelectorAll<HTMLButtonElement>('[data-add]').forEach((button) => {
+    button.addEventListener('click', () => editor.add(button.dataset.add as Shape));
 });
-app.root.addChild(editor);
 
-window.addEventListener('resize', () => app.resizeCanvas());
+const remove = document.getElementById('delete') as HTMLButtonElement;
+remove.addEventListener('click', () => editor.remove());
+document.getElementById('reset')!.addEventListener('click', () => editor.reset());
+app.on('editor:select', (selected: Entity | null) => {
+    remove.disabled = !selected;
+});

package/templates/engine/sprite-game/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>Sprite Game</title>
+    </head>
+    <body>
+        <canvas id="application-canvas"></canvas>
+        <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>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/engine/sprite-game/src/main.ts

@@ -16,25 +16,35 @@ import {
 import { SpriteGame } from './sprite-game';
 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,
@@ -68,5 +78,3 @@ game.setPosition(0, -2.15, 0);
 game.addComponent('script');
 game.script!.create(SpriteGame);
 app.root.addChild(game);
-
-window.addEventListener('resize', () => app.resizeCanvas());

package/templates/engine/third-person-controller/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>Third-Person Controller</title>
+    </head>
+    <body>
+        <canvas id="application-canvas"></canvas>
+        <div class="hud">
+            <section class="panel">
+                <h1>Third-Person Controller</h1>
+                <p>Click the scene, then use WASD to move, mouse to orbit and Space to jump.</p>
+            </section>
+        </div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/engine/third-person-controller/src/main.ts

@@ -49,16 +49,14 @@ await new Promise<void>((resolve) => {
     WasmModule.getInstance('Ammo', () => resolve());
 });
 
-document.body.insertAdjacentHTML(
-    'beforeend',
-    '<div class="hud"><section class="panel"><h1>Third-Person Controller</h1><p>Click the scene, then use WASD to move, mouse to orbit and Space to jump.</p></section></div>'
-);
-
 const canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
+
 const device = await createGraphicsDevice(canvas);
-const options = new AppOptions();
-options.graphicsDevice = device;
-options.componentSystems = [
+device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+
+const createOptions = new AppOptions();
+createOptions.graphicsDevice = device;
+createOptions.componentSystems = [
     RenderComponentSystem,
     CameraComponentSystem,
     LightComponentSystem,
@@ -68,10 +66,19 @@ options.componentSystems = [
 ];
 
 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);
+});
 app.scene.ambientLight = new Color(0.28, 0.32, 0.38);
 
 const groundMaterial = new StandardMaterial();
@@ -216,5 +223,3 @@ light.addComponent('light', {
 });
 light.setEulerAngles(45, 30, 0);
 app.root.addChild(light);
-
-window.addEventListener('resize', () => app.resizeCanvas());

package/templates/engine/vr-starter/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>VR Starter</title>
+    </head>
+    <body>
+        <canvas id="application-canvas"></canvas>
+        <div class="hud">
+            <section class="panel">
+                <h1>VR Starter</h1>
+                <p id="xr-status">Checking VR support…</p>
+                <div class="controls"><button id="xr-button" disabled>Enter VR</button></div>
+            </section>
+        </div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>