create-playcanvas 0.11.0 → 0.11.1

package/templates/web-components/base/README.md

@@ -33,7 +33,7 @@ Open <http://localhost:5173>. Edit `index.html` to change the scene.
 | `npm run fmt`       | Check formatting                  |
 | `npm run typecheck` | Run TypeScript checks             |
 
-Run `npm run build` to generate a deployable static site in `dist/`.
+Run `npm run build` to generate a deployable static site in `dist/`. Its paths are relative, so it runs from any folder, such as a GitHub Pages project site or an itch.io upload.
 
 ## How it fits together
 

package/templates/web-components/base/vite.config.ts

@@ -2,6 +2,9 @@ import { defineConfig } from 'vite';
 
 // https://vite.dev/config/
 export default defineConfig({
+    // Relative URLs, so the build runs wherever it's served from: a domain root, a subpath such as
+    // GitHub Pages or itch.io, or a Snapchat Web Lens
+    base: './',
     plugins: [
         {
             // Dev only: install the PlayCanvas Inspector before the app starts (press ` to toggle)

package/templates/web-components/first-person-controller/index.html

@@ -14,12 +14,7 @@
             <pc-material id="green-material" diffuse="#2e6638" emissive="#09140b" gloss="0.2"></pc-material>
             <pc-material id="wood-material" diffuse="#7a451a" emissive="#180e05" gloss="0.2"></pc-material>
             <pc-material id="metal-material" diffuse="#475461" emissive="#0e1113" gloss="0.5"></pc-material>
-            <pc-wasm
-                name="Ammo"
-                glue="/ammo/ammo.wasm.js"
-                wasm="/ammo/ammo.wasm.wasm"
-                fallback="/ammo/ammo.js"
-            ></pc-wasm>
+            <pc-wasm name="Ammo" glue="./ammo/ammo.wasm.js" wasm="./ammo/ammo.wasm.wasm"></pc-wasm>
             <pc-scene>
                 <pc-entity name="light" rotation="50 30 0"
                     ><pc-light

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

@@ -4,8 +4,8 @@ import { Asset, TEXTURETYPE_RGBP } from 'playcanvas';
 import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
 import { Grid } from 'playcanvas/scripts/esm/grid.mjs';
 
+import './counter.css';
 import './starter.css';
-import './style.css';
 
 const HOVER_COLOR = '#40ccff';
 const DEFAULT_COLOR = '#e6edf9';
@@ -25,7 +25,7 @@ const app = appElement.app!;
 const envAtlas = new Asset(
     'env-atlas',
     'texture',
-    { url: '/environment-map.png' },
+    { url: './environment-map.png' },
     {
         type: TEXTURETYPE_RGBP,
         mipmaps: false

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

@@ -8,8 +8,8 @@
     </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>
+            <!-- Swap this for your own model - files in public/ are served next to index.html, so use a ./ path -->
+            <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

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

@@ -4,7 +4,6 @@ import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
 import { ProceduralSky } from 'playcanvas/scripts/esm/sky/procedural-sky.mjs';
 
 import './starter.css';
-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

package/templates/web-components/physics-playground/index.html

@@ -8,12 +8,7 @@
     </head>
     <body>
         <pc-app>
-            <pc-wasm
-                name="Ammo"
-                glue="/ammo/ammo.wasm.js"
-                wasm="/ammo/ammo.wasm.wasm"
-                fallback="/ammo/ammo.js"
-            ></pc-wasm>
+            <pc-wasm name="Ammo" glue="./ammo/ammo.wasm.js" wasm="./ammo/ammo.wasm.wasm"></pc-wasm>
             <pc-material id="floor-material" diffuse="#2e333d" gloss="0.2"></pc-material>
             <pc-material id="cyan-material" diffuse="#29ade6" gloss="0.45"></pc-material>
             <pc-material id="coral-material" diffuse="#f25738" gloss="0.45"></pc-material>

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

@@ -3,7 +3,6 @@ import { whenReady } from '@playcanvas/web-components';
 import { Script } from 'playcanvas';
 
 import './starter.css';
-import './style.css';
 
 class Rotate extends Script {
     static scriptName = 'rotate';

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

@@ -2,7 +2,6 @@ import { whenReady } from '@playcanvas/web-components';
 import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
 
 import './starter.css';
-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

package/templates/web-components/third-person-controller/index.html

@@ -16,12 +16,7 @@
             <pc-material id="shirt-material" diffuse="#268bd2"></pc-material>
             <pc-material id="skin-material" diffuse="#c78759"></pc-material>
             <pc-material id="pants-material" diffuse="#2e4a85"></pc-material>
-            <pc-wasm
-                name="Ammo"
-                glue="/ammo/ammo.wasm.js"
-                wasm="/ammo/ammo.wasm.wasm"
-                fallback="/ammo/ammo.js"
-            ></pc-wasm>
+            <pc-wasm name="Ammo" glue="./ammo/ammo.wasm.js" wasm="./ammo/ammo.wasm.wasm"></pc-wasm>
             <pc-scene>
                 <pc-entity name="camera" position="0 3 6"><pc-camera clear-color="#7ab8e6"></pc-camera></pc-entity>
                 <pc-entity name="light" rotation="45 30 0"