create-playcanvas 0.2.6 → 0.4.0

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

package/templates/vanilla-ts/package.json

@@ -1,23 +0,0 @@
-{
-  "name": "playcanvas-project",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "predev": "node ./scripts/ensure-node-version.cjs",
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "playcanvas": "^2.17.2"
-  },
-  "devDependencies": {
-    "semver": "^7.7.4",
-    "typescript": "~6.0.2",
-    "vite": "^8.0.8"
-  },
-  "engines": {
-    "node": "^20.19.0 || >=22.12.0"
-  }
-}

package/templates/vanilla-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/vanilla-ts/src/App.ts

@@ -1,182 +0,0 @@
-import {
-  createGraphicsDevice,
-  AppBase,
-  AppOptions,
-  RenderComponentSystem,
-  CameraComponentSystem,
-  ScriptComponentSystem,
-  TextureHandler,
-  ContainerHandler,
-  FILLMODE_FILL_WINDOW,
-  RESOLUTION_AUTO,
-  Entity,
-  Color,
-  Vec3,
-  Picker,
-  EVENT_MOUSEMOVE,
-  EVENT_MOUSEUP,
-  TouchDevice,
-  Mouse,
-  MeshInstance,
-  StandardMaterial,
-  Layer,
-  Asset,
-  AssetListLoader,
-  TEXTURETYPE_RGBP
-} from 'playcanvas';
-
-// @ts-expect-error - PlayCanvas ESM scripts don't have type declarations
-import { Grid } from 'playcanvas/scripts/esm/grid.mjs';
-
-// @ts-expect-error - PlayCanvas ESM scripts don't have type declarations
-import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.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);
-
-// Assets to load
-const assets = {
-  envAtlas: new Asset('env-atlas', 'texture', { url: '/environment-map.png' }, {
-    type: TEXTURETYPE_RGBP,
-    mipmaps: false
-  })
-};
-
-/**
- * Setup the PlayCanvas app
- * @param canvas - The canvas element
- * @param onClick - The function to call when the user clicks on the sphere
- */
-async function setupApp(canvas: HTMLCanvasElement, onClick: () => void) {
-
-  if (!canvas) {
-    throw new Error('Canvas not found');
-  }
-
-  // Create graphics device
-  const device = await createGraphicsDevice(canvas);
-
-  // Create app options
-  const createOptions = new AppOptions();
-  createOptions.graphicsDevice = device;
-  createOptions.mouse = new Mouse(document.body);
-  createOptions.touch = new TouchDevice(document.body);
-  createOptions.componentSystems = [
-    RenderComponentSystem,
-    CameraComponentSystem,
-    ScriptComponentSystem
-  ];
-  createOptions.resourceHandlers = [TextureHandler, ContainerHandler];
-
-  // Create app
-  const app = new AppBase(canvas);
-  app.init(createOptions);
-
-  // Set the canvas to fill the window
-  app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
-  app.setCanvasResolution(RESOLUTION_AUTO);
-
-  // Ensure canvas is resized when window changes size
-  const resize = () => app.resizeCanvas();
-  window.addEventListener('resize', resize);
-
-  app.once('destroy', () => {
-    window.removeEventListener('resize', resize);
-  });
-
-  // Load assets
-  await new Promise<void>((resolve) => {
-    new AssetListLoader(Object.values(assets), app.assets).load(() => resolve());
-  });
-
-  app.start();
-
-  // Set up environment lighting (no skybox, just IBL)
-  app.scene.envAtlas = assets.envAtlas.resource;
-  const skyboxLayer = app.scene.layers.getLayerByName('Skybox');
-  if (skyboxLayer) {
-    skyboxLayer.enabled = false;
-  }
-
-  // Create sphere entity
-  const sphere = new Entity('sphere');
-  sphere.setPosition(new Vec3(0, 0.5, 0));
-
-  // Create a new material
-  const material = new StandardMaterial();
-  material.diffuse.copy(DEFAULT_COLOR);
-  material.update();
-
-  sphere.addComponent('render', {
-    type: 'sphere',
-    material: material
-  });
-  app.root.addChild(sphere);
-
-  // Create camera entity
-  const camera = new Entity('camera');
-  camera.addComponent('camera', {
-    clearColor: new Color(0.09, 0.09, 0.09)
-  });
-  camera.setPosition(new Vec3(4, 1, 4));
-  app.root.addChild(camera);
-
-  // Create camera controls
-  camera.addComponent('script');
-  camera.script?.create(CameraControls);
-
-  // Create grid entity
-  const grid = new Entity('grid');
-  grid.addComponent('script');
-  grid.script?.create(Grid);
-  grid.setLocalScale(1000, 1000, 1000);
-  app.root.addChild(grid);
-
-  // Create a picker for mouse interaction
-  const picker = new Picker(app, 1, 1);
-  const worldLayer = app.scene.layers.getLayerByName('World');
-
-  const intersectsSphere = (x: number, y: number, layer: Layer): Promise<boolean> => {
-    if (!camera.camera) {
-      return Promise.resolve(false);
-    }
-
-    const pickerScale = 0.5;
-    picker.resize(canvas.clientWidth * pickerScale, canvas.clientHeight * pickerScale);
-
-    if (!layer) {
-      return Promise.resolve(false);
-    }
-
-    picker.prepare(camera.camera, app.scene, [layer]);
-
-    return picker.getSelectionAsync(x * pickerScale, y * pickerScale, 1, 1).then((meshInstances: MeshInstance[]): boolean => {
-      if (meshInstances.length === 0) return false;
-      return meshInstances[0] === sphere.render?.meshInstances[0];
-    });
-  };
-
-  // On mouse move, check if hovering over sphere and update cursor/color
-  app.mouse?.on(EVENT_MOUSEMOVE, throttle((event) => {
-    if (!worldLayer) return;
-    intersectsSphere(event.x, event.y, worldLayer).then((intersects) => {
-      material.diffuse.copy(intersects ? HOVER_COLOR : DEFAULT_COLOR);
-      document.body.style.cursor = intersects ? 'pointer' : 'default';
-      material.update();
-    });
-  }, 100));
-
-  // On mouse up, check if clicked on sphere and call onClick
-  app.mouse?.on(EVENT_MOUSEUP, (event) => {
-    if (!worldLayer || !onClick) return;
-    intersectsSphere(event.x, event.y, worldLayer).then((intersects) => {
-      if (intersects) {
-        onClick();
-      }
-    });
-  });
-}
-
-export { setupApp };

package/templates/vanilla-ts/src/style.css

@@ -1,140 +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;
-}
-
-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;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.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.vanilla:hover {
-  filter: drop-shadow(0 0 2em #3178c6aa);
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
-
-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;
-  }
-}
-
-.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/vanilla-ts/src/utils.ts

@@ -1,16 +0,0 @@
-/**
- * Simple throttle helper
- * @param fn - The function to throttle
- * @param interval - The interval in milliseconds
- * @returns A throttled function
- */
-export function throttle(fn: (...args: any[]) => void, interval = 100) {          // interval in ms
-    let last = 0;
-    return (...args: any[]) => {
-      const now = Date.now();
-      if (now - last >= interval) {
-        last = now;
-        fn(...args);
-      }
-    };
-  }

package/templates/vanilla-ts/src/vite-env.d.ts

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

package/templates/vanilla-ts/tsconfig.json

@@ -1,25 +0,0 @@
-{
-  "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"]
-}