create-playcanvas 0.5.0 → 0.6.0

package/templates/engine/ar-placement/src/main.ts

@@ -0,0 +1,77 @@
+import {
+    AppBase,
+    AppOptions,
+    CameraComponentSystem,
+    Color,
+    Entity,
+    FILLMODE_FILL_WINDOW,
+    LightComponentSystem,
+    RenderComponentSystem,
+    RESOLUTION_AUTO,
+    ScriptComponentSystem,
+    StandardMaterial,
+    XrManager,
+    createGraphicsDevice
+} from 'playcanvas';
+
+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;
+
+const app = new AppBase(canvas);
+app.init(options);
+app.start();
+app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
+app.setCanvasResolution(RESOLUTION_AUTO);
+
+const camera = new Entity('camera');
+camera.addComponent('camera', { clearColor: new Color(0.05, 0.08, 0.12, 1) });
+camera.setPosition(3, 2.4, 4);
+camera.lookAt(0, 0.5, 0);
+app.root.addChild(camera);
+
+const light = new Entity('light');
+light.addComponent('light', { type: 'directional', intensity: 2 });
+light.setEulerAngles(45, 30, 0);
+app.root.addChild(light);
+
+const material = (color: Color) => {
+    const value = new StandardMaterial();
+    value.diffuse = color;
+    value.update();
+    return value;
+};
+const surface = material(new Color(0.28, 0.3, 0.34));
+const cyan = material(new Color(0.1, 0.7, 0.9));
+const coral = material(new Color(1, 0.35, 0.15));
+const preview = new Entity('preview');
+for (const [name, type, position, scale, value] of [
+    ['surface', 'cylinder', [0, 0, 0], [4, 0.15, 4], surface],
+    ['box', 'box', [0, 0.65, 0], [1, 1, 1], cyan],
+    ['reticle', 'cylinder', [0, 0.12, 0], [1.5, 0.03, 1.5], coral]
+] as const) {
+    const entity = new Entity(name);
+    entity.addComponent('render', { type, material: value });
+    entity.setLocalPosition(position[0], position[1], position[2]);
+    entity.setLocalScale(scale[0], scale[1], scale[2]);
+    preview.addChild(entity);
+}
+app.root.addChild(preview);
+
+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/.prettierignore

@@ -1,2 +1,3 @@
 .claude
 .agents
+public/ammo

package/templates/engine/base/README.md

@@ -9,7 +9,7 @@ Node.js 22.23.2 or later.
 ## Getting started
 
 ```bash
-npm create playcanvas@latest playcanvas-project -- --template engine
+npm create playcanvas@latest playcanvas-project -- --format engine
 cd playcanvas-project
 npm install
 npm run dev

package/templates/engine/base/_npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

package/templates/engine/base/eslint.config.mjs

@@ -1,3 +1,3 @@
 import typescriptConfig from '@playcanvas/eslint-config/typescript';
 
-export default [{ ignores: ['.claude', '.agents'] }, ...typescriptConfig];
+export default [{ ignores: ['.claude', '.agents', 'public/ammo'] }, ...typescriptConfig];

package/templates/engine/base/index.html

@@ -0,0 +1,13 @@
+<!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>PlayCanvas Starter</title>
+    </head>
+    <body>
+        <canvas id="application-canvas"></canvas>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/engine/base/package.json

@@ -15,14 +15,14 @@
         "typecheck": "tsc --noEmit"
     },
     "dependencies": {
-        "playcanvas": "^2.21.3"
+        "playcanvas": "^2.21.4"
     },
     "devDependencies": {
         "@playcanvas/eslint-config": "3.0.0-beta.8",
         "eslint": "^9.39.5",
         "prettier": "^3.9.6",
         "typescript": "~6.0.3",
-        "vite": "^8.2.0"
+        "vite": "^8.2.1"
     },
     "engines": {
         "node": ">=22.23.2"

package/templates/engine/base/src/starter.css

@@ -0,0 +1,104 @@
+* {
+    box-sizing: border-box;
+}
+
+html,
+body,
+#root,
+#application,
+pc-app,
+canvas {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    overflow: hidden;
+}
+
+body {
+    background: #11151c;
+    color: #f8fafc;
+    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+}
+
+canvas,
+pc-app {
+    display: block;
+}
+
+.hud {
+    position: fixed;
+    inset: 0;
+    z-index: 10;
+    padding: 20px;
+    pointer-events: none;
+}
+
+.panel {
+    width: min(360px, calc(100vw - 40px));
+    padding: 16px;
+    border: 1px solid #ffffff24;
+    border-radius: 14px;
+    background: #0b1019d9;
+    box-shadow: 0 12px 40px #0008;
+    backdrop-filter: blur(12px);
+    pointer-events: auto;
+}
+
+h1 {
+    margin: 0 0 6px;
+    font-size: 18px;
+}
+
+p {
+    margin: 6px 0 0;
+    color: #aeb8c8;
+    font-size: 13px;
+    line-height: 1.45;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 14px;
+}
+
+button {
+    padding: 8px 11px;
+    border: 1px solid #ffffff24;
+    border-radius: 9px;
+    background: #263247;
+    color: inherit;
+    cursor: pointer;
+}
+
+button:hover,
+button[aria-pressed='true'] {
+    border-color: #41b6e6;
+    background: #334867;
+}
+
+button:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+.swatch {
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border-radius: 50%;
+    background: var(--color);
+}
+
+.crosshair {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 16px;
+    height: 16px;
+    border: 2px solid #fff;
+    border-radius: 50%;
+    translate: -50% -50%;
+    box-shadow: 0 0 4px #000;
+}

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

@@ -0,0 +1,139 @@
+import {
+    AppBase,
+    AppOptions,
+    CameraComponentSystem,
+    CollisionComponentSystem,
+    Color,
+    Entity,
+    FILLMODE_FILL_WINDOW,
+    LightComponentSystem,
+    RenderComponentSystem,
+    RESOLUTION_AUTO,
+    RigidBodyComponentSystem,
+    ScriptComponentSystem,
+    StandardMaterial,
+    Vec3,
+    WasmModule,
+    createGraphicsDevice
+} from 'playcanvas';
+
+import { addFirstPersonController } from './controller';
+import './starter.css';
+
+WasmModule.setConfig('Ammo', {
+    glueUrl: '/ammo/ammo.wasm.js',
+    wasmUrl: '/ammo/ammo.wasm.wasm',
+    fallbackUrl: '/ammo/ammo.js'
+});
+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 = [
+    RenderComponentSystem,
+    CameraComponentSystem,
+    LightComponentSystem,
+    ScriptComponentSystem,
+    CollisionComponentSystem,
+    RigidBodyComponentSystem
+];
+
+const app = new AppBase(canvas);
+app.init(options);
+app.start();
+app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
+app.setCanvasResolution(RESOLUTION_AUTO);
+
+const material = (color: Color) => {
+    const result = new StandardMaterial();
+    result.diffuse = color;
+    result.emissive = new Color(color.r * 0.2, color.g * 0.2, color.b * 0.2);
+    result.update();
+    return result;
+};
+
+const floor = material(new Color(0.28, 0.3, 0.32));
+const wall = material(new Color(0.42, 0.45, 0.48));
+const blue = material(new Color(0.08, 0.29, 0.48));
+const green = material(new Color(0.18, 0.4, 0.22));
+const wood = material(new Color(0.48, 0.27, 0.1));
+const metal = material(new Color(0.28, 0.33, 0.38));
+
+const block = (
+    name: string,
+    position: [number, number, number],
+    scale: [number, number, number],
+    blockMaterial: StandardMaterial
+) => {
+    const entity = new Entity(name);
+    entity.setPosition(...position);
+    entity.setLocalScale(...scale);
+    entity.addComponent('render', { type: 'box', material: blockMaterial });
+    entity.addComponent('collision', {
+        type: 'box',
+        halfExtents: new Vec3(scale[0] / 2, scale[1] / 2, scale[2] / 2)
+    });
+    entity.addComponent('rigidbody', { type: 'static' });
+    app.root.addChild(entity);
+};
+
+block('floor', [0, -0.1, 0], [18, 0.2, 18], floor);
+block('back-wall', [0, 1.5, -9], [18, 3, 0.3], wall);
+block('front-wall', [0, 1.5, 9], [18, 3, 0.3], wall);
+block('left-wall', [-9, 1.5, 0], [0.3, 3, 18], wall);
+block('right-wall', [9, 1.5, 0], [0.3, 3, 18], wall);
+block('blue-crate', [-2, 0.75, -3], [1.5, 1.5, 1.5], blue);
+block('green-crate', [3, 0.5, 1], [2.5, 1, 1], green);
+block('cargo-left-0', [-5.5, 0.75, -5.5], [2, 1.5, 2], wood);
+block('cargo-left-1', [-5.5, 2, -5.5], [1.5, 1, 1.5], blue);
+block('cargo-right-0', [5.3, 0.6, -4.8], [2.4, 1.2, 2], green);
+block('cargo-right-1', [5.3, 1.7, -4.8], [1.5, 1, 1.5], wood);
+block('cargo-center', [0, 0.6, -6.5], [2.2, 1.2, 1.8], blue);
+for (const [i, z] of [-3.5, 0, 3.5].entries()) {
+    block(`shelf-left-post-${i}`, [-6.8, 1.4, z], [0.25, 2.8, 0.25], metal);
+    block(`shelf-right-post-${i}`, [6.8, 1.4, z], [0.25, 2.8, 0.25], metal);
+}
+block('shelf-left-low', [-6.8, 0.65, 0], [1.1, 0.18, 7.5], metal);
+block('shelf-left-high', [-6.8, 2.1, 0], [1.1, 0.18, 7.5], metal);
+block('shelf-right-low', [6.8, 0.65, 0], [1.1, 0.18, 7.5], metal);
+block('shelf-right-high', [6.8, 2.1, 0], [1.1, 0.18, 7.5], metal);
+block('pallet', [-2.5, 0.15, 2.5], [3, 0.3, 2], wood);
+
+const player = new Entity('player');
+player.setPosition(0, 1, 5);
+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);
+
+const camera = new Entity('camera');
+camera.addComponent('camera', { clearColor: new Color(0.38, 0.64, 0.86), fov: 80 });
+camera.setLocalPosition(0, 0.65, 0);
+player.addChild(camera);
+addFirstPersonController(player, camera);
+
+const light = new Entity('light');
+light.addComponent('light', {
+    type: 'directional',
+    intensity: 2.5,
+    castShadows: true,
+    shadowBias: 0.2,
+    normalOffsetBias: 0.05
+});
+light.setEulerAngles(50, 30, 0);
+app.root.addChild(light);
+
+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/interactive-sphere/src/App.ts

@@ -28,8 +28,8 @@ import { Grid } from 'playcanvas/scripts/esm/grid.mjs';
 
 import { throttle } from './utils';
 
-const HOVER_COLOR = new Color(1, 0.647, 0);
-const DEFAULT_COLOR = new Color(0.827, 0.827, 0.827);
+const HOVER_COLOR = new Color(0.25, 0.8, 1);
+const DEFAULT_COLOR = new Color(0.9, 0.93, 0.98);
 
 // Assets to load
 const assets = {
@@ -97,7 +97,8 @@ const setupApp = async (canvas: HTMLCanvasElement, onClick: () => void) => {
 
     // Create sphere entity
     const sphere = new Entity('sphere');
-    sphere.setPosition(new Vec3(0, 0.5, 0));
+    sphere.setPosition(new Vec3(0, 0.7, 0));
+    sphere.setLocalScale(1.25, 1.25, 1.25);
 
     // Create a new material
     const material = new StandardMaterial();
@@ -113,20 +114,21 @@ const setupApp = async (canvas: HTMLCanvasElement, onClick: () => void) => {
     // Create camera entity
     const camera = new Entity('camera');
     camera.addComponent('camera', {
-        clearColor: new Color(0.09, 0.09, 0.09)
+        clearColor: new Color(0.025, 0.04, 0.065)
     });
-    camera.setPosition(new Vec3(4, 1, 4));
+    camera.setPosition(new Vec3(3.2, 1.5, 3.2));
+    camera.lookAt(0, 0.7, 0);
     app.root.addChild(camera);
 
     // Create camera controls
     camera.addComponent('script');
-    camera.script?.create(CameraControls);
+    camera.script?.create(CameraControls, { properties: { sceneSize: 3 } });
 
     // Create grid entity
     const grid = new Entity('grid');
     grid.addComponent('script');
     grid.script?.create(Grid);
-    grid.setLocalScale(1000, 1000, 1000);
+    grid.setLocalScale(12, 12, 12);
     app.root.addChild(grid);
 
     // Create a picker for mouse interaction

package/templates/engine/interactive-sphere/src/main.ts

@@ -1,45 +1,18 @@
 import './style.css';
 import { setupApp } from './App';
-import playcanvasLogo from './assets/playcanvas.png';
-import typescriptLogo from './assets/typescript.svg';
 
 let count = 0;
 
 document.querySelector<HTMLDivElement>('#root')!.innerHTML = `
-  <div>
     <canvas id="application-canvas"></canvas>
-    <div class="absolute overlay">
-      <div class="grow">
-        <header>
-          <h1>PlayCanvas + TypeScript</h1>
-          <a href="https://developer.playcanvas.com" target="_blank">
-            <img src="${playcanvasLogo}" class="playcanvas-logo logo" alt="PlayCanvas logo" />
-          </a>
-          <a href="https://www.typescriptlang.org/" target="_blank">
-            <img src="${typescriptLogo}" class="logo typescript" alt="TypeScript logo" />
-          </a>
-        </header>
-      </div>
-      <div>
-        <span id="counter" class="pill">
-          Click Count: ${count}
-        </span>
-        <p>
-          Edit <code>src/App.ts</code> and save to test HMR
-        </p>
-      </div>
-      <p class="read-the-docs">
-        Click on the PlayCanvas and TypeScript logos to learn more
-      </p>
-    </div>
-  </div>
+    <p id="counter" class="counter">Click count: ${count}</p>
 `;
 
 const counterElement = document.getElementById('counter')!;
 
 const increment = () => {
     count++;
-    counterElement.textContent = `Click Count: ${count}`;
+    counterElement.textContent = `Click count: ${count}`;
 };
 
 setupApp(document.getElementById('application-canvas') as HTMLCanvasElement, increment);

package/templates/engine/interactive-sphere/src/style.css

@@ -1,107 +1,28 @@
-:root {
-    font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-    line-height: 1.5;
-    font-weight: 400;
-
-    color-scheme: light dark;
-    color: rgba(255, 255, 255, 0.87);
-    background-color: #242424;
-
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 2rem;
-}
-
-a {
-    font-weight: 500;
-    color: #646cff;
-    pointer-events: auto;
-    text-decoration: inherit;
-}
-a:hover {
-    color: #535bf2;
-}
-
 body {
-    width: 100%;
-    height: 100%;
-    padding: 0;
     margin: 0;
     overflow: hidden;
+    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
 }
 
-h1 {
-    font-size: 2.4em;
-    line-height: 1.1;
-    opacity: 0.85;
-}
-
-.logo {
-    height: 2em;
-    padding: 0.5em;
-    will-change: filter;
-    transition: filter 300ms;
-}
-
-.playcanvas-logo {
-    border-radius: 100%;
-}
-
-.logo:hover {
-    filter: drop-shadow(0 0 2em #646cffaa);
-}
-
-.logo.typescript:hover {
-    filter: drop-shadow(0 0 2em #3178c6aa);
-}
-
-.read-the-docs {
-    color: #888;
-}
-
-@media (prefers-color-scheme: light) {
-    :root {
-        color: #213547;
-        background-color: #ffffff;
-    }
-    a:hover {
-        color: #747bff;
-    }
-}
-
-.overlay {
-    margin: 0 auto;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: stretch;
+canvas {
+    display: block;
     width: 100vw;
     height: 100vh;
-    pointer-events: none;
-}
-
-.overlay > .grow {
-    flex-grow: 1;
 }
 
-.absolute {
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-.pill {
-    background-color: #000;
-    color: #fff;
-    padding: 0.5rem 1rem;
-    border-radius: 0.5rem;
+.counter {
+    position: fixed;
+    bottom: 22px;
+    left: 50%;
+    z-index: 2;
+    margin: 0;
+    padding: 9px 13px;
+    border: 1px solid #ffffff24;
+    border-radius: 999px;
+    background: #07101bd9;
+    color: #f8fafc;
+    font-size: 12px;
+    font-weight: 650;
+    translate: -50% 0;
+    backdrop-filter: blur(10px);
 }

package/templates/engine/model-viewer/src/main.ts

@@ -75,7 +75,8 @@ const camera = new Entity('camera');
 camera.addComponent('camera', {
     toneMapping: TONEMAP_ACES2
 });
-camera.setPosition(0, 0, 3);
+camera.setPosition(2.6, 1.5, 3.2);
+camera.lookAt(0, 0, 0);
 camera.addComponent('script');
-camera.script?.create(CameraControls);
+camera.script?.create(CameraControls, { properties: { sceneSize: 2.5 } });
 app.root.addChild(camera);