create-playcanvas 0.15.0 → 0.16.1

package/templates/engine/vr-starter/src/main.ts

@@ -17,23 +17,35 @@ import {
 import './starter.css';
 import { setupVr } from './vr';
 
-document.body.insertAdjacentHTML(
-    'beforeend',
-    '<div class="hud"><section class="panel"><h1>VR Starter</h1><p id="xr-status">Checking VR support…</p><div class="controls"><button id="xr-button" disabled>Enter VR</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];
-options.xr = XrManager;
+device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+
+const createOptions = new AppOptions();
+createOptions.graphicsDevice = device;
+createOptions.componentSystems = [
+    RenderComponentSystem,
+    CameraComponentSystem,
+    LightComponentSystem,
+    ScriptComponentSystem
+];
+createOptions.xr = XrManager;
 
 const app = new AppBase(canvas);
-app.init(options);
+app.init(createOptions);
 app.start();
+
+// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
 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.on('destroy', () => {
+    window.removeEventListener('resize', resize);
+});
 app.scene.ambientLight = new Color(0.32, 0.34, 0.38);
 
 const material = (color: Color) => {
@@ -97,5 +109,3 @@ light.addComponent('light', {
 });
 light.setEulerAngles(45, 30, 0);
 app.root.addChild(light);
-
-window.addEventListener('resize', () => app.resizeCanvas());

package/templates/index.ts

@@ -41,12 +41,6 @@ export const STARTERS = [
         category: 'Basics',
         description: 'a rotating cube and a light'
     },
-    {
-        name: 'interactive-sphere',
-        display: 'Interactive Sphere',
-        category: 'Basics',
-        description: 'orbit controls, a grid and pointer picking'
-    },
     {
         name: 'model-viewer',
         display: 'Model Viewer',
@@ -65,13 +59,6 @@ export const STARTERS = [
         category: 'Viewers',
         description: 'product variants, materials and orbit controls'
     },
-    {
-        name: 'physics-playground',
-        display: 'Physics Playground',
-        category: 'Games',
-        description: 'rigid bodies, collisions, spawning and reset',
-        features: ['physics']
-    },
     {
         name: 'first-person-controller',
         display: 'First-Person Controller',
@@ -105,7 +92,7 @@ export const STARTERS = [
         name: 'scene-editor',
         display: 'Scene Editor',
         category: 'Tools',
-        description: 'selection and translate, rotate and scale gizmos'
+        description: 'click to select, gizmos and a scene saved in the browser'
     },
     {
         name: 'vr-starter',

package/templates/react/base/AGENTS.md

@@ -30,6 +30,7 @@ A PlayCanvas app in TypeScript and React, built with Vite. The scene is declared
 - Builds use relative URLs (`base: './'` in `vite.config.ts`), so they run from any folder. Load files in `public/` with relative paths such as `./model.glb`, not `/model.glb`.
 - The engine ships ready-made scripts, such as camera controls and character controllers, under `playcanvas/scripts/esm/`. Use one before writing the same behavior yourself.
 - `node_modules/playcanvas/build/playcanvas.d.ts` documents the installed engine's API.
+- For guides, start from the [PlayCanvas React guides index](https://developer.playcanvas.com/user-manual/react/llms.txt), which links a Markdown version of every page.
 - TypeScript is strict, and unused locals and parameters are errors.
 
 ## Checking your work

package/templates/react/scene-editor/src/App.tsx

@@ -1,79 +1,112 @@
 import { Application, Entity } from '@playcanvas/react';
-import { Camera, Light, Render, Script } from '@playcanvas/react/components';
-import { useApp, useMaterial } from '@playcanvas/react/hooks';
+import { Camera, Light, Script } from '@playcanvas/react/components';
+import { useApp, useAppEvent } from '@playcanvas/react/hooks';
 import type { Entity as PcEntity } from 'playcanvas';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
 import { Grid } from 'playcanvas/scripts/esm/grid.mjs';
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { RefObject } from 'react';
 
 import { SceneEditor } from './scene-editor';
+import type { EditorEvents, Mode, Shape } from './scene-editor';
 import './starter.css';
 
-function Scene() {
+const MODES: { mode: Mode; label: string }[] = [
+    { mode: 'translate', label: 'Move' },
+    { mode: 'rotate', label: 'Rotate' },
+    { mode: 'scale', label: 'Scale' }
+];
+const SHAPES: Shape[] = ['box', 'sphere', 'cone'];
+
+function Scene({
+    editor,
+    mode,
+    onSelect
+}: {
+    editor: RefObject<SceneEditor | null>;
+    mode: Mode;
+    onSelect: EditorEvents['editor:select'];
+}) {
     const app = useApp();
-    const host = useRef<PcEntity>(null);
-    const camera = useRef<PcEntity>(null);
-    const cube = useRef<PcEntity>(null);
-    const sphere = useRef<PcEntity>(null);
-    const coral = useMaterial({ diffuse: '#ff5145' });
-    const cyan = useMaterial({ diffuse: '#24addf' });
+
+    // the editor needs the camera's entity, which exists once the camera has rendered
+    const [camera, setCamera] = useState<PcEntity | null>(null);
+
+    useAppEvent<EditorEvents>('editor:select', onSelect);
 
     useEffect(() => {
-        const node = host.current;
-        const layer = app.scene.layers.getLayerByName('World');
-        if (!node || !camera.current || !cube.current || !sphere.current || !layer) return;
-        if (!node.script) node.addComponent('script');
-        node.script!.create(SceneEditor, {
-            properties: { camera: camera.current, targets: [cube.current, sphere.current], layer }
-        });
-        return () => {
-            node.script?.destroy('sceneEditor');
-        };
+        // render at up to twice the CSS resolution: sharp on a phone, without the cost of 3x
+        // eslint-disable-next-line react-hooks/immutability -- the device belongs to the engine, not React
+        app.graphicsDevice.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
     }, [app]);
 
     return (
         <>
-            <Entity name="camera" ref={camera} position={[4, 3.2, 5]} rotation={[-18, 39, 0]}>
-                <Camera clearColor="#0a0f17" />
-            </Entity>
             <Entity name="light" rotation={[45, 30, 0]}>
-                <Light type="directional" intensity={2.5} castShadows shadowBias={0.2} normalOffsetBias={0.05} />
+                <Light type="directional" intensity={2.5} />
+            </Entity>
+            {/* A weaker light from behind keeps the sides the first can't reach from going black */}
+            <Entity name="fill" rotation={[-25, -140, 0]}>
+                <Light type="directional" intensity={0.8} />
             </Entity>
             <Entity name="grid" scale={[12, 12, 12]}>
                 <Script script={Grid} />
             </Entity>
-            <Entity name="cube" ref={cube} position={[-1.2, 0.5, 0]}>
-                <Render type="box" material={coral} />
-            </Entity>
-            <Entity name="sphere" ref={sphere} position={[1.2, 0.5, 0]}>
-                <Render type="sphere" material={cyan} />
+            {/* Create a camera entity with orbit controls */}
+            <Entity name="camera" ref={setCamera} position={[4, 3.2, 5]} rotation={[-23, 39, 0]}>
+                <Camera clearColor="#0a0f17" />
+                <Script script={CameraControls} sceneSize={5} />
             </Entity>
-            <Entity name="editor" ref={host} />
+            {/* The editor creates the objects under its own entity, from the scene saved in this browser */}
+            {camera && (
+                <Entity name="editor">
+                    <Script ref={editor} script={SceneEditor} camera={camera} mode={mode} />
+                </Entity>
+            )}
         </>
     );
 }
 
 function App() {
+    // the HUD's buttons call the editor script through this
+    const editor = useRef<SceneEditor>(null);
+    const [mode, setMode] = useState<Mode>('translate');
+    const [selected, setSelected] = useState(false);
+
+    const onSelect = useCallback((entity: PcEntity | null) => setSelected(!!entity), []);
+
     return (
         <>
             <Application>
-                <Scene />
+                <Scene editor={editor} mode={mode} onSelect={onSelect} />
             </Application>
             <div className="hud">
                 <section className="panel">
                     <h1>Scene Editor</h1>
-                    <p>Select an object, then translate, rotate or scale it.</p>
+                    <p>Click an object to select it, then drag its gizmo. Drag anywhere else to orbit.</p>
                     <div className="controls">
-                        <button data-target="0" aria-pressed="true">
-                            Cube
-                        </button>
-                        <button data-target="1">Sphere</button>
+                        {MODES.map((item) => (
+                            <button
+                                key={item.mode}
+                                aria-pressed={mode === item.mode}
+                                onClick={() => setMode(item.mode)}
+                            >
+                                {item.label}
+                            </button>
+                        ))}
+                    </div>
+                    <div className="controls">
+                        {SHAPES.map((shape) => (
+                            <button key={shape} onClick={() => editor.current?.add(shape)}>
+                                Add {shape}
+                            </button>
+                        ))}
                     </div>
                     <div className="controls">
-                        <button data-mode="translate" aria-pressed="true">
-                            Move
+                        <button disabled={!selected} onClick={() => editor.current?.remove()}>
+                            Delete
                         </button>
-                        <button data-mode="rotate">Rotate</button>
-                        <button data-mode="scale">Scale</button>
+                        <button onClick={() => editor.current?.reset()}>Reset</button>
                     </div>
                 </section>
             </div>

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

@@ -28,6 +28,7 @@ A PlayCanvas app in TypeScript, built with Vite. The scene is declared in HTML w
 - Builds use relative URLs (`base: './'` in `vite.config.ts`), so they run from any folder. Load files in `public/` with relative paths such as `./model.glb`, not `/model.glb`.
 - The engine ships ready-made scripts, such as camera controls and character controllers, under `playcanvas/scripts/esm/`. Use one before writing the same behavior yourself.
 - `node_modules/playcanvas/build/playcanvas.d.ts` documents the installed engine's API.
+- For guides, start from the [Web Components guides index](https://developer.playcanvas.com/user-manual/web-components/llms.txt), which links a Markdown version of every page.
 - TypeScript is strict, and unused locals and parameters are errors.
 
 ## Checking your work

package/templates/web-components/scene-editor/index.html

@@ -7,45 +7,52 @@
         <title>Scene Editor</title>
     </head>
     <body>
-        <pc-app>
-            <pc-material id="coral" diffuse="#ff5145"></pc-material>
-            <pc-material id="cyan" diffuse="#24addf"></pc-material>
+        <pc-app max-pixel-ratio="2">
             <pc-scene>
-                <pc-entity name="camera" position="4 3.2 5" rotation="-18 39 0"
-                    ><pc-camera clear-color="#0a0f17"></pc-camera
-                ></pc-entity>
-                <pc-entity name="light" rotation="45 30 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="light" rotation="45 30 0">
+                    <pc-light type="directional" intensity="2.5"></pc-light>
+                </pc-entity>
+
+                <!-- A weaker light from behind keeps the sides the first can't reach from going black -->
+                <pc-entity name="fill" rotation="-25 -140 0">
+                    <pc-light type="directional" intensity="0.8"></pc-light>
+                </pc-entity>
+
+                <!-- The grid script is attached in src/main.ts -->
                 <pc-entity name="grid" scale="12 12 12"></pc-entity>
-                <pc-entity name="cube" position="-1.2 0.5 0"
-                    ><pc-render type="box" material="coral"></pc-render
-                ></pc-entity>
-                <pc-entity name="sphere" position="1.2 0.5 0"
-                    ><pc-render type="sphere" material="cyan"></pc-render
-                ></pc-entity>
+
+                <!-- Camera. Orbit controls are attached in src/main.ts -->
+                <pc-entity name="camera" position="4 3.2 5" rotation="-23 39 0">
+                    <pc-camera clear-color="#0a0f17"></pc-camera>
+                </pc-entity>
+
+                <!-- The editor script is attached in src/main.ts. It creates the objects under this
+                     entity, from the scene saved in this browser -->
                 <pc-entity name="editor"></pc-entity>
             </pc-scene>
         </pc-app>
+
         <div class="hud">
             <section class="panel">
                 <h1>Scene Editor</h1>
-                <p>Select an object, then translate, rotate or scale it.</p>
+                <p>Click an object to select it, then drag its gizmo. Drag anywhere else to orbit.</p>
                 <div class="controls">
-                    <button data-target="0" aria-pressed="true">Cube</button><button data-target="1">Sphere</button>
+                    <button data-mode="translate" aria-pressed="true">Move</button>
+                    <button data-mode="rotate" aria-pressed="false">Rotate</button>
+                    <button data-mode="scale" aria-pressed="false">Scale</button>
                 </div>
                 <div class="controls">
-                    <button data-mode="translate" aria-pressed="true">Move</button
-                    ><button data-mode="rotate">Rotate</button><button data-mode="scale">Scale</button>
+                    <button data-add="box">Add box</button>
+                    <button data-add="sphere">Add sphere</button>
+                    <button data-add="cone">Add cone</button>
+                </div>
+                <div class="controls">
+                    <button id="delete" disabled>Delete</button>
+                    <button id="reset">Reset</button>
                 </div>
             </section>
         </div>
+
         <script type="module" src="/src/main.ts"></script>
     </body>
 </html>

package/templates/web-components/scene-editor/src/main.ts

@@ -1,26 +1,48 @@
 import type { EntityElement } from '@playcanvas/web-components';
 import { whenReady } from '@playcanvas/web-components';
+import type { Entity } from 'playcanvas';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
 import { Grid } from 'playcanvas/scripts/esm/grid.mjs';
 
 import { SceneEditor } from './scene-editor';
+import type { Mode, Shape } from './scene-editor';
 import './starter.css';
 
-const [appElement, camera, grid, cube, sphere, editor] = await Promise.all([
+// The camera is awaited as <pc-camera> rather than the <pc-entity> holding it - an entity becomes
+// ready before its component children do, and the scripts need the camera component to exist
+const [appElement, cameraComponent, grid, host] = await Promise.all([
     whenReady('pc-app'),
-    whenReady<EntityElement>('pc-entity[name="camera"]'),
+    whenReady('pc-camera'),
     whenReady<EntityElement>('pc-entity[name="grid"]'),
-    whenReady<EntityElement>('pc-entity[name="cube"]'),
-    whenReady<EntityElement>('pc-entity[name="sphere"]'),
     whenReady<EntityElement>('pc-entity[name="editor"]')
 ]);
+const app = appElement.app!;
+const camera = cameraComponent.closestEntity!.entity!;
 
+// 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>
+camera.addComponent('script');
+camera.script!.create(CameraControls, { properties: { sceneSize: 5 } });
 grid.entity!.addComponent('script');
 grid.entity!.script!.create(Grid);
-editor.entity!.addComponent('script');
-editor.entity!.script!.create(SceneEditor, {
-    properties: {
-        camera: camera.entity,
-        targets: [cube.entity, sphere.entity],
-        layer: appElement.app!.scene.layers.getLayerByName('World')
-    }
+host.entity!.addComponent('script');
+const editor = host.entity!.script!.create(SceneEditor, { properties: { camera } }) as SceneEditor;
+
+// The HUD drives the editor, and follows its selection
+const modes = document.querySelectorAll<HTMLButtonElement>('[data-mode]');
+modes.forEach((button) => {
+    button.addEventListener('click', () => {
+        editor.mode = button.dataset.mode as Mode;
+        modes.forEach((other) => (other.ariaPressed = String(other === button)));
+    });
+});
+document.querySelectorAll<HTMLButtonElement>('[data-add]').forEach((button) => {
+    button.addEventListener('click', () => editor.add(button.dataset.add as Shape));
+});
+
+const remove = document.getElementById('delete') as HTMLButtonElement;
+remove.addEventListener('click', () => editor.remove());
+document.getElementById('reset')!.addEventListener('click', () => editor.reset());
+app.on('editor:select', (selected: Entity | null) => {
+    remove.disabled = !selected;
 });

package/templates/_shared/interactive-sphere/README.md

@@ -1,7 +0,0 @@
-## Interactive Sphere
-
-A lit sphere, an environment map, grid and orbit camera controls.
-
-### Controls
-
-Drag to orbit the camera. Click the sphere to increment the counter.

package/templates/_shared/interactive-sphere/src/counter.css

@@ -1,19 +0,0 @@
-.counter {
-    position: fixed;
-    bottom: 22px;
-    left: 50%;
-    z-index: 2;
-    margin: 0;
-    padding: 9px 13px;
-    border: 1px solid #ffffff24;
-    border-radius: 999px;
-    background: #07101bd9;
-    color: #f8fafc;
-    font:
-        650 12px Inter,
-        ui-sans-serif,
-        system-ui,
-        sans-serif;
-    translate: -50% 0;
-    backdrop-filter: blur(10px);
-}

package/templates/_shared/physics-playground/README.md

@@ -1,7 +0,0 @@
-## Physics Playground
-
-A rigid-body scene with a static floor, orbit camera and dynamic primitive shapes.
-
-### Controls
-
-Use **Spawn object** to add a body and **Reset** to recreate the starting set. Drag to orbit the camera.

package/templates/engine/interactive-sphere/src/App.ts

@@ -1,182 +0,0 @@
-import type { Layer } from 'playcanvas';
-import {
-    createGraphicsDevice,
-    AppBase,
-    AppOptions,
-    RenderComponentSystem,
-    CameraComponentSystem,
-    ScriptComponentSystem,
-    TextureHandler,
-    ContainerHandler,
-    FILLMODE_FILL_WINDOW,
-    RESOLUTION_AUTO,
-    Entity,
-    Color,
-    Vec3,
-    Picker,
-    EVENT_MOUSEMOVE,
-    EVENT_MOUSEUP,
-    TouchDevice,
-    Mouse,
-    StandardMaterial,
-    Asset,
-    AssetListLoader,
-    TEXTURETYPE_RGBP
-} from 'playcanvas';
-import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
-import { Grid } from 'playcanvas/scripts/esm/grid.mjs';
-
-import { throttle } from './utils';
-
-const HOVER_COLOR = new Color(0.25, 0.8, 1);
-const DEFAULT_COLOR = new Color(0.9, 0.93, 0.98);
-
-// 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
- */
-const setupApp = async (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.7, 0));
-    sphere.setLocalScale(1.25, 1.25, 1.25);
-
-    // 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.025, 0.04, 0.065)
-    });
-    camera.setPosition(new Vec3(3.2, 1.5, 3.2));
-    camera.lookAt(0, 0.7, 0);
-    app.root.addChild(camera);
-
-    // Create camera controls
-    camera.addComponent('script');
-    camera.script?.create(CameraControls, { properties: { sceneSize: 3 } });
-
-    // Create grid entity
-    const grid = new Entity('grid');
-    grid.addComponent('script');
-    grid.script?.create(Grid);
-    grid.setLocalScale(12, 12, 12);
-    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) => {
-        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((items) => {
-            if (items.length === 0) return false;
-            return items[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/engine/interactive-sphere/src/main.ts

@@ -1,16 +0,0 @@
-import { setupApp } from './App';
-import './counter.css';
-import './starter.css';
-
-let count = 0;
-
-document.body.insertAdjacentHTML('beforeend', `<p id="counter" class="counter">Click count: ${count}</p>`);
-
-const counterElement = document.getElementById('counter')!;
-
-const increment = () => {
-    count++;
-    counterElement.textContent = `Click count: ${count}`;
-};
-
-setupApp(document.getElementById('application-canvas') as HTMLCanvasElement, increment);

package/templates/engine/interactive-sphere/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 const throttle = <T extends unknown[]>(fn: (...args: T) => void, interval = 100) => {
-    let last = 0;
-    return (...args: T) => {
-        const now = Date.now();
-        if (now - last >= interval) {
-            last = now;
-            fn(...args);
-        }
-    };
-};