create-playcanvas 0.3.0 → 0.4.0

package/templates/web-components/base/package.json

@@ -0,0 +1,31 @@
+{
+    "name": "playcanvas-project",
+    "version": "0.0.0",
+    "private": true,
+    "description": "A PlayCanvas Web Components project",
+    "type": "module",
+    "scripts": {
+        "build": "vite build",
+        "dev": "vite",
+        "fmt": "prettier --check .",
+        "fmt:fix": "prettier --write .",
+        "lint": "eslint .",
+        "lint:fix": "eslint . --fix",
+        "start": "vite preview",
+        "typecheck": "tsc --noEmit"
+    },
+    "dependencies": {
+        "@playcanvas/web-components": "^0.10.1",
+        "playcanvas": "^2.21.3"
+    },
+    "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"
+    },
+    "engines": {
+        "node": ">=22.23.2"
+    }
+}

package/templates/web-components/base/prettier.config.mjs

@@ -0,0 +1 @@
+export { default } from '@playcanvas/eslint-config/prettier';

package/templates/web-components/base/src/vite-env.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="vite/client" />
+
+declare module 'playcanvas/scripts/esm/camera-controls.mjs' {
+    import type { Script } from 'playcanvas';
+
+    export const CameraControls: typeof Script & (new () => Script);
+}
+
+declare module 'playcanvas/scripts/esm/grid.mjs' {
+    import type { Script } from 'playcanvas';
+
+    export const Grid: typeof Script & (new () => Script);
+}
+
+declare module 'playcanvas/scripts/esm/sky/procedural-sky.mjs' {
+    import type { Script } from 'playcanvas';
+
+    export const ProceduralSky: typeof Script & (new () => Script);
+}

package/templates/web-components/base/tsconfig.json

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "target": "ES2022",
+        "useDefineForClassFields": true,
+        "module": "ESNext",
+        "lib": ["ES2022", "DOM", "DOM.Iterable"],
+        "skipLibCheck": true,
+
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "verbatimModuleSyntax": true,
+        "moduleDetection": "force",
+        "noEmit": true,
+
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "erasableSyntaxOnly": true,
+        "noFallthroughCasesInSwitch": true,
+        "noUncheckedSideEffectImports": true
+    },
+    "include": ["src"]
+}

package/templates/web-components/interactive-sphere/index.html

@@ -0,0 +1,53 @@
+<!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 + Web Components</title>
+    </head>
+    <body>
+        <pc-app>
+            <!-- Materials are declared once and referenced by id -->
+            <pc-material id="sphere-material" diffuse="lightgrey"></pc-material>
+
+            <pc-scene>
+                <!-- Camera. Orbit controls are attached in src/main.ts -->
+                <pc-entity name="camera" position="4 1 4">
+                    <pc-camera clear-color="#171717"></pc-camera>
+                </pc-entity>
+
+                <!-- Lighting comes from the environment map, which is applied in src/main.ts -->
+
+                <!-- Background grid. The grid script is attached in src/main.ts -->
+                <pc-entity name="grid" scale="1000 1000 1000"></pc-entity>
+
+                <!-- The sphere. pc-app dispatches pointer events onto whatever the pointer hits -->
+                <pc-entity name="sphere" position="0 0.5 0">
+                    <pc-render type="sphere" material="sphere-material"></pc-render>
+                </pc-entity>
+            </pc-scene>
+        </pc-app>
+
+        <div class="absolute overlay">
+            <div class="grow">
+                <header>
+                    <h1>PlayCanvas + Web Components</h1>
+                    <a href="https://developer.playcanvas.com/user-manual/web-components/" target="_blank">
+                        <img src="/src/assets/playcanvas.png" class="playcanvas-logo logo" alt="PlayCanvas logo" />
+                    </a>
+                    <a href="https://www.typescriptlang.org/" target="_blank">
+                        <img src="/src/assets/typescript.svg" class="logo typescript" alt="TypeScript logo" />
+                    </a>
+                </header>
+            </div>
+            <div>
+                <span id="counter" class="pill">Click Count: 0</span>
+                <p>Edit <code>index.html</code> and save to reload the scene</p>
+            </div>
+            <p class="read-the-docs">Click on the PlayCanvas and TypeScript logos to learn more</p>
+        </div>
+
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/web-components/interactive-sphere/src/assets/typescript.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#007ACC" d="M0 128v128h256V0H0z"></path><path fill="#FFF" d="m56.612 128.85l-.081 10.483h33.32v94.68h23.568v-94.68h33.321v-10.28c0-5.69-.122-10.444-.284-10.566c-.122-.162-20.4-.244-44.983-.203l-44.74.122l-.121 10.443Zm149.955-10.742c6.501 1.625 11.459 4.51 16.01 9.224c2.357 2.52 5.851 7.111 6.136 8.208c.08.325-11.053 7.802-17.798 11.988c-.244.162-1.22-.894-2.317-2.52c-3.291-4.795-6.745-6.867-12.028-7.233c-7.76-.528-12.759 3.535-12.718 10.321c0 1.992.284 3.17 1.097 4.795c1.707 3.536 4.876 5.649 14.832 9.956c18.326 7.883 26.168 13.084 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.14 17.879-28.323 20.276c-4.388.772-14.79.65-19.504-.203c-10.28-1.828-20.033-6.908-26.047-13.572c-2.357-2.6-6.949-9.387-6.664-9.874c.122-.163 1.178-.813 2.356-1.504c1.138-.65 5.446-3.129 9.509-5.485l7.355-4.267l1.544 2.276c2.154 3.29 6.867 7.801 9.712 9.305c8.167 4.307 19.383 3.698 24.909-1.26c2.357-2.153 3.332-4.388 3.332-7.68c0-2.966-.366-4.266-1.91-6.501c-1.99-2.845-6.054-5.242-17.595-10.24c-13.206-5.69-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.617-1.22-12.678-.447-16.335c2.723-12.76 12.353-21.659 26.25-24.3c4.51-.853 14.994-.528 19.424.569Z"></path></svg>

package/templates/web-components/interactive-sphere/src/main.ts

@@ -0,0 +1,76 @@
+import type { EntityElement } from '@playcanvas/web-components';
+import { whenReady } from '@playcanvas/web-components';
+import type { Texture } from 'playcanvas';
+import { Asset, TEXTURETYPE_RGBP } from 'playcanvas';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
+import { Grid } from 'playcanvas/scripts/esm/grid.mjs';
+
+import './style.css';
+
+const HOVER_COLOR = 'orange';
+const DEFAULT_COLOR = 'lightgrey';
+
+// The camera is awaited as <pc-camera> rather than the <pc-entity> holding it - an entity becomes
+// ready before its component children do, and CameraControls needs the camera component to exist
+const [appElement, cameraComponent, grid, sphere] = await Promise.all([
+    whenReady('pc-app'),
+    whenReady('pc-camera'),
+    whenReady<EntityElement>('pc-entity[name="grid"]'),
+    whenReady<EntityElement>('pc-entity[name="sphere"]')
+]);
+
+// This is a pre-generated environment atlas rather than an equirectangular image, so it is applied
+// straight to the scene instead of through <pc-sky>
+const app = appElement.app!;
+const envAtlas = new Asset(
+    'env-atlas',
+    'texture',
+    { url: '/environment-map.png' },
+    {
+        type: TEXTURETYPE_RGBP,
+        mipmaps: false
+    }
+);
+
+app.assets.add(envAtlas);
+await new Promise<void>((resolve) => {
+    envAtlas.ready(() => resolve());
+    app.assets.load(envAtlas);
+});
+
+// Light the scene from the environment, with the skybox itself left hidden
+app.scene.envAtlas = envAtlas.resource as Texture;
+const skyboxLayer = app.scene.layers.getLayerByName('Skybox');
+if (skyboxLayer) {
+    skyboxLayer.enabled = false;
+}
+
+// Engine scripts are resolved by the bundler, so they are attached through the entity rather than
+// with <pc-script name="...">, which only resolves scripts fetched at runtime by <pc-asset>
+const camera = cameraComponent.closestEntity;
+camera?.entity?.addComponent('script');
+camera?.entity?.script?.create(CameraControls);
+grid.entity?.addComponent('script');
+grid.entity?.script?.create(Grid);
+
+const material = document.querySelector('pc-material')!;
+const counterElement = document.getElementById('counter')!;
+
+let count = 0;
+
+// pc-app picks whatever is under the pointer and dispatches a regular DOM PointerEvent on it, so
+// the sphere is wired up like any other element
+sphere.addEventListener('pointerenter', () => {
+    material.setAttribute('diffuse', HOVER_COLOR);
+    document.body.style.cursor = 'pointer';
+});
+
+sphere.addEventListener('pointerleave', () => {
+    material.setAttribute('diffuse', DEFAULT_COLOR);
+    document.body.style.cursor = 'default';
+});
+
+sphere.addEventListener('pointerup', () => {
+    count++;
+    counterElement.textContent = `Click Count: ${count}`;
+});

package/templates/web-components/interactive-sphere/src/style.css

@@ -0,0 +1,111 @@
+: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;
+}
+
+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);
+}
+
+pc-app {
+    display: block;
+}
+
+.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;
+    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;
+}

package/templates/web-components/model-viewer/index.html

@@ -0,0 +1,34 @@
+<!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 + Web Components</title>
+    </head>
+    <body>
+        <pc-app>
+            <!-- Swap this for your own model - anything you drop in public/ is served from the site root -->
+            <pc-asset id="model" src="/playcanvas-cube.glb"></pc-asset>
+
+            <pc-scene>
+                <!-- Camera. Orbit controls are attached in src/main.ts. The sky is HDR, so it needs
+                     tone mapping to bring it back into displayable range - without it the whole
+                     image blows out to white -->
+                <pc-entity name="camera" position="0 0 3">
+                    <pc-camera tonemap="aces2"></pc-camera>
+                </pc-entity>
+
+                <!-- The procedural sky is both the background and the image-based lighting, so no
+                     light or environment map asset is needed. The script is attached in src/main.ts -->
+                <pc-entity name="sky"></pc-entity>
+
+                <pc-entity name="model">
+                    <pc-model asset="model"></pc-model>
+                </pc-entity>
+            </pc-scene>
+        </pc-app>
+
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/web-components/model-viewer/src/main.ts

@@ -0,0 +1,26 @@
+import type { EntityElement } from '@playcanvas/web-components';
+import { whenReady } from '@playcanvas/web-components';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
+import { ProceduralSky } from 'playcanvas/scripts/esm/sky/procedural-sky.mjs';
+
+import './style.css';
+
+// The camera is awaited as <pc-camera> rather than the <pc-entity> holding it - an entity becomes
+// ready before its component children do, and CameraControls needs the camera component to exist
+const [cameraComponent, sky] = await Promise.all([
+    whenReady('pc-camera'),
+    whenReady<EntityElement>('pc-entity[name="sky"]')
+]);
+
+// Engine scripts are resolved by the bundler, so they are attached through the entity rather than
+// with <pc-script name="...">, which only resolves scripts fetched at runtime by <pc-asset>
+const camera = cameraComponent.closestEntity;
+camera?.entity?.addComponent('script');
+camera?.entity?.script?.create(CameraControls);
+
+sky.entity?.addComponent('script');
+
+// The sky's default luminance is scene-scale bright, so turn it down to keep the model out of clipping
+sky.entity?.script?.create(ProceduralSky, {
+    properties: { luminance: 0.2 }
+});

package/templates/web-components/model-viewer/src/style.css

@@ -0,0 +1,8 @@
+body {
+    margin: 0;
+    overflow: hidden;
+}
+
+pc-app {
+    display: block;
+}

package/templates/web-components/spinning-cube/index.html

@@ -0,0 +1,29 @@
+<!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 + Web Components</title>
+    </head>
+    <body>
+        <pc-app>
+            <pc-scene>
+                <pc-entity name="camera" position="0 0 3">
+                    <pc-camera clear-color="#8099e6"></pc-camera>
+                </pc-entity>
+
+                <pc-entity name="light" rotation="45 0 0">
+                    <pc-light></pc-light>
+                </pc-entity>
+
+                <!-- The rotate script is attached in src/main.ts -->
+                <pc-entity name="cube">
+                    <pc-render type="box"></pc-render>
+                </pc-entity>
+            </pc-scene>
+        </pc-app>
+
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/web-components/spinning-cube/src/main.ts

@@ -0,0 +1,20 @@
+import type { EntityElement } from '@playcanvas/web-components';
+import { whenReady } from '@playcanvas/web-components';
+import { Script } from 'playcanvas';
+
+import './style.css';
+
+class Rotate extends Script {
+    static scriptName = 'rotate';
+
+    update(dt: number) {
+        this.entity.rotate(10 * dt, 20 * dt, 30 * dt);
+    }
+}
+
+// Engine scripts are resolved by the bundler, so they are attached through the entity rather than
+// with <pc-script name="...">, which only resolves scripts fetched at runtime by <pc-asset>
+const cube = await whenReady<EntityElement>('pc-entity[name="cube"]');
+
+cube.entity?.addComponent('script');
+cube.entity?.script?.create(Rotate);

package/templates/web-components/spinning-cube/src/style.css

@@ -0,0 +1,8 @@
+body {
+    margin: 0;
+    overflow: hidden;
+}
+
+pc-app {
+    display: block;
+}

package/templates/web-components/splat-viewer/index.html

@@ -0,0 +1,31 @@
+<!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 + Web Components</title>
+    </head>
+    <body>
+        <!-- Antialiasing is disabled - splat rendering is fragment bound, so MSAA costs a lot and adds little -->
+        <pc-app antialias="false" high-resolution="false">
+            <!-- Hosted so the template stays small. Capture or edit your own splat at
+                 https://superspl.at, then drop the .sog or .ply in public/ and point this at it instead -->
+            <pc-asset id="splat" src="https://developer.playcanvas.com/assets/toy-cat.sog"></pc-asset>
+
+            <pc-scene>
+                <!-- Camera. Orbit controls are attached in src/main.ts -->
+                <pc-entity name="camera" position="0 0 2.5">
+                    <pc-camera></pc-camera>
+                </pc-entity>
+
+                <!-- Splats are captured in their own space, so this one needs offsetting and flipping upright -->
+                <pc-entity name="toy cat" position="0 -0.7 0" rotation="0 0 180">
+                    <pc-gsplat asset="splat"></pc-gsplat>
+                </pc-entity>
+            </pc-scene>
+        </pc-app>
+
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/web-components/splat-viewer/src/main.ts

@@ -0,0 +1,14 @@
+import { whenReady } from '@playcanvas/web-components';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
+
+import './style.css';
+
+// The camera is awaited as <pc-camera> rather than the <pc-entity> holding it - an entity becomes
+// ready before its component children do, and CameraControls needs the camera component to exist
+const cameraComponent = await whenReady('pc-camera');
+
+// Engine scripts are resolved by the bundler, so they are attached through the entity rather than
+// with <pc-script name="...">, which only resolves scripts fetched at runtime by <pc-asset>
+const camera = cameraComponent.closestEntity;
+camera?.entity?.addComponent('script');
+camera?.entity?.script?.create(CameraControls);

package/templates/web-components/splat-viewer/src/style.css

@@ -0,0 +1,8 @@
+body {
+    margin: 0;
+    overflow: hidden;
+}
+
+pc-app {
+    display: block;
+}