create-playcanvas 0.16.1 → 0.17.0

package/templates/react/first-person-game/src/App.tsx

@@ -0,0 +1,140 @@
+import { Application, Entity } from '@playcanvas/react';
+import { Camera, Collision, Light, RigidBody, Script } from '@playcanvas/react/components';
+import { useAppEvent, useModel, usePhysics } from '@playcanvas/react/hooks';
+import type { Entity as PcEntity } from 'playcanvas';
+import { SHADOW_PCF5_32F, TONEMAP_ACES2 } from 'playcanvas';
+import { ProceduralSky } from 'playcanvas/scripts/esm/sky/procedural-sky.mjs';
+import { useCallback, useRef, useState } from 'react';
+
+import { CARDS, Game } from './game';
+import type { GameEvents, GameState } from './game';
+import './game.css';
+import './starter.css';
+
+// Swap this for your own level - files in public/ are served next to index.html, so use a ./ path.
+// The game finds its nodes by name: a mesh called `level` to look at, one called `collision` to
+// stand on, any number called `orb-…` to collect, and one called `spawn` where the player starts
+const LEVEL_URL = './level.glb';
+
+function Scene({
+    onState,
+    onJoystick
+}: {
+    onState: GameEvents['game:state'];
+    onJoystick: GameEvents['joystick:left'];
+}) {
+    const [sun, setSun] = useState<PcEntity | null>(null);
+    const [player, setPlayer] = useState<PcEntity | null>(null);
+    const [camera, setCamera] = useState<PcEntity | null>(null);
+    const { asset: level } = useModel(LEVEL_URL);
+    const { isPhysicsLoaded } = usePhysics();
+
+    useAppEvent<GameEvents>('game:state', onState);
+    useAppEvent<GameEvents>('joystick:left', onJoystick);
+
+    return (
+        <>
+            {/* The sun is a directional light that the sky keeps pointing the way its own sun does.
+                Its shadows reach 45 m, far enough to cross the yard from any corner, split into
+                four cascades because one shadow map over that distance is too coarse up close */}
+            <Entity name="sun" ref={setSun}>
+                <Light
+                    type="directional"
+                    intensity={2}
+                    castShadows
+                    shadowDistance={45}
+                    numCascades={4}
+                    shadowResolution={2048}
+                    shadowType={SHADOW_PCF5_32F}
+                    shadowBias={0.2}
+                    normalOffsetBias={0.05}
+                />
+            </Entity>
+
+            {/* The procedural sky is both the background and the ambient light. Its default
+                luminance is scene-scale bright, so turn it down to keep the yard out of clipping */}
+            <Entity name="sky">
+                {sun && <Script script={ProceduralSky} luminance={0.3} azimuth={150} elevation={45} sunLight={sun} />}
+            </Entity>
+
+            {/* The sky lights the shade blue. A warm light from the other side, with no shadows of
+                its own, stands in for the sunlight the ground bounces back, so the shade stays soft
+                and the sand warm */}
+            <Entity name="fill" rotation={[60, -30, 0]}>
+                <Light type="directional" intensity={0.7} color="#ffdbb3" />
+            </Entity>
+
+            {/* The player is a capsule the physics moves, with the camera at eye height. The game
+                places it at the level's spawn point and gives it a first-person controller */}
+            <Entity name="player" ref={setPlayer}>
+                <Collision type="capsule" radius={0.45} height={1.8} />
+                <RigidBody type="dynamic" mass={80} angularFactor={[0, 0, 0]} />
+                {/* The sky is HDR, so the camera needs tone mapping to bring it back into
+                    displayable range */}
+                <Entity name="camera" ref={setCamera} position={[0, 0.65, 0]}>
+                    <Camera fov={80} toneMapping={TONEMAP_ACES2} />
+                </Entity>
+            </Entity>
+
+            {/* The game needs the level loaded, physics running and the player in the scene */}
+            {level && isPhysicsLoaded && player && camera && (
+                <Entity name="game">
+                    <Script script={Game} level={level} player={player} camera={camera} />
+                </Entity>
+            )}
+        </>
+    );
+}
+
+function App() {
+    const [hud, setHud] = useState<{ state: GameState; found: number; total: number; seconds: number }>();
+    const joystick = useRef<HTMLDivElement>(null);
+    const knob = useRef<HTMLDivElement>(null);
+
+    // The HUD follows the game's state
+    const onState = useCallback<GameEvents['game:state']>((state, found, total, seconds) => {
+        setHud({ state, found, total, seconds });
+    }, []);
+
+    // A thumb on the left of the screen steers, and the circle and knob show where it is. They move
+    // with every touch event, so they are placed directly rather than through React state
+    const onJoystick = useCallback<GameEvents['joystick:left']>((baseX, baseY, knobX, knobY) => {
+        if (!joystick.current || !knob.current) return;
+        joystick.current.hidden = knob.current.hidden = baseX < 0;
+        joystick.current.style.left = `${baseX}px`;
+        joystick.current.style.top = `${baseY}px`;
+        knob.current.style.left = `${knobX}px`;
+        knob.current.style.top = `${knobY}px`;
+    }, []);
+
+    const card = hud && CARDS[hud.state];
+
+    return (
+        <>
+            <Application usePhysics>
+                <Scene onState={onState} onJoystick={onJoystick} />
+            </Application>
+            <div className="hud">
+                {hud && (
+                    <header className="status">
+                        <span>
+                            {hud.found} / {hud.total}
+                        </span>
+                        <span>{hud.seconds}s</span>
+                    </header>
+                )}
+                {card && (
+                    <section className="panel card">
+                        <h1>{card.title}</h1>
+                        <p>{card.hint}</p>
+                    </section>
+                )}
+                <div className="crosshair" />
+                <div className="joystick" ref={joystick} hidden />
+                <div className="joystick-knob" ref={knob} hidden />
+            </div>
+        </>
+    );
+}
+
+export default App;

package/templates/react/{sprite-game → platformer}/src/App.tsx

@@ -2,7 +2,7 @@ import { Application, Entity } from '@playcanvas/react';
 import { Camera, Render, Script } from '@playcanvas/react/components';
 import { useMaterial } from '@playcanvas/react/hooks';
 
-import { SpriteGame } from './sprite-game';
+import { Platformer } from './platformer';
 import './starter.css';
 
 function Scene() {
@@ -21,7 +21,7 @@ function Scene() {
                 <Render type="box" material={grass} />
             </Entity>
             <Entity name="game" position={[0, -2.15, 0]}>
-                <Script script={SpriteGame} />
+                <Script script={Platformer} />
             </Entity>
         </>
     );
@@ -35,7 +35,7 @@ function App() {
             </Application>
             <div className="hud">
                 <section className="panel">
-                    <h1>Sprite Game</h1>
+                    <h1>Platformer</h1>
                     <p>Use A/D or the arrow keys to move and Space to jump.</p>
                 </section>
             </div>

package/templates/react/{third-person-controller → third-person-game}/src/App.tsx

@@ -185,7 +185,7 @@ function App() {
             </Application>
             <div className="hud">
                 <section className="panel">
-                    <h1>Third-Person Controller</h1>
+                    <h1>Third-Person Game</h1>
                     <p>Click the scene, then use WASD to move, mouse to orbit and Space to jump.</p>
                 </section>
             </div>

package/templates/react/{vr-starter → vr}/src/App.tsx

@@ -83,7 +83,7 @@ function App() {
             </Application>
             <div className="hud">
                 <section className="panel">
-                    <h1>VR Starter</h1>
+                    <h1>Virtual Reality</h1>
                     <p id="xr-status">Checking VR support…</p>
                     <div className="controls">
                         <button id="xr-button" disabled>

package/templates/web-components/{ar-placement → ar}/index.html

@@ -4,7 +4,7 @@
         <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>
+        <title>Augmented Reality</title>
     </head>
     <body>
         <pc-app alpha>
@@ -34,7 +34,7 @@
         </pc-app>
         <div class="hud">
             <section class="panel">
-                <h1>AR Placement</h1>
+                <h1>Augmented Reality</h1>
                 <p id="xr-status">Checking AR support…</p>
                 <div class="controls"><button id="xr-button" disabled>Start AR</button></div>
             </section>

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

@@ -16,13 +16,13 @@
     },
     "dependencies": {
         "@playcanvas/web-components": "^0.30.0",
-        "playcanvas": "^2.24.0"
+        "playcanvas": "^2.24.1"
     },
     "devDependencies": {
         "@playcanvas/eslint-config": "3.0.0",
         "@playcanvas/inspector": "^0.5.0",
         "eslint": "^9.39.5",
-        "prettier": "^3.10.0",
+        "prettier": "^3.10.1",
         "typescript": "~6.0.3",
         "vite": "^8.3.8"
     },

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

@@ -0,0 +1,80 @@
+<!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 Game</title>
+    </head>
+    <body>
+        <pc-app>
+            <!-- Swap this for your own level - files in public/ are served next to index.html, so use a ./ path.
+                 The game finds its nodes by name: a mesh called `level` to look at, one called
+                 `collision` to stand on, any number called `orb-…` to collect, and one called `spawn`
+                 where the player starts -->
+            <pc-asset id="level" src="./level.glb"></pc-asset>
+
+            <!-- Physics runs in Ammo, a WebAssembly module -->
+            <pc-wasm name="Ammo" glue="./ammo/ammo.wasm.js" wasm="./ammo/ammo.wasm.wasm"></pc-wasm>
+
+            <pc-scene>
+                <!-- The sun is a directional light that the sky keeps pointing the way its own sun does.
+                     Its shadows reach 45 m, far enough to cross the yard from any corner, split into
+                     four cascades because one shadow map over that distance is too coarse up close -->
+                <pc-entity name="sun">
+                    <pc-light
+                        type="directional"
+                        intensity="2"
+                        cast-shadows
+                        shadow-distance="45"
+                        num-cascades="4"
+                        shadow-resolution="2048"
+                        shadow-type="pcf5-32f"
+                        shadow-bias="0.2"
+                        normal-offset-bias="0.05"
+                    ></pc-light>
+                </pc-entity>
+
+                <!-- The procedural sky is both the background and the ambient light. The script is
+                     attached in src/main.ts -->
+                <pc-entity name="sky"></pc-entity>
+
+                <!-- The sky lights the shade blue. A warm light from the other side, with no shadows of
+                     its own, stands in for the sunlight the ground bounces back, so the shade stays soft
+                     and the sand warm -->
+                <pc-entity name="fill" rotation="60 -30 0">
+                    <pc-light type="directional" intensity="0.7" color="#ffdbb3"></pc-light>
+                </pc-entity>
+
+                <!-- The player is a capsule the physics moves, with the camera at eye height. The game
+                     places it at the level's spawn point and gives it a first-person controller -->
+                <pc-entity name="player">
+                    <pc-collision type="capsule" radius="0.45" height="1.8"></pc-collision>
+                    <pc-rigid-body type="dynamic" mass="80" angular-factor="0 0 0"></pc-rigid-body>
+                    <!-- The sky is HDR, so the camera needs tone mapping to bring it back into
+                         displayable range -->
+                    <pc-entity name="camera" position="0 0.65 0">
+                        <pc-camera fov="80" tonemap="aces2"></pc-camera>
+                    </pc-entity>
+                </pc-entity>
+
+                <!-- The game is attached in src/main.ts -->
+                <pc-entity name="game"></pc-entity>
+            </pc-scene>
+        </pc-app>
+        <div class="hud">
+            <header class="status">
+                <span id="orbs"></span>
+                <span id="time"></span>
+            </header>
+            <section class="panel card" id="card">
+                <h1 id="card-title"></h1>
+                <p id="card-hint"></p>
+            </section>
+            <div class="crosshair"></div>
+            <div class="joystick" id="joystick" hidden></div>
+            <div class="joystick-knob" id="joystick-knob" hidden></div>
+        </div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/web-components/first-person-game/src/main.ts

@@ -0,0 +1,74 @@
+import type { AssetElement, EntityElement } from '@playcanvas/web-components';
+import { whenReady } from '@playcanvas/web-components';
+import type { Asset } from 'playcanvas';
+import { ProceduralSky } from 'playcanvas/scripts/esm/sky/procedural-sky.mjs';
+
+import { CARDS, Game } from './game';
+import type { GameEvents } from './game';
+import './game.css';
+import './starter.css';
+
+// The HUD follows the game's state
+const hud = {
+    orbs: document.getElementById('orbs')!,
+    time: document.getElementById('time')!,
+    card: document.getElementById('card')!,
+    title: document.getElementById('card-title')!,
+    hint: document.getElementById('card-hint')!,
+    joystick: document.getElementById('joystick')!,
+    knob: document.getElementById('joystick-knob')!
+};
+
+const onState: GameEvents['game:state'] = (state, found, total, seconds) => {
+    const card = CARDS[state];
+    hud.orbs.textContent = `${found} / ${total}`;
+    hud.time.textContent = `${seconds}s`;
+    hud.card.hidden = !card;
+    if (card) {
+        hud.title.textContent = card.title;
+        hud.hint.textContent = card.hint;
+    }
+};
+
+// A thumb on the left of the screen steers, and the circle and knob show where it is
+const onJoystick: GameEvents['joystick:left'] = (baseX, baseY, knobX, knobY) => {
+    hud.joystick.hidden = hud.knob.hidden = baseX < 0;
+    hud.joystick.style.left = `${baseX}px`;
+    hud.joystick.style.top = `${baseY}px`;
+    hud.knob.style.left = `${knobX}px`;
+    hud.knob.style.top = `${knobY}px`;
+};
+
+const { app } = await whenReady('pc-app');
+app!.on('game:state', onState);
+app!.on('joystick:left', onJoystick);
+
+// The player is awaited as its components rather than the <pc-entity> holding them - an entity
+// becomes ready before its component children do, and the game needs its rigid body to exist
+await Promise.all([
+    whenReady('pc-entity[name="player"] > pc-collision'),
+    whenReady('pc-entity[name="player"] > pc-rigid-body'),
+    whenReady('pc-entity[name="sun"] > pc-light'),
+    whenReady('pc-camera')
+]);
+const [level, sun, sky, player, camera, game] = await Promise.all([
+    whenReady<AssetElement>('pc-asset#level'),
+    whenReady<EntityElement>('pc-entity[name="sun"]'),
+    whenReady<EntityElement>('pc-entity[name="sky"]'),
+    whenReady<EntityElement>('pc-entity[name="player"]'),
+    whenReady<EntityElement>('pc-entity[name="camera"]'),
+    whenReady<EntityElement>('pc-entity[name="game"]')
+]);
+
+// 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>.
+// The sky's default luminance is scene-scale bright, so turn it down to keep the yard out of clipping
+sky.entity!.addComponent('script');
+sky.entity!.script!.create(ProceduralSky, {
+    properties: { luminance: 0.3, azimuth: 150, elevation: 45, sunLight: sun.entity }
+});
+
+game.entity!.addComponent('script');
+game.entity!.script!.create(Game, {
+    properties: { level: level.asset as Asset<'container'>, player: player.entity, camera: camera.entity }
+});

package/templates/web-components/{sprite-game → platformer}/index.html

@@ -4,7 +4,7 @@
         <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>Sprite Game</title>
+        <title>Platformer</title>
     </head>
     <body>
         <pc-app>
@@ -25,7 +25,7 @@
         </pc-app>
         <div class="hud">
             <section class="panel">
-                <h1>Sprite Game</h1>
+                <h1>Platformer</h1>
                 <p>Use A/D or the arrow keys to move and Space to jump.</p>
             </section>
         </div>

package/templates/web-components/{sprite-game → platformer}/src/main.ts

@@ -1,9 +1,9 @@
 import type { EntityElement } from '@playcanvas/web-components';
 import { whenReady } from '@playcanvas/web-components';
 
-import { SpriteGame } from './sprite-game';
+import { Platformer } from './platformer';
 import './starter.css';
 
 const game = await whenReady<EntityElement>('pc-entity[name="game"]');
 game.entity!.addComponent('script');
-game.entity!.script!.create(SpriteGame);
+game.entity!.script!.create(Platformer);

package/templates/web-components/{third-person-controller → third-person-game}/index.html

@@ -4,7 +4,7 @@
         <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>Third-Person Controller</title>
+        <title>Third-Person Game</title>
     </head>
     <body>
         <pc-app>
@@ -184,7 +184,7 @@
         </pc-app>
         <div class="hud">
             <section class="panel">
-                <h1>Third-Person Controller</h1>
+                <h1>Third-Person Game</h1>
                 <p>Click the scene, then use WASD to move, mouse to orbit and Space to jump.</p>
             </section>
         </div>

package/templates/web-components/{vr-starter → vr}/index.html

@@ -4,7 +4,7 @@
         <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>VR Starter</title>
+        <title>Virtual Reality</title>
     </head>
     <body>
         <pc-app>
@@ -70,7 +70,7 @@
         </pc-app>
         <div class="hud">
             <section class="panel">
-                <h1>VR Starter</h1>
+                <h1>Virtual Reality</h1>
                 <p id="xr-status">Checking VR support…</p>
                 <div class="controls"><button id="xr-button" disabled>Enter VR</button></div>
             </section>

package/templates/_shared/first-person-controller/README.md

@@ -1,7 +0,0 @@
-## First-Person Controller
-
-A physics-backed player controller, camera and simple obstacle course.
-
-### Controls
-
-Click the scene, use WASD to move, move the mouse to look and press Space to jump.

package/templates/_shared/first-person-controller/src/controller.ts

@@ -1,18 +0,0 @@
-import type { Entity, RigidBodyComponentSystem } from 'playcanvas';
-import { FirstPersonController } from 'playcanvas/scripts/esm/first-person-controller.mjs';
-
-export const addFirstPersonController = (player: Entity, camera: Entity) => {
-    (player.rigidbody!.system as RigidBodyComponentSystem).gravity.set(0, -18, 0);
-    if (!player.script) player.addComponent('script');
-    player.script!.create(FirstPersonController, {
-        properties: {
-            camera,
-            jumpForce: 650,
-            speedGround: 55
-        }
-    });
-
-    return () => {
-        player.script?.destroy('firstPersonController');
-    };
-};

package/templates/_shared/spinning-cube/README.md

@@ -1,7 +0,0 @@
-## Spinning Cube
-
-A rotating cube, a camera and a directional light. It is the smallest PlayCanvas scene in the catalog.
-
-### Controls
-
-The scene runs automatically; no input is required.

package/templates/engine/first-person-controller/index.html

@@ -1,19 +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>First-Person Controller</title>
-    </head>
-    <body>
-        <canvas id="application-canvas"></canvas>
-        <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/engine/first-person-controller/src/main.ts

@@ -1,143 +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 { addFirstPersonController } from './controller';
-import './starter.css';
-
-WasmModule.setConfig('Ammo', {
-    glueUrl: './ammo/ammo.wasm.js',
-    wasmUrl: './ammo/ammo.wasm.wasm'
-});
-await new Promise<void>((resolve) => {
-    WasmModule.getInstance('Ammo', () => resolve());
-});
-
-const canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
-
-const device = await createGraphicsDevice(canvas);
-device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
-
-const createOptions = new AppOptions();
-createOptions.graphicsDevice = device;
-createOptions.componentSystems = [
-    RenderComponentSystem,
-    CameraComponentSystem,
-    LightComponentSystem,
-    ScriptComponentSystem,
-    CollisionComponentSystem,
-    RigidBodyComponentSystem
-];
-
-const app = new AppBase(canvas);
-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);
-});
-
-const material = (color: Color) => {
-    const result = new StandardMaterial();
-    result.diffuse = color;
-    result.emissive = new Color(color.r * 0.2, color.g * 0.2, color.b * 0.2);
-    result.update();
-    return result;
-};
-
-const floor = material(new Color(0.28, 0.3, 0.32));
-const wall = material(new Color(0.42, 0.45, 0.48));
-const blue = material(new Color(0.08, 0.29, 0.48));
-const green = material(new Color(0.18, 0.4, 0.22));
-const wood = material(new Color(0.48, 0.27, 0.1));
-const metal = material(new Color(0.28, 0.33, 0.38));
-
-const block = (
-    name: string,
-    position: [number, number, number],
-    scale: [number, number, number],
-    blockMaterial: StandardMaterial
-) => {
-    const entity = new Entity(name);
-    entity.setPosition(...position);
-    entity.setLocalScale(...scale);
-    entity.addComponent('render', { type: 'box', material: blockMaterial });
-    entity.addComponent('collision', {
-        type: 'box',
-        halfExtents: new Vec3(scale[0] / 2, scale[1] / 2, scale[2] / 2)
-    });
-    entity.addComponent('rigidbody', { type: 'static' });
-    app.root.addChild(entity);
-};
-
-block('floor', [0, -0.1, 0], [18, 0.2, 18], floor);
-block('back-wall', [0, 1.5, -9], [18, 3, 0.3], wall);
-block('front-wall', [0, 1.5, 9], [18, 3, 0.3], wall);
-block('left-wall', [-9, 1.5, 0], [0.3, 3, 18], wall);
-block('right-wall', [9, 1.5, 0], [0.3, 3, 18], wall);
-block('blue-crate', [-2, 0.75, -3], [1.5, 1.5, 1.5], blue);
-block('green-crate', [3, 0.5, 1], [2.5, 1, 1], green);
-block('cargo-left-0', [-5.5, 0.75, -5.5], [2, 1.5, 2], wood);
-block('cargo-left-1', [-5.5, 2, -5.5], [1.5, 1, 1.5], blue);
-block('cargo-right-0', [5.3, 0.6, -4.8], [2.4, 1.2, 2], green);
-block('cargo-right-1', [5.3, 1.7, -4.8], [1.5, 1, 1.5], wood);
-block('cargo-center', [0, 0.6, -6.5], [2.2, 1.2, 1.8], blue);
-for (const [i, z] of [-3.5, 0, 3.5].entries()) {
-    block(`shelf-left-post-${i}`, [-6.8, 1.4, z], [0.25, 2.8, 0.25], metal);
-    block(`shelf-right-post-${i}`, [6.8, 1.4, z], [0.25, 2.8, 0.25], metal);
-}
-block('shelf-left-low', [-6.8, 0.65, 0], [1.1, 0.18, 7.5], metal);
-block('shelf-left-high', [-6.8, 2.1, 0], [1.1, 0.18, 7.5], metal);
-block('shelf-right-low', [6.8, 0.65, 0], [1.1, 0.18, 7.5], metal);
-block('shelf-right-high', [6.8, 2.1, 0], [1.1, 0.18, 7.5], metal);
-block('pallet', [-2.5, 0.15, 2.5], [3, 0.3, 2], wood);
-
-const player = new Entity('player');
-player.setPosition(0, 1, 5);
-player.addComponent('collision', { type: 'capsule', radius: 0.45, height: 1.8 });
-player.addComponent('rigidbody', { type: 'dynamic', mass: 80, angularFactor: Vec3.ZERO });
-app.root.addChild(player);
-
-const camera = new Entity('camera');
-camera.addComponent('camera', { clearColor: new Color(0.38, 0.64, 0.86), fov: 80 });
-camera.setLocalPosition(0, 0.65, 0);
-player.addChild(camera);
-addFirstPersonController(player, camera);
-
-const light = new Entity('light');
-light.addComponent('light', {
-    type: 'directional',
-    intensity: 2.5,
-    castShadows: true,
-    shadowBias: 0.2,
-    normalOffsetBias: 0.05
-});
-light.setEulerAngles(50, 30, 0);
-app.root.addChild(light);
-
-const fill = new Entity('fill');
-fill.addComponent('light', { type: 'directional', intensity: 0.8 });
-fill.setEulerAngles(-25, -140, 0);
-app.root.addChild(fill);