npm - create-playcanvas - Versions diffs - 0.5.1 → 0.6.1 - Mend

create-playcanvas 0.5.1 → 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (113) hide show

package/templates/react/vr-starter/src/App.tsx ADDED Viewed

@@ -0,0 +1,99 @@
+import { Application, Entity } from '@playcanvas/react';
+import { Camera, Light, Render } from '@playcanvas/react/components';
+import { useApp, useMaterial } from '@playcanvas/react/hooks';
+import type { Entity as PcEntity } from 'playcanvas';
+import { useEffect, useRef } from 'react';
+import './starter.css';
+import { setupVr } from './vr';
+function Scene() {
+    const app = useApp();
+    const rig = useRef<PcEntity>(null);
+    const camera = useRef<PcEntity>(null);
+    const floor = useMaterial({ diffuse: '#61666e' });
+    const wall = useMaterial({ diffuse: '#3d424a' });
+    const cyan = useMaterial({ diffuse: '#1fb3db' });
+    const coral = useMaterial({ diffuse: '#ff594d' });
+    const yellow = useMaterial({ diffuse: '#ffbf33' });
+    useEffect(() => {
+        if (rig.current && camera.current) return setupVr(app, rig.current, camera.current);
+    }, [app]);
+    return (
+        <>
+            <Entity name="light" rotation={[45, 30, 0]}>
+                <Light type="directional" intensity={2} castShadows shadowBias={0.2} normalOffsetBias={0.05} />
+            </Entity>
+            <Entity name="floor" scale={[10, 1, 10]}>
+                <Render type="plane" material={floor} />
+            </Entity>
+            {[
+                ['back-wall', [0, 2, -3.5], [8, 4, 0.2]],
+                ['left-wall', [-4, 2, 0], [0.2, 4, 7]],
+                ['right-wall', [4, 2, 0], [0.2, 4, 7]]
+            ].map(([name, position, scale]) => (
+                <Entity
+                    key={name as string}
+                    name={name as string}
+                    position={position as [number, number, number]}
+                    scale={scale as [number, number, number]}
+                >
+                    <Render type="box" material={wall} />
+                </Entity>
+            ))}
+            {[
+                [-2.4, cyan],
+                [0, coral],
+                [2.4, yellow]
+            ].map(([x, material], i) => (
+                <Entity key={i} position={[x as number, 2.4, -3.35]} scale={[1.3, 1.3, 0.12]}>
+                    <Render type="box" material={material as never} />
+                </Entity>
+            ))}
+            {[-2.4, 0, 2.4].map((x) => (
+                <Entity key={x} position={[x, 0.45, -1.6]} scale={[1, 0.9, 1]}>
+                    <Render type="box" material={wall} />
+                </Entity>
+            ))}
+            <Entity position={[-2.4, 1.35, -1.6]} scale={[0.7, 0.7, 0.7]}>
+                <Render type="sphere" material={cyan} />
+            </Entity>
+            <Entity position={[0, 1.35, -1.6]} scale={[0.7, 0.7, 0.7]}>
+                <Render type="box" material={coral} />
+            </Entity>
+            <Entity position={[2.4, 1.35, -1.6]} scale={[0.8, 0.9, 0.8]}>
+                <Render type="cone" material={yellow} />
+            </Entity>
+            <Entity name="xr-rig" ref={rig}>
+                <Entity name="camera" ref={camera} position={[0, 1.6, 4]}>
+                    <Camera clearColor="#292e38" />
+                </Entity>
+            </Entity>
+        </>
+    );
+}
+function App() {
+    return (
+        <>
+            <Application graphicsDeviceOptions={{ xrCompatible: true }}>
+                <Scene />
+            </Application>
+            <div className="hud">
+                <section className="panel">
+                    <h1>VR Starter</h1>
+                    <p id="xr-status">Checking VR support…</p>
+                    <div className="controls">
+                        <button id="xr-button" disabled>
+                            Enter VR
+                        </button>
+                    </div>
+                </section>
+            </div>
+        </>
+    );
+}
+export default App;

package/templates/web-components/ar-placement/index.html ADDED Viewed

@@ -0,0 +1,44 @@
+<!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>AR Placement</title>
+    </head>
+    <body>
+        <pc-app alpha>
+            <pc-material id="surface-material" diffuse="#474d57"></pc-material>
+            <pc-material id="cyan" diffuse="#1ab3e6"></pc-material>
+            <pc-material id="coral" diffuse="#ff5926"></pc-material>
+            <pc-scene>
+                <pc-entity name="camera" position="3 2.4 4" rotation="-20 37 0"
+                    ><pc-camera clear-color="#0d141f"></pc-camera
+                ></pc-entity>
+                <pc-entity name="light" rotation="45 30 0"
+                    ><pc-light type="directional" intensity="2"></pc-light
+                ></pc-entity>
+                <pc-entity name="preview">
+                    <pc-entity name="surface" scale="4 0.15 4"
+                        ><pc-render type="cylinder" material="surface-material"></pc-render
+                    ></pc-entity>
+                    <pc-entity name="box" position="0 0.65 0"
+                        ><pc-render type="box" material="cyan"></pc-render
+                    ></pc-entity>
+                    <pc-entity name="reticle" position="0 0.12 0" scale="1.5 0.03 1.5"
+                        ><pc-render type="cylinder" material="coral"></pc-render
+                    ></pc-entity>
+                </pc-entity>
+                <pc-entity name="placement"></pc-entity>
+            </pc-scene>
+        </pc-app>
+        <div class="hud">
+            <section class="panel">
+                <h1>AR Placement</h1>
+                <p id="xr-status">Checking AR support…</p>
+                <div class="controls"><button id="xr-button" disabled>Start AR</button></div>
+            </section>
+        </div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/web-components/ar-placement/src/main.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import type { EntityElement } from '@playcanvas/web-components';
+import { whenReady } from '@playcanvas/web-components';
+import { ArPlacement } from './ar-placement';
+import './starter.css';
+const [camera, preview, placement] = await Promise.all([
+    whenReady<EntityElement>('pc-entity[name="camera"]'),
+    whenReady<EntityElement>('pc-entity[name="preview"]'),
+    whenReady<EntityElement>('pc-entity[name="placement"]')
+]);
+placement.entity!.addComponent('script');
+placement.entity!.script!.create(ArPlacement, { properties: { camera: camera.entity, preview: preview.entity } });

package/templates/web-components/base/.prettierignore CHANGED Viewed

@@ -1,2 +1,3 @@
 .claude
 .agents
+public/ammo

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

@@ -10,7 +10,7 @@ Node.js 22.23.2 or later.
 ## Getting started
 ```bash
-npm create playcanvas@latest playcanvas-project -- --template web-components
+npm create playcanvas@latest playcanvas-project -- --format web-components
 cd playcanvas-project
 npm install
 npm run dev

package/templates/web-components/base/_npmrc ADDED Viewed

	@@ -0,0 +1 @@
1	+ registry=https://registry.npmjs.org/

package/templates/web-components/base/eslint.config.mjs CHANGED Viewed

@@ -1,3 +1,3 @@
 import typescriptConfig from '@playcanvas/eslint-config/typescript';
-export default [{ ignores: ['.claude', '.agents'] }, ...typescriptConfig];
+export default [{ ignores: ['.claude', '.agents', 'public/ammo'] }, ...typescriptConfig];

package/templates/web-components/base/package.json CHANGED Viewed

@@ -15,7 +15,7 @@
         "typecheck": "tsc --noEmit"
     },
     "dependencies": {
-        "@playcanvas/web-components": "^0.15.0",
+        "@playcanvas/web-components": "^0.16.0",
         "playcanvas": "^2.21.4"
     },
     "devDependencies": {

package/templates/web-components/base/src/starter.css ADDED Viewed

@@ -0,0 +1,104 @@
+* {
+    box-sizing: border-box;
+}
+html,
+body,
+#root,
+#application,
+pc-app,
+canvas {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    overflow: hidden;
+}
+body {
+    background: #11151c;
+    color: #f8fafc;
+    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+}
+canvas,
+pc-app {
+    display: block;
+}
+.hud {
+    position: fixed;
+    inset: 0;
+    z-index: 10;
+    padding: 20px;
+    pointer-events: none;
+}
+.panel {
+    width: min(360px, calc(100vw - 40px));
+    padding: 16px;
+    border: 1px solid #ffffff24;
+    border-radius: 14px;
+    background: #0b1019d9;
+    box-shadow: 0 12px 40px #0008;
+    backdrop-filter: blur(12px);
+    pointer-events: auto;
+}
+h1 {
+    margin: 0 0 6px;
+    font-size: 18px;
+}
+p {
+    margin: 6px 0 0;
+    color: #aeb8c8;
+    font-size: 13px;
+    line-height: 1.45;
+}
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 14px;
+}
+button {
+    padding: 8px 11px;
+    border: 1px solid #ffffff24;
+    border-radius: 9px;
+    background: #263247;
+    color: inherit;
+    cursor: pointer;
+}
+button:hover,
+button[aria-pressed='true'] {
+    border-color: #41b6e6;
+    background: #334867;
+}
+button:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+.swatch {
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border-radius: 50%;
+    background: var(--color);
+}
+.crosshair {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 16px;
+    height: 16px;
+    border: 2px solid #fff;
+    border-radius: 50%;
+    translate: -50% -50%;
+    box-shadow: 0 0 4px #000;
+}

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

@@ -0,0 +1,168 @@
+<!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>First-Person Controller</title>
+    </head>
+    <body>
+        <pc-app>
+            <pc-material id="floor-material" diffuse="#474d52" emissive="#0e0f10" gloss="0.2"></pc-material>
+            <pc-material id="wall-material" diffuse="#6b737a" emissive="#151718" gloss="0.25"></pc-material>
+            <pc-material id="blue-material" diffuse="#154a7a" emissive="#040f18" gloss="0.4"></pc-material>
+            <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-module
+                name="Ammo"
+                glue="/ammo/ammo.wasm.js"
+                wasm="/ammo/ammo.wasm.wasm"
+                fallback="/ammo/ammo.js"
+            ></pc-module>
+            <pc-scene>
+                <pc-entity name="light" rotation="50 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="fill" rotation="-25 -140 0"
+                    ><pc-light type="directional" intensity="0.8"></pc-light
+                ></pc-entity>
+                <pc-entity name="floor" position="0 -0.1 0" scale="18 0.2 18"
+                    ><pc-render type="box" material="floor-material"></pc-render
+                    ><pc-collision type="box" half-extents="9 0.1 9"></pc-collision
+                    ><pc-rigidbody type="static"></pc-rigidbody
+                ></pc-entity>
+                <pc-entity name="back-wall" position="0 1.5 -9" scale="18 3 0.3"
+                    ><pc-render type="box" material="wall-material"></pc-render
+                    ><pc-collision type="box" half-extents="9 1.5 0.15"></pc-collision
+                    ><pc-rigidbody type="static"></pc-rigidbody
+                ></pc-entity>
+                <pc-entity name="front-wall" position="0 1.5 9" scale="18 3 0.3"
+                    ><pc-render type="box" material="wall-material"></pc-render
+                    ><pc-collision type="box" half-extents="9 1.5 0.15"></pc-collision
+                    ><pc-rigidbody type="static"></pc-rigidbody
+                ></pc-entity>
+                <pc-entity name="left-wall" position="-9 1.5 0" scale="0.3 3 18"
+                    ><pc-render type="box" material="wall-material"></pc-render
+                    ><pc-collision type="box" half-extents="0.15 1.5 9"></pc-collision
+                    ><pc-rigidbody type="static"></pc-rigidbody
+                ></pc-entity>
+                <pc-entity name="right-wall" position="9 1.5 0" scale="0.3 3 18"
+                    ><pc-render type="box" material="wall-material"></pc-render
+                    ><pc-collision type="box" half-extents="0.15 1.5 9"></pc-collision
+                    ><pc-rigidbody type="static"></pc-rigidbody
+                ></pc-entity>
+                <pc-entity name="blue-crate" position="-2 0.75 -3" scale="1.5 1.5 1.5"
+                    ><pc-render type="box" material="blue-material"></pc-render
+                    ><pc-collision type="box" half-extents="0.75 0.75 0.75"></pc-collision
+                    ><pc-rigidbody type="static"></pc-rigidbody
+                ></pc-entity>
+                <pc-entity name="green-crate" position="3 0.5 1" scale="2.5 1 1"
+                    ><pc-render type="box" material="green-material"></pc-render
+                    ><pc-collision type="box" half-extents="1.25 0.5 0.5"></pc-collision
+                    ><pc-rigidbody type="static"></pc-rigidbody
+                ></pc-entity>
+                <pc-entity name="cargo-left-0" position="-5.5 0.75 -5.5" scale="2 1.5 2"
+                    ><pc-render type="box" material="wood-material"></pc-render
+                    ><pc-collision type="box" half-extents="1 0.75 1"></pc-collision
+                    ><pc-rigidbody type="static"></pc-rigidbody
+                ></pc-entity>
+                <pc-entity name="cargo-left-1" position="-5.5 2 -5.5" scale="1.5 1 1.5"
+                    ><pc-render type="box" material="blue-material"></pc-render
+                    ><pc-collision type="box" half-extents="0.75 0.5 0.75"></pc-collision
+                    ><pc-rigidbody type="static"></pc-rigidbody
+                ></pc-entity>
+                <pc-entity name="cargo-right-0" position="5.3 0.6 -4.8" scale="2.4 1.2 2"
+                    ><pc-render type="box" material="green-material"></pc-render
+                    ><pc-collision type="box" half-extents="1.2 0.6 1"></pc-collision
+                    ><pc-rigidbody type="static"></pc-rigidbody
+                ></pc-entity>
+                <pc-entity name="cargo-right-1" position="5.3 1.7 -4.8" scale="1.5 1 1.5"
+                    ><pc-render type="box" material="wood-material"></pc-render
+                    ><pc-collision type="box" half-extents="0.75 0.5 0.75"></pc-collision
+                    ><pc-rigidbody type="static"></pc-rigidbody
+                ></pc-entity>
+                <pc-entity name="cargo-center" position="0 0.6 -6.5" scale="2.2 1.2 1.8"
+                    ><pc-render type="box" material="blue-material"></pc-render
+                    ><pc-collision type="box" half-extents="1.1 0.6 0.9"></pc-collision
+                    ><pc-rigidbody type="static"></pc-rigidbody
+                ></pc-entity>
+                <pc-entity name="shelf-left-post-0" position="-6.8 1.4 -3.5" scale="0.25 2.8 0.25"
+                    ><pc-render type="box" material="metal-material"></pc-render
+                    ><pc-collision type="box" half-extents="0.125 1.4 0.125"></pc-collision
+                    ><pc-rigidbody type="static"></pc-rigidbody
+                ></pc-entity>
+                <pc-entity name="shelf-left-post-1" position="-6.8 1.4 0" scale="0.25 2.8 0.25"
+                    ><pc-render type="box" material="metal-material"></pc-render
+                    ><pc-collision type="box" half-extents="0.125 1.4 0.125"></pc-collision
+                    ><pc-rigidbody type="static"></pc-rigidbody
+                ></pc-entity>
+                <pc-entity name="shelf-left-post-2" position="-6.8 1.4 3.5" scale="0.25 2.8 0.25"
+                    ><pc-render type="box" material="metal-material"></pc-render
+                    ><pc-collision type="box" half-extents="0.125 1.4 0.125"></pc-collision
+                    ><pc-rigidbody type="static"></pc-rigidbody
+                ></pc-entity>
+                <pc-entity name="shelf-right-post-0" position="6.8 1.4 -3.5" scale="0.25 2.8 0.25"
+                    ><pc-render type="box" material="metal-material"></pc-render
+                    ><pc-collision type="box" half-extents="0.125 1.4 0.125"></pc-collision
+                    ><pc-rigidbody type="static"></pc-rigidbody
+                ></pc-entity>
+                <pc-entity name="shelf-right-post-1" position="6.8 1.4 0" scale="0.25 2.8 0.25"
+                    ><pc-render type="box" material="metal-material"></pc-render
+                    ><pc-collision type="box" half-extents="0.125 1.4 0.125"></pc-collision
+                    ><pc-rigidbody type="static"></pc-rigidbody
+                ></pc-entity>
+                <pc-entity name="shelf-right-post-2" position="6.8 1.4 3.5" scale="0.25 2.8 0.25"
+                    ><pc-render type="box" material="metal-material"></pc-render
+                    ><pc-collision type="box" half-extents="0.125 1.4 0.125"></pc-collision
+                    ><pc-rigidbody type="static"></pc-rigidbody
+                ></pc-entity>
+                <pc-entity name="shelf-left-low" position="-6.8 0.65 0" scale="1.1 0.18 7.5"
+                    ><pc-render type="box" material="metal-material"></pc-render
+                    ><pc-collision type="box" half-extents="0.55 0.09 3.75"></pc-collision
+                    ><pc-rigidbody type="static"></pc-rigidbody
+                ></pc-entity>
+                <pc-entity name="shelf-left-high" position="-6.8 2.1 0" scale="1.1 0.18 7.5"
+                    ><pc-render type="box" material="metal-material"></pc-render
+                    ><pc-collision type="box" half-extents="0.55 0.09 3.75"></pc-collision
+                    ><pc-rigidbody type="static"></pc-rigidbody
+                ></pc-entity>
+                <pc-entity name="shelf-right-low" position="6.8 0.65 0" scale="1.1 0.18 7.5"
+                    ><pc-render type="box" material="metal-material"></pc-render
+                    ><pc-collision type="box" half-extents="0.55 0.09 3.75"></pc-collision
+                    ><pc-rigidbody type="static"></pc-rigidbody
+                ></pc-entity>
+                <pc-entity name="shelf-right-high" position="6.8 2.1 0" scale="1.1 0.18 7.5"
+                    ><pc-render type="box" material="metal-material"></pc-render
+                    ><pc-collision type="box" half-extents="0.55 0.09 3.75"></pc-collision
+                    ><pc-rigidbody type="static"></pc-rigidbody
+                ></pc-entity>
+                <pc-entity name="pallet" position="-2.5 0.15 2.5" scale="3 0.3 2"
+                    ><pc-render type="box" material="wood-material"></pc-render
+                    ><pc-collision type="box" half-extents="1.5 0.15 1"></pc-collision
+                    ><pc-rigidbody type="static"></pc-rigidbody
+                ></pc-entity>
+                <pc-entity name="player" position="0 1 5">
+                    <pc-collision type="capsule" radius="0.45" height="1.8"></pc-collision>
+                    <pc-rigidbody type="dynamic" mass="80" angular-factor="0 0 0"></pc-rigidbody>
+                    <pc-entity name="camera" position="0 0.65 0"
+                        ><pc-camera clear-color="#61a3db" fov="80"></pc-camera
+                    ></pc-entity>
+                </pc-entity>
+            </pc-scene>
+        </pc-app>
+        <div class="hud">
+            <section class="panel">
+                <h1>First-Person Controller</h1>
+                <p>Click the scene, then use WASD, mouse look and Space to jump.</p>
+            </section>
+        </div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/web-components/first-person-controller/src/main.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import type { EntityElement } from '@playcanvas/web-components';
+import { whenReady } from '@playcanvas/web-components';
+import { addFirstPersonController } from './controller';
+import './starter.css';
+await Promise.all([
+    whenReady('pc-entity[name="player"] > pc-collision'),
+    whenReady('pc-entity[name="player"] > pc-rigidbody')
+]);
+const [player, camera] = await Promise.all([
+    whenReady<EntityElement>('pc-entity[name="player"]'),
+    whenReady<EntityElement>('pc-entity[name="camera"]')
+]);
+addFirstPersonController(player.entity!, camera.entity!);

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

@@ -13,40 +13,23 @@
             <pc-scene>
                 <!-- Camera. Orbit controls are attached in src/main.ts -->
-                <pc-entity name="camera" position="4 1 4">
-                    <pc-camera clear-color="#171717"></pc-camera>
+                <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="1000 1000 1000"></pc-entity>
+                <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.5 0">
+                <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>
-        <div class="absolute overlay">
-            <div class="grow">
-                <header>
-                    <h1>PlayCanvas + Web Components</h1>
-                    <a href="https://developer.playcanvas.com/user-manual/web-components/" target="_blank">
-                        <img src="/src/assets/playcanvas.png" class="playcanvas-logo logo" alt="PlayCanvas logo" />
-                    </a>
-                    <a href="https://www.typescriptlang.org/" target="_blank">
-                        <img src="/src/assets/typescript.svg" class="logo typescript" alt="TypeScript logo" />
-                    </a>
-                </header>
-            </div>
-            <div>
-                <span id="counter" class="pill">Click Count: 0</span>
-                <p>Edit <code>index.html</code> and save to reload the scene</p>
-            </div>
-            <p class="read-the-docs">Click on the PlayCanvas and TypeScript logos to learn more</p>
-        </div>
+        <p id="counter" class="counter">Click count: 0</p>
         <script type="module" src="/src/main.ts"></script>
     </body>

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

@@ -5,10 +5,11 @@ import { Asset, TEXTURETYPE_RGBP } from 'playcanvas';
 import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
 import { Grid } from 'playcanvas/scripts/esm/grid.mjs';
+import './starter.css';
 import './style.css';
-const HOVER_COLOR = 'orange';
-const DEFAULT_COLOR = 'lightgrey';
+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
@@ -49,7 +50,7 @@ if (skyboxLayer) {
 // 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);
+camera?.entity?.script?.create(CameraControls, { properties: { sceneSize: 3 } });
 grid.entity?.addComponent('script');
 grid.entity?.script?.create(Grid);
@@ -72,5 +73,5 @@ sphere.addEventListener('pointerleave', () => {
 sphere.addEventListener('pointerup', () => {
     count++;
-    counterElement.textContent = `Click Count: ${count}`;
+    counterElement.textContent = `Click count: ${count}`;
 });

package/templates/web-components/interactive-sphere/src/style.css CHANGED Viewed

@@ -1,39 +1,4 @@
-: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;
 }
@@ -67,45 +32,22 @@ pc-app {
     display: block;
 }
-.read-the-docs {
-    color: #888;
-}
-@media (prefers-color-scheme: light) {
-    :root {
-        color: #213547;
-        background-color: #ffffff;
-    }
-    a:hover {
-        color: #747bff;
-    }
-}
-.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;
+.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);
 }