create-playcanvas 0.5.1 → 0.6.1

package/templates/engine/vr-starter/src/main.ts

@@ -0,0 +1,101 @@
+import {
+    AppBase,
+    AppOptions,
+    CameraComponentSystem,
+    Color,
+    Entity,
+    FILLMODE_FILL_WINDOW,
+    LightComponentSystem,
+    RenderComponentSystem,
+    RESOLUTION_AUTO,
+    ScriptComponentSystem,
+    StandardMaterial,
+    XrManager,
+    createGraphicsDevice
+} from 'playcanvas';
+
+import './starter.css';
+import { setupVr } from './vr';
+
+document.body.insertAdjacentHTML(
+    'beforeend',
+    '<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>'
+);
+
+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);
+app.scene.ambientLight = new Color(0.32, 0.34, 0.38);
+
+const material = (color: Color) => {
+    const value = new StandardMaterial();
+    value.diffuse = color;
+    value.update();
+    return value;
+};
+const floorMaterial = material(new Color(0.38, 0.4, 0.43));
+const wallMaterial = material(new Color(0.24, 0.26, 0.29));
+const cyan = material(new Color(0.12, 0.7, 0.86));
+const coral = material(new Color(1, 0.35, 0.3));
+const yellow = material(new Color(1, 0.75, 0.2));
+
+const floor = new Entity('floor');
+floor.addComponent('render', { type: 'plane', material: floorMaterial });
+floor.setLocalScale(10, 1, 10);
+app.root.addChild(floor);
+
+const part = (
+    name: string,
+    type: 'box' | 'sphere' | 'cone',
+    position: [number, number, number],
+    scale: [number, number, number],
+    value: StandardMaterial
+) => {
+    const entity = new Entity(name);
+    entity.addComponent('render', { type, material: value });
+    entity.setPosition(...position);
+    entity.setLocalScale(...scale);
+    app.root.addChild(entity);
+};
+part('back-wall', 'box', [0, 2, -3.5], [8, 4, 0.2], wallMaterial);
+part('left-wall', 'box', [-4, 2, 0], [0.2, 4, 7], wallMaterial);
+part('right-wall', 'box', [4, 2, 0], [0.2, 4, 7], wallMaterial);
+part('cyan-panel', 'box', [-2.4, 2.4, -3.35], [1.3, 1.3, 0.12], cyan);
+part('coral-panel', 'box', [0, 2.4, -3.35], [1.3, 1.3, 0.12], coral);
+part('yellow-panel', 'box', [2.4, 2.4, -3.35], [1.3, 1.3, 0.12], yellow);
+[-2.4, 0, 2.4].forEach((x, i) => {
+    part(`pedestal-${i}`, 'box', [x, 0.45, -1.6], [1, 0.9, 1], wallMaterial);
+});
+part('sphere', 'sphere', [-2.4, 1.35, -1.6], [0.7, 0.7, 0.7], cyan);
+part('cube', 'box', [0, 1.35, -1.6], [0.7, 0.7, 0.7], coral);
+part('cone', 'cone', [2.4, 1.35, -1.6], [0.8, 0.9, 0.8], yellow);
+
+const rig = new Entity('xr-rig');
+const camera = new Entity('camera');
+camera.addComponent('camera', { clearColor: new Color(0.16, 0.18, 0.22) });
+camera.setLocalPosition(0, 1.6, 4);
+rig.addChild(camera);
+app.root.addChild(rig);
+setupVr(app, rig, camera);
+
+const light = new Entity('light');
+light.addComponent('light', {
+    type: 'directional',
+    intensity: 2,
+    castShadows: true,
+    shadowBias: 0.2,
+    normalOffsetBias: 0.05
+});
+light.setEulerAngles(45, 30, 0);
+app.root.addChild(light);
+
+window.addEventListener('resize', () => app.resizeCanvas());

package/templates/index.ts

@@ -2,7 +2,7 @@ import colors from 'picocolors';
 
 const { cyan, magenta, yellow } = colors;
 
-export const TEMPLATES = [
+export const FORMATS = [
     {
         name: 'engine',
         display: 'Engine',
@@ -23,28 +23,89 @@ export const TEMPLATES = [
     }
 ];
 
-// Every template holds a `base` directory of shared tooling plus one directory per boilerplate,
-// which is copied over the top. Assets a boilerplate needs in every template live once in
-// `_shared/<boilerplate>` and are seeded in first. The first entry is the default.
-export const BOILERPLATES = [
+export const FEATURES: Record<string, Record<string, string[]>> = {
+    physics: {
+        engine: ['assets'],
+        react: ['react'],
+        'web-components': ['assets']
+    }
+};
+
+// every format holds a base plus one directory per starter; the first starter is the default
+export const STARTERS = [
     {
         name: 'spinning-cube',
         display: 'Spinning Cube',
+        category: 'Basics',
         description: 'a rotating cube and a light'
     },
     {
         name: 'interactive-sphere',
         display: 'Interactive Sphere',
+        category: 'Basics',
         description: 'orbit controls, a grid and pointer picking'
     },
     {
         name: 'model-viewer',
         display: 'Model Viewer',
+        category: 'Viewers',
         description: 'a glTF model, orbit controls and a procedural sky'
     },
     {
         name: 'splat-viewer',
         display: 'Splat Viewer',
+        category: 'Viewers',
         description: 'a Gaussian splat and orbit controls'
+    },
+    {
+        name: 'product-configurator',
+        display: 'Product Configurator',
+        category: 'Viewers',
+        description: 'product variants, materials and orbit controls'
+    },
+    {
+        name: 'physics-playground',
+        display: 'Physics Playground',
+        category: 'Games',
+        description: 'rigid bodies, collisions, spawning and reset',
+        features: ['physics']
+    },
+    {
+        name: 'first-person-controller',
+        display: 'First-Person Controller',
+        category: 'Games',
+        description: 'first-person movement, mouse look and jumping',
+        features: ['physics']
+    },
+    {
+        name: 'third-person-controller',
+        display: 'Third-Person Controller',
+        category: 'Games',
+        description: 'an animated character, follow camera and locomotion',
+        features: ['physics']
+    },
+    {
+        name: 'sprite-game',
+        display: 'Sprite Game',
+        category: 'Games',
+        description: 'an orthographic camera, sprite animation and input'
+    },
+    {
+        name: 'scene-editor',
+        display: 'Scene Editor',
+        category: 'Tools',
+        description: 'selection and translate, rotate and scale gizmos'
+    },
+    {
+        name: 'vr-starter',
+        display: 'VR Starter',
+        category: 'XR',
+        description: 'immersive VR, controllers and locomotion'
+    },
+    {
+        name: 'ar-placement',
+        display: 'AR Placement',
+        category: 'XR',
+        description: 'mobile AR, hit testing and object placement'
     }
 ];

package/templates/react/ar-placement/src/App.tsx

@@ -0,0 +1,58 @@
+import { Application, Entity } from '@playcanvas/react';
+import { Camera, Light, Render, Script } from '@playcanvas/react/components';
+import { useMaterial } from '@playcanvas/react/hooks';
+import type { Entity as PcEntity } from 'playcanvas';
+import { useState } from 'react';
+
+import { ArPlacement } from './ar-placement';
+import './starter.css';
+
+function App() {
+    const [camera, setCamera] = useState<PcEntity | null>(null);
+    const [preview, setPreview] = useState<PcEntity | null>(null);
+    const surface = useMaterial({ diffuse: '#474d57' });
+    const cyan = useMaterial({ diffuse: '#1ab3e6' });
+    const coral = useMaterial({ diffuse: '#ff5926' });
+
+    return (
+        <>
+            <Application graphicsDeviceOptions={{ alpha: true, xrCompatible: true }}>
+                <Entity name="camera" ref={setCamera} position={[3, 2.4, 4]} rotation={[-20, 37, 0]}>
+                    <Camera clearColor="#0d141f" />
+                </Entity>
+                <Entity name="light" rotation={[45, 30, 0]}>
+                    <Light type="directional" intensity={2} />
+                </Entity>
+                <Entity name="preview" ref={setPreview}>
+                    <Entity name="surface" scale={[4, 0.15, 4]}>
+                        <Render type="cylinder" material={surface} />
+                    </Entity>
+                    <Entity name="box" position={[0, 0.65, 0]}>
+                        <Render type="box" material={cyan} />
+                    </Entity>
+                    <Entity name="reticle" position={[0, 0.12, 0]} scale={[1.5, 0.03, 1.5]}>
+                        <Render type="cylinder" material={coral} />
+                    </Entity>
+                </Entity>
+                {camera && preview && (
+                    <Entity name="placement">
+                        <Script script={ArPlacement} camera={camera} preview={preview} />
+                    </Entity>
+                )}
+            </Application>
+            <div className="hud">
+                <section className="panel">
+                    <h1>AR Placement</h1>
+                    <p id="xr-status">Checking AR support…</p>
+                    <div className="controls">
+                        <button id="xr-button" disabled>
+                            Start AR
+                        </button>
+                    </div>
+                </section>
+            </div>
+        </>
+    );
+}
+
+export default App;

package/templates/react/base/.prettierignore

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

package/templates/react/base/README.md

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

package/templates/react/base/_npmrc

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

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

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

package/templates/react/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>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>

package/templates/react/base/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './App';
+
+createRoot(document.getElementById('root')!).render(
+    <StrictMode>
+        <App />
+    </StrictMode>
+);

package/templates/react/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/react/first-person-controller/src/App.tsx

@@ -0,0 +1,115 @@
+import { Application, Entity } from '@playcanvas/react';
+import { Camera, Collision, Light, Render, RigidBody } from '@playcanvas/react/components';
+import { useMaterial, usePhysics } from '@playcanvas/react/hooks';
+import type { Entity as PcEntity, StandardMaterial } from 'playcanvas';
+import { useEffect, useRef } from 'react';
+
+import { addFirstPersonController } from './controller';
+import './starter.css';
+
+function Block({
+    name,
+    position,
+    scale,
+    material
+}: {
+    name: string;
+    position: [number, number, number];
+    scale: [number, number, number];
+    material: StandardMaterial;
+}) {
+    return (
+        <Entity name={name} position={position} scale={scale}>
+            <Render type="box" material={material} />
+            <Collision type="box" halfExtents={[scale[0] / 2, scale[1] / 2, scale[2] / 2]} />
+            <RigidBody type="static" />
+        </Entity>
+    );
+}
+
+function Scene() {
+    const player = useRef<PcEntity>(null);
+    const camera = useRef<PcEntity>(null);
+    const { isPhysicsLoaded } = usePhysics();
+    const floor = useMaterial({ diffuse: '#474d52', emissive: '#0e0f10', gloss: 0.2 });
+    const wall = useMaterial({ diffuse: '#6b737a', emissive: '#151718', gloss: 0.25 });
+    const blue = useMaterial({ diffuse: '#154a7a', emissive: '#040f18', gloss: 0.4 });
+    const green = useMaterial({ diffuse: '#2e6638', emissive: '#09140b', gloss: 0.2 });
+    const wood = useMaterial({ diffuse: '#7a451a', emissive: '#180e05', gloss: 0.2 });
+    const metal = useMaterial({ diffuse: '#475461', emissive: '#0e1113', gloss: 0.5 });
+
+    useEffect(() => {
+        if (isPhysicsLoaded && player.current && camera.current) {
+            return addFirstPersonController(player.current, camera.current);
+        }
+    }, [isPhysicsLoaded]);
+
+    return (
+        <>
+            <Entity name="light" rotation={[50, 30, 0]}>
+                <Light type="directional" intensity={2.5} castShadows shadowBias={0.2} normalOffsetBias={0.05} />
+            </Entity>
+            <Entity name="fill" rotation={[-25, -140, 0]}>
+                <Light type="directional" intensity={0.8} />
+            </Entity>
+            <Block name="floor" position={[0, -0.1, 0]} scale={[18, 0.2, 18]} material={floor} />
+            <Block name="back-wall" position={[0, 1.5, -9]} scale={[18, 3, 0.3]} material={wall} />
+            <Block name="front-wall" position={[0, 1.5, 9]} scale={[18, 3, 0.3]} material={wall} />
+            <Block name="left-wall" position={[-9, 1.5, 0]} scale={[0.3, 3, 18]} material={wall} />
+            <Block name="right-wall" position={[9, 1.5, 0]} scale={[0.3, 3, 18]} material={wall} />
+            <Block name="blue-crate" position={[-2, 0.75, -3]} scale={[1.5, 1.5, 1.5]} material={blue} />
+            <Block name="green-crate" position={[3, 0.5, 1]} scale={[2.5, 1, 1]} material={green} />
+            <Block name="cargo-left-0" position={[-5.5, 0.75, -5.5]} scale={[2, 1.5, 2]} material={wood} />
+            <Block name="cargo-left-1" position={[-5.5, 2, -5.5]} scale={[1.5, 1, 1.5]} material={blue} />
+            <Block name="cargo-right-0" position={[5.3, 0.6, -4.8]} scale={[2.4, 1.2, 2]} material={green} />
+            <Block name="cargo-right-1" position={[5.3, 1.7, -4.8]} scale={[1.5, 1, 1.5]} material={wood} />
+            <Block name="cargo-center" position={[0, 0.6, -6.5]} scale={[2.2, 1.2, 1.8]} material={blue} />
+            {[-3.5, 0, 3.5].flatMap((z, i) => [
+                <Block
+                    key={`left-${i}`}
+                    name={`shelf-left-post-${i}`}
+                    position={[-6.8, 1.4, z]}
+                    scale={[0.25, 2.8, 0.25]}
+                    material={metal}
+                />,
+                <Block
+                    key={`right-${i}`}
+                    name={`shelf-right-post-${i}`}
+                    position={[6.8, 1.4, z]}
+                    scale={[0.25, 2.8, 0.25]}
+                    material={metal}
+                />
+            ])}
+            <Block name="shelf-left-low" position={[-6.8, 0.65, 0]} scale={[1.1, 0.18, 7.5]} material={metal} />
+            <Block name="shelf-left-high" position={[-6.8, 2.1, 0]} scale={[1.1, 0.18, 7.5]} material={metal} />
+            <Block name="shelf-right-low" position={[6.8, 0.65, 0]} scale={[1.1, 0.18, 7.5]} material={metal} />
+            <Block name="shelf-right-high" position={[6.8, 2.1, 0]} scale={[1.1, 0.18, 7.5]} material={metal} />
+            <Block name="pallet" position={[-2.5, 0.15, 2.5]} scale={[3, 0.3, 2]} material={wood} />
+            <Entity name="player" ref={player} position={[0, 1, 5]}>
+                <Collision type="capsule" radius={0.45} height={1.8} />
+                <RigidBody type="dynamic" mass={80} angularFactor={[0, 0, 0]} />
+                <Entity name="camera" ref={camera} position={[0, 0.65, 0]}>
+                    <Camera clearColor="#61a3db" fov={80} />
+                </Entity>
+            </Entity>
+        </>
+    );
+}
+
+function App() {
+    return (
+        <>
+            <Application usePhysics>
+                <Scene />
+            </Application>
+            <div className="hud">
+                <section className="panel">
+                    <h1>First-Person Controller</h1>
+                    <p>Click the scene, then use WASD, mouse look and Space to jump.</p>
+                </section>
+            </div>
+        </>
+    );
+}
+
+export default App;

package/templates/react/interactive-sphere/src/App.css

@@ -1,75 +1,25 @@
-#root {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    width: 100vw;
-}
-
-header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 2rem;
-}
-
-.absolute {
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
 .full-bleed {
     width: 100vw;
     height: 100vh;
     overflow: hidden;
 }
 
-.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.react:hover {
-    filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-.read-the-docs {
-    color: #888;
-}
-
-.overlay {
-    margin: 0 auto;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: stretch;
-    width: 100vw;
-    height: 100vh;
-    pointer-events: none;
-}
-
-.overlay a {
-    pointer-events: auto;
-}
-
-.overlay > .grow {
-    flex-grow: 1;
-}
-
-.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:
+        650 12px Inter,
+        ui-sans-serif,
+        system-ui,
+        sans-serif;
+    translate: -50% 0;
+    backdrop-filter: blur(10px);
 }

package/templates/react/interactive-sphere/src/App.tsx

@@ -1,8 +1,6 @@
 import { Application } from '@playcanvas/react';
 import { useState } from 'react';
 
-import playcanvasLogo from './assets/playcanvas.png';
-import reactLogo from './assets/react.svg';
 import './App.css';
 import Scene from './Scene';
 
@@ -16,26 +14,7 @@ function App() {
                     <Scene onClick={() => setCount((count) => count + 1)} />
                 </Application>
             </div>
-            <div className="absolute overlay">
-                <div className="grow">
-                    <header>
-                        <h1>PlayCanvas + React</h1>
-                        <a href="https://developer.playcanvas.com/user-manual/react/" target="_blank" rel="noreferrer">
-                            <img src={playcanvasLogo} className="playcanvas-logo logo" alt="PlayCanvas logo" />
-                        </a>
-                        <a href="https://react.dev" target="_blank" rel="noreferrer">
-                            <img src={reactLogo} className="logo react" alt="React logo" />
-                        </a>
-                    </header>
-                </div>
-                <div>
-                    <span className="pill">Click Count: {count}</span>
-                    <p>
-                        Edit <code>src/Scene.tsx</code> and save to test HMR
-                    </p>
-                </div>
-                <p className="read-the-docs">Click on the PlayCanvas and React logos to learn more</p>
-            </div>
+            <p className="counter">Click count: {count}</p>
         </>
     );
 }