create-playcanvas 0.2.6 → 0.4.0

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;
+}

package/index.js

@@ -1,3 +0,0 @@
-#!/usr/bin/env node
-
-import './dist/index.mjs'

package/templates/react-ts/README.md

@@ -1,82 +0,0 @@
-# @playcanvas/react + TypeScript Starter
-
-A modern, batteries-included starter for building PlayCanvas experiences with React and TypeScript, HMR and ESLint.
-
-## Prerequisites
-
-* **Node.js ≥ 20.19.0** (or ≥ 22.12.0). Use [nvm](https://github.com/nvm-sh/nvm) to install/switch:
-
-```bash
-nvm install 22 # or 20.19+
-nvm use 22
-```
-
----
-
-## Getting Started
-
-Scaffold and install dependencies:
-
-```bash
-npm create playcanvas@latest -t react-ts
-cd playcanvas-project
-npm install
-```
-
-Start the dev server with hot-module reload:
-
-```bash
-npm run dev
-```
-
-Open <http://localhost:5173> to view the app. Any file changes trigger instant reloads.
-
----
-
-## Scripts
-
-| Command            | Description                          |
-|--------------------|--------------------------------------|
-| `npm run dev`      | Start Vite dev server with HMR       |
-| `npm run build`    | Type-check & bundle for production   |
-| `npm run preview`  | Preview the production build locally |
-| `npm run lint`     | Run ESLint over the codebase         |
-
----
-
-## Project Structure
-
-```
-.
-├── public/               # Static assets copied as-is
-├── src/
-│   ├── Scene.tsx         # React wrapper around a PlayCanvas application
-│   ├── App.tsx           # Entry component
-│   └── main.tsx          # Vite/React bootstrap
-├── vite.config.ts        # Vite + React plugin config
-└── ...
-```
-
-## Linting & Formatting
-
-ESLint is pre-configured with TypeScript, React hooks, React Refresh, and global browser/node globals. Adjust `eslint.config.js` as your codebase grows.
-
----
-
-## Deployment
-
-Run `npm run build` to generate a static production bundle in `dist/`. Deploy the contents of that folder to any static hosting provider (Netlify, Vercel, GitHub Pages, Cloudflare Pages, etc.).
-
----
-
-## Further Reading
-
-* [PlayCanvas Engine Docs](https://developer.playcanvas.com)
-* [PlayCanvas React Docs](https://developer.playcanvas.com/user-manual/react/)
-* [React Docs](https://react.dev/)
-* [Vite Docs](https://vitejs.dev/)
-* [TypeScript Handbook](https://www.typescriptlang.org/docs/)
-
----
-
-Made with ❤️. PRs and issues welcome!

package/templates/react-ts/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <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-ts/package.json

@@ -1,29 +0,0 @@
-{
-  "name": "playcanvas-project",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "engines": {
-    "node": "^20.19.0 || >=22.12.0"
-  },
-  "scripts": {
-    "predev": "node ./scripts/ensure-node-version.cjs",
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@playcanvas/react": "^0.11.3",
-    "playcanvas": "^2.17.2",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5"
-  },
-  "devDependencies": {
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "semver": "^7.7.4",
-    "typescript": "~6.0.2",
-    "vite": "^8.0.8"
-  }
-}

package/templates/react-ts/scripts/ensure-node-version.cjs

@@ -1,12 +0,0 @@
-const semver = require('semver');
-const pkg = require('../package.json');
-
-const requiredVersion = pkg.engines.node;
-const currentVersion = process.version;
-
-if (!semver.satisfies(currentVersion, requiredVersion)) {
-  console.error(`\n❌ Unsupported Node.js version: ${currentVersion}`);
-  console.error(`Required: ${requiredVersion}`);
-  console.error('Please upgrade your Node.js to continue.\n');
-  process.exit(1);
-}

package/templates/react-ts/src/App.css

@@ -1,87 +0,0 @@
-#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: .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);
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
-
-.container{
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-}
-
-.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-ts/src/App.tsx

@@ -1,46 +0,0 @@
-import { Application } from "@playcanvas/react";
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import playcanvasLogo from './assets/playcanvas.png'
-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">
-              <img src={playcanvasLogo} className="playcanvas-logo logo" alt="PlayCanvas logo" />
-            </a>
-            <a href="https://react.dev" target="_blank">
-              <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-ts/src/Scene.tsx

@@ -1,70 +0,0 @@
-// @ts-expect-error - PlayCanvas ESM scripts don't have type declarations
-import { CameraControls } from "playcanvas/scripts/esm/camera-controls.mjs";
-// @ts-expect-error - PlayCanvas ESM scripts don't have type declarations
-import { Grid } from "playcanvas/scripts/esm/grid.mjs";
-import { useEffect, useState } from "react";
-import { Entity } from "@playcanvas/react";
-import { useEnvAtlas, useMaterial } from "@playcanvas/react/hooks";
-import { Camera, Environment, Render, Script } from "@playcanvas/react/components";
-
-/**
- * The Scene renders a sphere with a grid and camera controls
- */
-function Scene({ onClick }: SceneProps) {
-
-  // Track the hover state and set the color based on the hover state
-  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';
-  }, [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-ts/src/index.css

@@ -1,73 +0,0 @@
-: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;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

package/templates/react-ts/src/main.tsx

@@ -1,10 +0,0 @@
-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-ts/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/templates/react-ts/tsconfig.app.json

@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "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"]
-}

package/templates/react-ts/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
-}

package/templates/react-ts/tsconfig.node.json

@@ -1,25 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2023",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "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": ["vite.config.ts"]
-}

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

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

package/templates/vanilla-ts/README.md

@@ -1,114 +0,0 @@
-# PlayCanvas + Vite Starter
-
-A modern, batteries-included starter for building WebGL/PlayCanvas experiences with TypeScript.
-
-* **PlayCanvas** `^2.8.2` – high-performance WebGL engine
-* **Vite** `^7` – ultra-fast dev server & bundler with HMR
-* **TypeScript** `~5.8` – static typing out-of-the-box
-* **ESLint** `^9` – linting with recommended TypeScript rules
-
----
-
-## Prerequisites
-
-* **Node.js ≥ 20.19.0** (or ≥ 22.12.0). Use [nvm](https://github.com/nvm-sh/nvm) to install/switch:
-
-```bash
-nvm install 22 # or 20.19+
-nvm use 22
-```
-
----
-
-## Getting Started
-
-Clone the repo and install dependencies:
-
-```bash
-git clone <your-repo-url> playcanvas-project
-cd playcanvas-project
-npm install
-```
-
-Start the dev server with hot-module reload:
-
-```bash
-npm run dev
-```
-
-Open <http://localhost:5173> to view the app. Any file changes trigger instant reloads.
-
----
-
-## Scripts
-
-| Command            | Description                          |
-|--------------------|--------------------------------------|
-| `npm run dev`      | Start Vite dev server with HMR       |
-| `npm run build`    | Type-check & bundle for production   |
-| `npm run preview`  | Preview the production build locally |
-| `npm run lint`     | Run ESLint over the codebase         |
-
----
-
-## Project Structure
-
-```
-.
-├── public/               # Static assets copied as-is
-├── src/
-│   ├── components/
-│   │   └── PlayCanvasCanvas.tsx  # React wrapper around a PlayCanvas application
-│   ├── App.tsx           # Entry component
-│   └── main.tsx          # Vite/React bootstrap
-├── vite.config.ts        # Vite + React plugin config
-└── ...
-```
-
-### `PlayCanvasCanvas.tsx` (concept)
-
-```tsx
-import { useEffect, useRef } from 'react'
-import * as pc from 'playcanvas'
-
-export default function PlayCanvasCanvas() {
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-
-  useEffect(() => {
-    const canvas = canvasRef.current!
-    const app = new pc.Application(canvas, {})
-    app.start()
-    // demo scene setup here…
-
-    return () => app.destroy() // cleanup on unmount
-  }, [])
-
-  return <canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} />
-}
-```
-
-Use the component anywhere in your React tree to embed a PlayCanvas scene.
-
----
-
-## Linting & Formatting
-
-ESLint is pre-configured with TypeScript, React hooks, React Refresh, and global browser/node globals. Adjust `eslint.config.js` as your codebase grows.
-
----
-
-## Deployment
-
-Run `npm run build` to generate a static production bundle in `dist/`. Deploy the contents of that folder to any static hosting provider (Netlify, Vercel, GitHub Pages, Cloudflare Pages, etc.).
-
----
-
-## Further Reading
-
-* [PlayCanvas Engine Docs](https://developer.playcanvas.com/en/api/)
-* [Vite Docs](https://vitejs.dev/)
-* [TypeScript Handbook](https://www.typescriptlang.org/docs/)
-
----
-
-Made with ❤️ and ☕ by **Your Name**. PRs and issues welcome!