create-playcanvas 0.15.0 → 0.16.1

package/templates/engine/physics-playground/src/main.ts

@@ -1,131 +0,0 @@
-import {
-    AppBase,
-    AppOptions,
-    CameraComponentSystem,
-    CollisionComponentSystem,
-    Color,
-    Entity,
-    FILLMODE_FILL_WINDOW,
-    LightComponentSystem,
-    RenderComponentSystem,
-    RESOLUTION_AUTO,
-    RigidBodyComponentSystem,
-    ScriptComponentSystem,
-    StandardMaterial,
-    Vec3,
-    WasmModule,
-    createGraphicsDevice
-} from 'playcanvas';
-import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
-
-import './starter.css';
-
-const COLORS = [new Color(0.16, 0.68, 0.9), new Color(0.95, 0.34, 0.22), new Color(0.98, 0.68, 0.18)];
-const TYPES = ['box', 'sphere', 'capsule', 'cylinder'] as const;
-const SCALES: [number, number, number][] = [
-    [0.9, 0.9, 0.9],
-    [0.9, 0.9, 0.9],
-    [0.7, 1.1, 0.7],
-    [0.8, 1.1, 0.8]
-];
-
-WasmModule.setConfig('Ammo', {
-    glueUrl: './ammo/ammo.wasm.js',
-    wasmUrl: './ammo/ammo.wasm.wasm'
-});
-await new Promise<void>((resolve) => {
-    WasmModule.getInstance('Ammo', () => resolve());
-});
-
-document.body.insertAdjacentHTML(
-    'beforeend',
-    '<div class="hud"><section class="panel"><h1>Physics Playground</h1><p>Rigid bodies, collisions and runtime spawning.</p><div class="controls"><button id="spawn">Spawn object</button><button id="reset">Reset</button></div></section></div>'
-);
-
-const canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
-const device = await createGraphicsDevice(canvas);
-const options = new AppOptions();
-options.graphicsDevice = device;
-options.componentSystems = [
-    RenderComponentSystem,
-    CameraComponentSystem,
-    LightComponentSystem,
-    ScriptComponentSystem,
-    CollisionComponentSystem,
-    RigidBodyComponentSystem
-];
-
-const app = new AppBase(canvas);
-app.init(options);
-app.start();
-app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
-app.setCanvasResolution(RESOLUTION_AUTO);
-app.systems.rigidbody!.gravity.set(0, -9.81, 0);
-
-const materials = COLORS.map((color) => {
-    const material = new StandardMaterial();
-    material.diffuse = color;
-    material.gloss = 0.45;
-    material.update();
-    return material;
-});
-
-const floorMaterial = new StandardMaterial();
-floorMaterial.diffuse = new Color(0.18, 0.2, 0.24);
-floorMaterial.gloss = 0.2;
-floorMaterial.update();
-
-const floor = new Entity('floor');
-floor.setLocalScale(10, 0.2, 10);
-floor.setPosition(0, -0.1, 0);
-floor.addComponent('render', { type: 'box', material: floorMaterial });
-floor.addComponent('collision', { type: 'box', halfExtents: new Vec3(5, 0.1, 5) });
-floor.addComponent('rigidbody', { type: 'static' });
-app.root.addChild(floor);
-
-const bodies: Entity[] = [];
-const spawn = () => {
-    const i = bodies.length;
-    const type = TYPES[i % TYPES.length];
-    const entity = new Entity(type);
-    entity.setPosition(((i % 4) - 1.5) * 1.1, 0.7 + Math.floor(i / 4) * 1.1, (Math.floor(i / 4) - 1) * 1.4);
-    entity.setEulerAngles(i * 13, i * 29, 0);
-    entity.setLocalScale(...SCALES[i % SCALES.length]);
-    entity.addComponent('render', { type, material: materials[i % materials.length] });
-    entity.addComponent('collision', {
-        type,
-        halfExtents: new Vec3(0.5, 0.5, 0.5),
-        radius: 0.5
-    });
-    entity.addComponent('rigidbody', { type: 'dynamic', mass: 1, restitution: 0.35 });
-    app.root.addChild(entity);
-    bodies.push(entity);
-};
-const reset = () => {
-    bodies.splice(0).forEach((entity) => entity.destroy());
-    for (let i = 0; i < 12; i++) spawn();
-};
-
-const camera = new Entity('camera');
-camera.setPosition(10, 8, 10);
-camera.lookAt(0, 2, 0);
-camera.addComponent('camera', { clearColor: new Color(0.05, 0.07, 0.11) });
-camera.addComponent('script');
-camera.script!.create(CameraControls, { properties: { sceneSize: 10 } });
-app.root.addChild(camera);
-
-const light = new Entity('light');
-light.addComponent('light', {
-    type: 'directional',
-    intensity: 2.5,
-    castShadows: true,
-    shadowBias: 0.2,
-    normalOffsetBias: 0.05
-});
-light.setEulerAngles(45, 35, 0);
-app.root.addChild(light);
-
-document.getElementById('spawn')!.onclick = spawn;
-document.getElementById('reset')!.onclick = reset;
-reset();
-window.addEventListener('resize', () => app.resizeCanvas());

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

@@ -1,21 +0,0 @@
-import { Application } from '@playcanvas/react';
-import { useState } from 'react';
-
-import './counter.css';
-import Scene from './Scene';
-import './starter.css';
-
-function App() {
-    const [count, setCount] = useState(0);
-
-    return (
-        <>
-            <Application className="playcanvas-app">
-                <Scene onClick={() => setCount((count) => count + 1)} />
-            </Application>
-            <p className="counter">Click count: {count}</p>
-        </>
-    );
-}
-
-export default App;

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

@@ -1,70 +0,0 @@
-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 ? '#40ccff' : '#e6edf9';
-
-    // 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={[12, 12, 12]}>
-                <Script script={Grid} />
-            </Entity>
-
-            {/* Create a camera entity with camera controls */}
-            <Entity name="camera" position={[3.2, 1.5, 3.2]} rotation={[-10, 45, 0]}>
-                <Camera clearColor="#07101a" />
-                <Script script={CameraControls} sceneSize={3} />
-            </Entity>
-
-            {/* Create and position entity with pointer events */}
-            <Entity
-                position={[0, 0.7, 0]}
-                scale={[1.25, 1.25, 1.25]}
-                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/physics-playground/src/App.tsx

@@ -1,85 +0,0 @@
-import { Application, Entity } from '@playcanvas/react';
-import { Camera, Collision, Light, Render, RigidBody, Script } from '@playcanvas/react/components';
-import { useMaterial } from '@playcanvas/react/hooks';
-import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
-import { useState } from 'react';
-
-import './starter.css';
-
-const COLORS = ['#29ade6', '#f25738', '#f9ad2e'];
-const TYPES = ['box', 'sphere', 'capsule', 'cylinder'] as const;
-const SCALES: [number, number, number][] = [
-    [0.9, 0.9, 0.9],
-    [0.9, 0.9, 0.9],
-    [0.7, 1.1, 0.7],
-    [0.8, 1.1, 0.8]
-];
-
-function Body({ i }: { i: number }) {
-    const type = TYPES[i % TYPES.length];
-    const material = useMaterial({ diffuse: COLORS[i % COLORS.length], gloss: 0.45 });
-    return (
-        <Entity
-            position={[((i % 4) - 1.5) * 1.1, 0.7 + Math.floor(i / 4) * 1.1, (Math.floor(i / 4) - 1) * 1.4]}
-            rotation={[i * 13, i * 29, 0]}
-            scale={SCALES[i % SCALES.length]}
-        >
-            <Render type={type} material={material} />
-            <Collision type={type} />
-            <RigidBody type="dynamic" mass={1} restitution={0.35} />
-        </Entity>
-    );
-}
-
-function Floor() {
-    const material = useMaterial({ diffuse: '#2e333d', gloss: 0.2 });
-    return (
-        <Entity name="floor" position={[0, -0.1, 0]} scale={[10, 0.2, 10]}>
-            <Render type="box" material={material} />
-            <Collision type="box" halfExtents={[5, 0.1, 5]} />
-            <RigidBody type="static" />
-        </Entity>
-    );
-}
-
-function App() {
-    const [count, setCount] = useState(12);
-    const [reset, setReset] = useState(0);
-
-    return (
-        <>
-            <Application usePhysics>
-                <Entity name="camera" position={[10, 8, 10]} rotation={[-23, 45, 0]}>
-                    <Camera clearColor="#0d121c" />
-                    <Script script={CameraControls} sceneSize={10} />
-                </Entity>
-                <Entity name="light" rotation={[45, 35, 0]}>
-                    <Light type="directional" intensity={2.5} castShadows shadowBias={0.2} normalOffsetBias={0.05} />
-                </Entity>
-                <Floor />
-                {Array.from({ length: count }, (_, i) => (
-                    <Body key={`${reset}-${i}`} i={i} />
-                ))}
-            </Application>
-            <div className="hud">
-                <section className="panel">
-                    <h1>Physics Playground</h1>
-                    <p>Rigid bodies, collisions and runtime spawning.</p>
-                    <div className="controls">
-                        <button onClick={() => setCount((value) => value + 1)}>Spawn object</button>
-                        <button
-                            onClick={() => {
-                                setCount(12);
-                                setReset((value) => value + 1);
-                            }}
-                        >
-                            Reset
-                        </button>
-                    </div>
-                </section>
-            </div>
-        </>
-    );
-}
-
-export default App;

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

@@ -1,36 +0,0 @@
-<!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="#e6edf9"></pc-material>
-
-            <pc-scene>
-                <!-- Camera. Orbit controls are attached in src/main.ts -->
-                <pc-entity name="camera" position="3.2 1.5 3.2" rotation="-10 45 0">
-                    <pc-camera clear-color="#07101a"></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="12 12 12"></pc-entity>
-
-                <!-- The sphere. pc-app dispatches pointer events onto whatever the pointer hits -->
-                <pc-entity name="sphere" position="0 0.7 0" scale="1.25 1.25 1.25">
-                    <pc-render type="sphere" material="sphere-material"></pc-render>
-                </pc-entity>
-            </pc-scene>
-        </pc-app>
-
-        <p id="counter" class="counter">Click count: 0</p>
-
-        <script type="module" src="/src/main.ts"></script>
-    </body>
-</html>

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

@@ -1,76 +0,0 @@
-import type { EntityElement } from '@playcanvas/web-components';
-import { whenReady } from '@playcanvas/web-components';
-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';
-
-const HOVER_COLOR = '#40ccff';
-const DEFAULT_COLOR = '#e6edf9';
-
-// 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!;
-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-instance name="...">, which only resolves scripts fetched at runtime by <pc-asset>
-const camera = cameraComponent.closestEntity;
-camera?.entity?.addComponent('script');
-camera?.entity?.script?.create(CameraControls, { properties: { sceneSize: 3 } });
-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/physics-playground/index.html

@@ -1,46 +0,0 @@
-<!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>Physics Playground</title>
-    </head>
-    <body>
-        <pc-app>
-            <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>
-            <pc-material id="yellow-material" diffuse="#f9ad2e" gloss="0.45"></pc-material>
-            <pc-scene>
-                <pc-entity name="camera" position="10 8 10" rotation="-23 45 0"
-                    ><pc-camera clear-color="#0d121c"></pc-camera
-                ></pc-entity>
-                <pc-entity name="light" rotation="45 35 0"
-                    ><pc-light
-                        type="directional"
-                        intensity="2.5"
-                        cast-shadows
-                        shadow-bias="0.2"
-                        normal-offset-bias="0.05"
-                    ></pc-light
-                ></pc-entity>
-                <pc-entity name="floor" position="0 -0.1 0" scale="10 0.2 10"
-                    ><pc-render type="box" material="floor-material"></pc-render
-                    ><pc-collision type="box" half-extents="5 0.1 5"></pc-collision
-                    ><pc-rigid-body type="static"></pc-rigid-body
-                ></pc-entity>
-                <pc-entity id="bodies"></pc-entity>
-            </pc-scene>
-        </pc-app>
-        <div class="hud">
-            <section class="panel">
-                <h1>Physics Playground</h1>
-                <p>Rigid bodies, collisions and runtime spawning.</p>
-                <div class="controls"><button id="spawn">Spawn object</button><button id="reset">Reset</button></div>
-            </section>
-        </div>
-        <script type="module" src="/src/main.ts"></script>
-    </body>
-</html>

package/templates/web-components/physics-playground/src/main.ts

@@ -1,32 +0,0 @@
-import { whenReady } from '@playcanvas/web-components';
-import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
-
-import './starter.css';
-
-const MATERIALS = ['cyan-material', 'coral-material', 'yellow-material'];
-const TYPES = ['box', 'sphere', 'capsule', 'cylinder'];
-const SCALES = ['0.9 0.9 0.9', '0.9 0.9 0.9', '0.7 1.1 0.7', '0.8 1.1 0.8'];
-
-const camera = (await whenReady('pc-camera')).closestEntity!.entity!;
-camera.addComponent('script');
-camera.script!.create(CameraControls, { properties: { sceneSize: 10 } });
-
-const bodies = document.getElementById('bodies')!;
-let count = 0;
-const spawn = () => {
-    const i = count++;
-    const type = TYPES[i % TYPES.length];
-    bodies.insertAdjacentHTML(
-        'beforeend',
-        `<pc-entity data-body position="${((i % 4) - 1.5) * 1.1} ${0.7 + Math.floor(i / 4) * 1.1} ${(Math.floor(i / 4) - 1) * 1.4}" rotation="${i * 13} ${i * 29} 0" scale="${SCALES[i % SCALES.length]}"><pc-render type="${type}" material="${MATERIALS[i % MATERIALS.length]}"></pc-render><pc-collision type="${type}"></pc-collision><pc-rigid-body type="dynamic" mass="1" restitution="0.35"></pc-rigid-body></pc-entity>`
-    );
-};
-const reset = () => {
-    bodies.replaceChildren();
-    count = 0;
-    for (let i = 0; i < 12; i++) spawn();
-};
-
-document.getElementById('spawn')!.onclick = spawn;
-document.getElementById('reset')!.onclick = reset;
-reset();