create-playcanvas 0.2.6 → 0.4.0

package/templates/engine/splat-viewer/src/style.css

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

package/templates/index.ts

@@ -1,60 +1,50 @@
-import colors, { yellow } from 'picocolors'
-const { blue, cyan } = colors
+import colors from 'picocolors';
 
-/**
- * You can add new frameworks here.
- * 
- * The framework name is used to create the directory name.
- * The framework display name is used to display the framework name in the CLI.
- * The framework description is used to display the framework description in the CLI.
- * The framework color is used to display the framework color in the CLI.
- * The framework variants are used to display the framework variants in the CLI.
- * 
- */
-export const FRAMEWORKS: Framework[] = [
-  {
-    name: 'vanilla',
-    display: 'Vanilla',
-    description: 'with playcanvas engine',
-    color: yellow,
-    variants: [
-      {
-        name: 'vanilla-ts',
-        display: 'TypeScript',
-        color: blue,
-      },
-    ],
-  },
-  {
-    name: 'react',
-    display: 'React',
-    description: 'with @playcanvas/react',
-    color: cyan,
-    variants: [
-      {
-        name: 'react-ts',
-        display: 'TypeScript',
-        color: blue,
-      },
-    ],
-  }
-]
+const { cyan, magenta, yellow } = colors;
 
-export const TEMPLATES = FRAMEWORKS.flatMap((f) => f.variants.map((v) => v.name)) 
+export const TEMPLATES = [
+    {
+        name: 'engine',
+        display: 'Engine',
+        description: 'with the PlayCanvas Engine API directly',
+        color: yellow
+    },
+    {
+        name: 'react',
+        display: 'React',
+        description: 'with @playcanvas/react',
+        color: cyan
+    },
+    {
+        name: 'web-components',
+        display: 'Web Components',
+        description: 'with @playcanvas/web-components',
+        color: magenta
+    }
+];
 
-export type ColorFunc = (str: string | number) => string
-
-export type FrameworkVariant = {
-  name: string
-  display: string
-  color: ColorFunc
-  customCommand?: string
-}
-
-export type Framework = {
-  name: string
-  display: string
-  color: ColorFunc
-  description?: string
-  variants: FrameworkVariant[]
-}
+// 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 = [
+    {
+        name: 'spinning-cube',
+        display: 'Spinning Cube',
+        description: 'a rotating cube and a light'
+    },
+    {
+        name: 'interactive-sphere',
+        display: 'Interactive Sphere',
+        description: 'orbit controls, a grid and pointer picking'
+    },
+    {
+        name: 'model-viewer',
+        display: 'Model Viewer',
+        description: 'a glTF model, orbit controls and a procedural sky'
+    },
+    {
+        name: 'splat-viewer',
+        display: 'Splat Viewer',
+        description: 'a Gaussian splat and orbit controls'
+    }
+];

package/templates/react/base/README.md

@@ -0,0 +1,38 @@
+# PlayCanvas React + TypeScript Starter
+
+A Vite-powered `@playcanvas/react` project with TypeScript, hot module replacement, ESLint and Prettier.
+
+## Prerequisites
+
+Node.js 22.23.2 or later.
+
+## Getting started
+
+```bash
+npm create playcanvas@latest playcanvas-project -- --template react
+cd playcanvas-project
+npm install
+npm run dev
+```
+
+Open <http://localhost:5173>. Edit the files under `src/` and save to see the scene update.
+
+## Scripts
+
+| Command             | Description                       |
+| ------------------- | --------------------------------- |
+| `npm run dev`       | Start the Vite development server |
+| `npm run build`     | Build for production              |
+| `npm run start`     | Preview the production build      |
+| `npm run lint`      | Run ESLint                        |
+| `npm run fmt`       | Check formatting                  |
+| `npm run typecheck` | Run TypeScript checks             |
+
+Run `npm run build` to generate a deployable static site in `dist/`.
+
+## Further reading
+
+- [PlayCanvas React manual](https://developer.playcanvas.com/user-manual/react/)
+- [React documentation](https://react.dev/)
+- [Vite documentation](https://vite.dev/)
+- [TypeScript documentation](https://www.typescriptlang.org/docs/)

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

@@ -0,0 +1,14 @@
+import reactConfig from '@playcanvas/eslint-config/react';
+import typescriptConfig from '@playcanvas/eslint-config/typescript';
+
+export default [
+    ...typescriptConfig,
+    ...reactConfig,
+    {
+        rules: {
+            'react/jsx-uses-react': 'off',
+            'react/prop-types': 'off',
+            'react/react-in-jsx-scope': 'off'
+        }
+    }
+];

package/templates/react/base/package.json

@@ -0,0 +1,36 @@
+{
+    "name": "playcanvas-project",
+    "version": "0.0.0",
+    "private": true,
+    "description": "A PlayCanvas React 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/react": "^0.11.5",
+        "playcanvas": "^2.21.3",
+        "react": "^19.2.8",
+        "react-dom": "^19.2.8"
+    },
+    "devDependencies": {
+        "@playcanvas/eslint-config": "3.0.0-beta.8",
+        "@types/react": "^19.2.18",
+        "@types/react-dom": "^19.2.4",
+        "@vitejs/plugin-react": "^6.0.5",
+        "eslint": "^9.39.5",
+        "prettier": "^3.9.6",
+        "typescript": "~6.0.3",
+        "vite": "^8.2.0"
+    },
+    "engines": {
+        "node": ">=22.23.2"
+    }
+}

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

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

package/templates/react/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/react/base/tsconfig.json

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

package/templates/react/base/vite.config.ts

@@ -0,0 +1,7 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// https://vite.dev/config/
+export default defineConfig({
+    plugins: [react()]
+});

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

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

@@ -0,0 +1,75 @@
+#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;
+}

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

@@ -0,0 +1,43 @@
+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';
+
+function App() {
+    const [count, setCount] = useState(0);
+
+    return (
+        <>
+            <div className="full-bleed">
+                <Application className="playcanvas-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>
+        </>
+    );
+}
+
+export default App;

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

@@ -0,0 +1,69 @@
+import { Entity } from '@playcanvas/react';
+import { Camera, Environment, Render, Script } from '@playcanvas/react/components';
+import { useEnvAtlas, useMaterial } from '@playcanvas/react/hooks';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
+import { Grid } from 'playcanvas/scripts/esm/grid.mjs';
+import { useEffect, useState } from 'react';
+
+/**
+ * The Scene renders a sphere with a grid and camera controls
+ */
+function Scene({ onClick }: SceneProps) {
+    const [hovering, setHovering] = useState(false);
+
+    // Set a material color based on the hover state
+    const diffuse = hovering ? 'orange' : 'lightgrey';
+
+    // Create a material for the sphere
+    const material = useMaterial({ diffuse });
+
+    // Load the environment map
+    const { asset: envMap } = useEnvAtlas('/environment-map.png');
+
+    // Change the mouse cursor based on the hover state
+    useEffect(() => {
+        document.body.style.cursor = hovering ? 'pointer' : 'default';
+
+        return () => {
+            document.body.style.cursor = '';
+        };
+    }, [hovering]);
+
+    // Don't render until the environment map is loaded
+    if (!envMap) return null;
+
+    return (
+        <>
+            {/* Render some environment lighting using the environment map */}
+            <Environment envAtlas={envMap} showSkybox={false} />
+
+            {/* Render a background grid */}
+            <Entity scale={[1000, 1000, 1000]}>
+                <Script script={Grid} />
+            </Entity>
+
+            {/* Create a camera entity with camera controls */}
+            <Entity name="camera" position={[4, 1, 4]}>
+                <Camera clearColor="#171717" />
+                <Script script={CameraControls} />
+            </Entity>
+
+            {/* Create and position entity with pointer events */}
+            <Entity
+                position={[0, 0.5, 0]}
+                onClick={onClick}
+                onPointerOver={() => setHovering(true)}
+                onPointerOut={() => setHovering(false)}
+            >
+                {/* Render a sphere with the material */}
+                <Render type="sphere" material={material} />
+            </Entity>
+        </>
+    );
+}
+
+type SceneProps = {
+    onClick: () => void;
+};
+
+export default Scene;

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

@@ -0,0 +1,51 @@
+: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;
+}
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+}
+a:hover {
+    color: #535bf2;
+}
+
+a > img {
+    vertical-align: middle;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+h1 {
+    font-size: 2.4em;
+    line-height: 1.1;
+    opacity: 0.85;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+    a:hover {
+        color: #747bff;
+    }
+}

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

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

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

package/templates/react/model-viewer/src/App.tsx

@@ -0,0 +1,43 @@
+import { Application, Container, Entity } from '@playcanvas/react';
+import { Camera, Script } from '@playcanvas/react/components';
+import { useModel } from '@playcanvas/react/hooks';
+import { TONEMAP_ACES2 } from 'playcanvas';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
+import { ProceduralSky } from 'playcanvas/scripts/esm/sky/procedural-sky.mjs';
+
+// Swap this for your own model - anything you drop in public/ is served from the site root
+const MODEL_URL = '/playcanvas-cube.glb';
+
+function Model() {
+    const { asset } = useModel(MODEL_URL);
+
+    // Don't render until the model is loaded
+    if (!asset) return null;
+
+    return <Container asset={asset} />;
+}
+
+function App() {
+    return (
+        <Application>
+            {/* The procedural sky is both the background and the image-based lighting, so no
+                light or environment map asset is needed. Its default luminance is scene-scale
+                bright, so turn it down to keep the model out of clipping */}
+            <Entity name="sky">
+                <Script script={ProceduralSky} luminance={0.2} />
+            </Entity>
+
+            {/* Create a camera entity with orbit controls. 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 */}
+            <Entity name="camera" position={[0, 0, 3]}>
+                <Camera toneMapping={TONEMAP_ACES2} />
+                <Script script={CameraControls} />
+            </Entity>
+
+            <Model />
+        </Application>
+    );
+}
+
+export default App;

package/templates/react/model-viewer/src/index.css

@@ -0,0 +1,9 @@
+body {
+    margin: 0;
+    overflow: hidden;
+}
+
+#root {
+    width: 100vw;
+    height: 100vh;
+}

package/templates/react/model-viewer/src/main.tsx

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

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

package/templates/react/spinning-cube/src/App.tsx

@@ -0,0 +1,36 @@
+import { Application, Entity } from '@playcanvas/react';
+import { Camera, Light, Render } from '@playcanvas/react/components';
+import { useAppEvent } from '@playcanvas/react/hooks';
+import type { Entity as PcEntity } from 'playcanvas';
+import { useRef } from 'react';
+
+function Scene() {
+    const cube = useRef<PcEntity>(null);
+
+    // Rotate the cube according to the delta time since the last frame
+    useAppEvent('update', (dt: number) => cube.current?.rotate(10 * dt, 20 * dt, 30 * dt));
+
+    return (
+        <>
+            <Entity name="camera" position={[0, 0, 3]}>
+                <Camera clearColor="#8099e6" />
+            </Entity>
+            <Entity name="light" rotation={[45, 0, 0]}>
+                <Light type="directional" />
+            </Entity>
+            <Entity name="cube" ref={cube}>
+                <Render type="box" />
+            </Entity>
+        </>
+    );
+}
+
+function App() {
+    return (
+        <Application>
+            <Scene />
+        </Application>
+    );
+}
+
+export default App;

package/templates/react/spinning-cube/src/index.css

@@ -0,0 +1,9 @@
+body {
+    margin: 0;
+    overflow: hidden;
+}
+
+#root {
+    width: 100vw;
+    height: 100vh;
+}