create-playcanvas 0.5.1 → 0.6.1

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

@@ -12,7 +12,7 @@ function Scene({ onClick }: SceneProps) {
     const [hovering, setHovering] = useState(false);
 
     // Set a material color based on the hover state
-    const diffuse = hovering ? 'orange' : 'lightgrey';
+    const diffuse = hovering ? '#40ccff' : '#e6edf9';
 
     // Create a material for the sphere
     const material = useMaterial({ diffuse });
@@ -38,19 +38,20 @@ function Scene({ onClick }: SceneProps) {
             <Environment envAtlas={envMap} showSkybox={false} />
 
             {/* Render a background grid */}
-            <Entity scale={[1000, 1000, 1000]}>
+            <Entity scale={[12, 12, 12]}>
                 <Script script={Grid} />
             </Entity>
 
             {/* Create a camera entity with camera controls */}
-            <Entity name="camera" position={[4, 1, 4]}>
-                <Camera clearColor="#171717" />
-                <Script script={CameraControls} />
+            <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.5, 0]}
+                position={[0, 0.7, 0]}
+                scale={[1.25, 1.25, 1.25]}
                 onClick={onClick}
                 onPointerOver={() => setHovering(true)}
                 onPointerOut={() => setHovering(false)}

package/templates/react/interactive-sphere/src/index.css

@@ -1,51 +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;
-}
-
-a {
-    font-weight: 500;
-    color: #646cff;
-    text-decoration: inherit;
-}
-a:hover {
-    color: #535bf2;
-}
-
-a > img {
-    vertical-align: middle;
-}
-
 body {
     margin: 0;
-    display: flex;
-    place-items: center;
-    min-width: 320px;
-    min-height: 100vh;
-}
-
-h1 {
-    font-size: 2.4em;
-    line-height: 1.1;
-    opacity: 0.85;
-}
-
-@media (prefers-color-scheme: light) {
-    :root {
-        color: #213547;
-        background-color: #ffffff;
-    }
-    a:hover {
-        color: #747bff;
-    }
+    overflow: hidden;
 }

package/templates/react/model-viewer/src/App.tsx

@@ -30,9 +30,9 @@ function App() {
             {/* Create a camera entity with orbit controls. The sky is HDR, so it needs tone
                 mapping to bring it back into displayable range - without it the whole image blows
                 out to white */}
-            <Entity name="camera" position={[0, 0, 3]}>
+            <Entity name="camera" position={[2.6, 1.5, 3.2]} rotation={[-16, 39, 0]}>
                 <Camera toneMapping={TONEMAP_ACES2} />
-                <Script script={CameraControls} />
+                <Script script={CameraControls} sceneSize={2.5} />
             </Entity>
 
             <Model />

package/templates/react/physics-playground/src/App.tsx

@@ -0,0 +1,85 @@
+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/react/product-configurator/src/App.tsx

@@ -0,0 +1,157 @@
+import { Application, Entity } from '@playcanvas/react';
+import { Camera, Light, Script } from '@playcanvas/react/components';
+import { useApp, useModel } from '@playcanvas/react/hooks';
+import type { ContainerResource, Entity as PcEntity, RenderComponent } from 'playcanvas';
+import { Color, CylinderGeometry, Mesh, MeshInstance, StandardMaterial, TONEMAP_ACES2, Vec2, Vec3 } from 'playcanvas';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
+import { ProceduralSky } from 'playcanvas/scripts/esm/sky/procedural-sky.mjs';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+
+import './product.css';
+import './starter.css';
+
+const PRODUCT_URL = 'https://developer.playcanvas.com/assets/lambo.glb';
+const PAINTS = [
+    { name: 'Crimson', color: '#d6293e', shade: '#9b1731' },
+    { name: 'Arctic', color: '#d8e4e9', shade: '#8fa8b5' },
+    { name: 'Volt', color: '#9acb34', shade: '#3c742d' }
+];
+const CAMERA_FOCUS = new Vec3(0, 0.8, 0);
+const CAMERA_PITCH = new Vec2(-85, -4);
+
+function Product({ color, shade }: { color: string; shade: string }) {
+    const { asset } = useModel(PRODUCT_URL);
+    const root = useRef<PcEntity>(null);
+    const paint = useRef<StandardMaterial>(null);
+    const tone = useRef<StandardMaterial>(null);
+    const resource = asset?.resource as ContainerResource | undefined;
+
+    useLayoutEffect(() => {
+        if (!resource || !root.current) return;
+        const entity = resource.instantiateRenderEntity();
+        entity.setLocalEulerAngles(-90, -25, 0);
+        root.current.addChild(entity);
+
+        const meshes = (entity.findComponents('render') as RenderComponent[]).flatMap((render) => render.meshInstances);
+        const bounds = meshes[0].aabb.clone();
+        meshes.slice(1).forEach((mesh) => bounds.add(mesh.aabb));
+        const scale = 5 / Math.max(bounds.halfExtents.x * 2, bounds.halfExtents.z * 2);
+        entity.setLocalScale(scale, scale, scale);
+        root.current.root.syncHierarchy();
+        bounds.copy(meshes[0].aabb);
+        meshes.slice(1).forEach((mesh) => bounds.add(mesh.aabb));
+        entity.setPosition(-bounds.center.x, 0.03 - bounds.getMin().y, -bounds.center.z);
+
+        const body = meshes.filter((mesh) => mesh.material.name === 'material');
+        const panels = meshes.filter((mesh) => mesh.material.name === 'material_1');
+        paint.current = body[0].material.clone() as StandardMaterial;
+        tone.current = panels[0].material.clone() as StandardMaterial;
+        body.forEach((mesh) => (mesh.material = paint.current!));
+        panels.forEach((mesh) => (mesh.material = tone.current!));
+        return () => {
+            paint.current?.destroy();
+            tone.current?.destroy();
+            paint.current = null;
+            tone.current = null;
+            entity.destroy();
+        };
+    }, [resource]);
+
+    useLayoutEffect(() => {
+        if (!paint.current) return;
+        paint.current.diffuse.fromString(color);
+        tone.current!.diffuse.fromString(shade);
+        paint.current.update();
+        tone.current!.update();
+    }, [color, shade, resource]);
+
+    return <Entity ref={root} name="car" />;
+}
+
+function Studio() {
+    const app = useApp();
+    const ground = useRef<PcEntity>(null);
+
+    useEffect(() => {
+        const entity = ground.current;
+        if (!entity) return;
+
+        const podium = new StandardMaterial();
+        podium.diffuse = new Color(0.3, 0.32, 0.34);
+        podium.metalness = 0.15;
+        podium.gloss = 0.65;
+        podium.update();
+        const cylinder = Mesh.fromGeometry(
+            app.graphicsDevice,
+            new CylinderGeometry({ radius: 4, height: 0.16, heightSegments: 1, capSegments: 128 })
+        );
+        entity.setPosition(0, -0.08, 0);
+        entity.addComponent('render', {
+            meshInstances: [new MeshInstance(cylinder, podium)],
+            castShadows: false,
+            receiveShadows: true
+        });
+
+        return () => {
+            if (entity.render) entity.removeComponent('render');
+            cylinder.destroy();
+            podium.destroy();
+        };
+    }, [app]);
+
+    return <Entity ref={ground} name="studio-ground" />;
+}
+
+function Scene({ color, shade }: { color: string; shade: string }) {
+    return (
+        <>
+            <Entity name="sky">
+                <Script script={ProceduralSky} luminance={0.18} />
+            </Entity>
+            <Entity name="camera" position={[5.5, 3.2, 6.5]} rotation={[-16, 40, 0]}>
+                <Camera fov={40} toneMapping={TONEMAP_ACES2} renderSceneColorMap />
+                <Script
+                    script={CameraControls}
+                    sceneSize={6.2}
+                    focusPoint={CAMERA_FOCUS}
+                    pitchRange={CAMERA_PITCH}
+                    enableFly={false}
+                    enablePan={false}
+                />
+            </Entity>
+            <Entity name="light" rotation={[45, -145, 0]}>
+                <Light type="directional" intensity={2.5} castShadows shadowBias={0.2} normalOffsetBias={0.05} />
+            </Entity>
+            <Studio />
+            <Product color={color} shade={shade} />
+        </>
+    );
+}
+
+function App() {
+    const [paint, setPaint] = useState(PAINTS[0]);
+
+    return (
+        <>
+            <Application>
+                <Scene color={paint.color} shade={paint.shade} />
+            </Application>
+            <div className="hud">
+                <section className="panel">
+                    <h1>Product Configurator</h1>
+                    <p>Choose a paint finish, then drag to orbit.</p>
+                    <div className="controls variants">
+                        {PAINTS.map((item) => (
+                            <button key={item.name} aria-pressed={paint === item} onClick={() => setPaint(item)}>
+                                <span className="finish" style={{ '--color': item.color } as React.CSSProperties} />
+                                {item.name}
+                            </button>
+                        ))}
+                    </div>
+                </section>
+            </div>
+        </>
+    );
+}
+
+export default App;

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

@@ -0,0 +1,84 @@
+import { Application, Entity } from '@playcanvas/react';
+import { Camera, Light, Render, Script } from '@playcanvas/react/components';
+import { useApp, useMaterial } from '@playcanvas/react/hooks';
+import type { Entity as PcEntity } from 'playcanvas';
+import { Grid } from 'playcanvas/scripts/esm/grid.mjs';
+import { useEffect, useRef } from 'react';
+
+import { SceneEditor } from './scene-editor';
+import './starter.css';
+
+function Scene() {
+    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' });
+
+    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');
+        };
+    }, [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} />
+            </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} />
+            </Entity>
+            <Entity name="editor" ref={host} />
+        </>
+    );
+}
+
+function App() {
+    return (
+        <>
+            <Application>
+                <Scene />
+            </Application>
+            <div className="hud">
+                <section className="panel">
+                    <h1>Scene Editor</h1>
+                    <p>Select an object, then translate, rotate or scale it.</p>
+                    <div className="controls">
+                        <button data-target="0" aria-pressed="true">
+                            Cube
+                        </button>
+                        <button data-target="1">Sphere</button>
+                    </div>
+                    <div className="controls">
+                        <button data-mode="translate" aria-pressed="true">
+                            Move
+                        </button>
+                        <button data-mode="rotate">Rotate</button>
+                        <button data-mode="scale">Scale</button>
+                    </div>
+                </section>
+            </div>
+        </>
+    );
+}
+
+export default App;

package/templates/react/splat-viewer/src/App.tsx

@@ -26,9 +26,9 @@ function App() {
     return (
         <Application graphicsDeviceOptions={{ antialias: false }}>
             {/* Create a camera entity with orbit controls */}
-            <Entity name="camera" position={[0, 0, 2.5]}>
-                <Camera />
-                <Script script={CameraControls} />
+            <Entity name="camera" position={[0, 0, 2.8]}>
+                <Camera clearColor="#8f949e" />
+                <Script script={CameraControls} sceneSize={2} />
             </Entity>
 
             <Splat />

package/templates/react/sprite-game/src/App.tsx

@@ -0,0 +1,38 @@
+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 './starter.css';
+
+function App() {
+    const dirt = useMaterial({ emissive: '#734729' });
+    const grass = useMaterial({ emissive: '#479e57' });
+
+    return (
+        <>
+            <Application>
+                <Entity name="camera" position={[0, 0, 10]}>
+                    <Camera projection={1} orthoHeight={4.4} clearColor="#5cb9e6" />
+                </Entity>
+                <Entity name="dirt" position={[0, -3.39, 0]} scale={[20, 2.6, 1]}>
+                    <Render type="box" material={dirt} />
+                </Entity>
+                <Entity name="grass" position={[0, -2, 0]} scale={[20, 0.18, 1]}>
+                    <Render type="box" material={grass} />
+                </Entity>
+                <Entity name="game" position={[0, -2.15, 0]}>
+                    <Script script={SpriteGame} />
+                </Entity>
+            </Application>
+            <div className="hud">
+                <section className="panel">
+                    <h1>Sprite Game</h1>
+                    <p>Use A/D or the arrow keys to move and Space to jump.</p>
+                </section>
+            </div>
+        </>
+    );
+}
+
+export default App;

package/templates/react/third-person-controller/src/App.tsx

@@ -0,0 +1,193 @@
+import { Application, Entity } from '@playcanvas/react';
+import { Camera, Collision, Light, Render, RigidBody } from '@playcanvas/react/components';
+import { useMaterial, usePhysics } from '@playcanvas/react/hooks';
+import type { Entity as PcEntity, StandardMaterial } from 'playcanvas';
+import { useEffect, useRef } from 'react';
+
+import { addThirdPersonController } from './controller';
+import './starter.css';
+
+const BLOCK_SCALE: [number, number, number] = [2.4, 1, 2.4];
+const BLOCK_HALF_EXTENTS: [number, number, number] = [1.2, 0.5, 1.2];
+const BLOCKS: [number, number, number][] = [
+    [-4.5, 0.5, -3.5],
+    [4.2, 0.5, -2.8],
+    [-3.7, 0.5, 3.2],
+    [3.8, 0.5, 3.6]
+];
+const TREES: [number, number, number][] = [
+    [-7, -6, 1.1],
+    [6.5, -6.5, 1.25],
+    [-7.5, 5, 0.9],
+    [7, 5.5, 1.15],
+    [-2.2, -8, 0.85]
+];
+const PINE_LAYERS: [number, number, number][] = [
+    [1.9, 2.1, 1.8],
+    [2.65, 1.6, 1.55],
+    [3.3, 1.1, 1.4]
+];
+
+function Block({
+    name,
+    position,
+    scale,
+    material
+}: {
+    name: string;
+    position: [number, number, number];
+    scale: [number, number, number];
+    material: StandardMaterial;
+}) {
+    return (
+        <Entity name={name} position={position} scale={scale}>
+            <Render type="box" material={material} />
+            <Collision type="box" halfExtents={[scale[0] / 2, scale[1] / 2, scale[2] / 2]} />
+            <RigidBody type="static" />
+        </Entity>
+    );
+}
+
+function Pine({
+    name,
+    position: [x, z],
+    size,
+    wood,
+    leaves,
+    tips
+}: {
+    name: string;
+    position: [number, number];
+    size: number;
+    wood: StandardMaterial;
+    leaves: StandardMaterial;
+    tips: StandardMaterial;
+}) {
+    return (
+        <>
+            <Block
+                name={`${name}-trunk`}
+                position={[x, size * 0.9, z]}
+                scale={[size * 0.38, size * 1.8, size * 0.38]}
+                material={wood}
+            />
+            {PINE_LAYERS.map(([y, width, height], i) => (
+                <Entity
+                    key={i}
+                    name={`${name}-crown-${i}`}
+                    position={[x, size * y, z]}
+                    scale={[size * width, size * height, size * width]}
+                >
+                    <Render type="cone" material={i === 1 ? tips : leaves} />
+                </Entity>
+            ))}
+        </>
+    );
+}
+
+function Scene() {
+    const player = useRef<PcEntity>(null);
+    const camera = useRef<PcEntity>(null);
+    const model = useRef<PcEntity>(null);
+    const { isPhysicsLoaded } = usePhysics();
+    const shirt = useMaterial({ diffuse: '#268bd2' });
+    const skin = useMaterial({ diffuse: '#c78759' });
+    const pants = useMaterial({ diffuse: '#2e4a85' });
+    const ground = useMaterial({ diffuse: '#33662e' });
+    const block = useMaterial({ diffuse: '#57594d' });
+    const wood = useMaterial({ diffuse: '#572e14' });
+    const leaves = useMaterial({ diffuse: '#144d1f' });
+    const tips = useMaterial({ diffuse: '#1f6629' });
+
+    useEffect(() => {
+        if (isPhysicsLoaded && player.current && camera.current && model.current) {
+            return addThirdPersonController(player.current, camera.current, model.current);
+        }
+    }, [isPhysicsLoaded]);
+
+    return (
+        <>
+            <Entity name="camera" ref={camera} position={[0, 3, 6]}>
+                <Camera clearColor="#7ab8e6" />
+            </Entity>
+            <Entity name="light" rotation={[45, 30, 0]}>
+                <Light type="directional" intensity={2.5} castShadows shadowBias={0.2} normalOffsetBias={0.05} />
+            </Entity>
+            <Entity name="ground" position={[0, -0.1, 0]} scale={[20, 0.2, 20]}>
+                <Render type="box" material={ground} />
+                <Collision type="box" halfExtents={[10, 0.1, 10]} />
+                <RigidBody type="static" />
+            </Entity>
+            {BLOCKS.map((position, i) => (
+                <Entity key={i} name={`block-${i}`} position={position} rotation={[0, i * 25, 0]} scale={BLOCK_SCALE}>
+                    <Render type="box" material={block} />
+                    <Collision type="box" halfExtents={BLOCK_HALF_EXTENTS} />
+                    <RigidBody type="static" />
+                </Entity>
+            ))}
+            {TREES.map(([x, z, size], i) => (
+                <Pine
+                    key={i}
+                    name={`tree-${i}`}
+                    position={[x, z]}
+                    size={size}
+                    wood={wood}
+                    leaves={leaves}
+                    tips={tips}
+                />
+            ))}
+            <Block name="fallen-log" position={[0, 0.35, 6]} scale={[3.8, 0.7, 0.7]} material={wood} />
+            <Block name="stump" position={[-1.8, 0.4, -2.2]} scale={[0.9, 0.8, 0.9]} material={wood} />
+            <Entity name="player" ref={player} position={[0, 1.1, 0]}>
+                <Collision type="capsule" radius={0.5} height={2.4} linearOffset={[0, 0.1, 0]} />
+                <RigidBody type="dynamic" mass={70} angularFactor={[0, 0, 0]} />
+                <Entity name="character" ref={model} position={[0, 0.2, 0]}>
+                    <Entity name="body" scale={[0.56, 0.88, 0.38]}>
+                        <Render type="box" material={shirt} />
+                    </Entity>
+                    <Entity name="head" position={[0, 0.76, 0]} scale={[0.52, 0.6, 0.52]}>
+                        <Render type="box" material={skin} />
+                    </Entity>
+                    <Entity name="left-arm" position={[-0.38, 0.44, 0]}>
+                        <Entity position={[0, -0.44, 0]} scale={[0.18, 0.88, 0.32]}>
+                            <Render type="box" material={shirt} />
+                        </Entity>
+                    </Entity>
+                    <Entity name="right-arm" position={[0.38, 0.44, 0]}>
+                        <Entity position={[0, -0.44, 0]} scale={[0.18, 0.88, 0.32]}>
+                            <Render type="box" material={shirt} />
+                        </Entity>
+                    </Entity>
+                    <Entity name="left-leg" position={[-0.15, -0.44, 0]}>
+                        <Entity position={[0, -0.43, 0]} scale={[0.24, 0.86, 0.34]}>
+                            <Render type="box" material={pants} />
+                        </Entity>
+                    </Entity>
+                    <Entity name="right-leg" position={[0.15, -0.44, 0]}>
+                        <Entity position={[0, -0.43, 0]} scale={[0.24, 0.86, 0.34]}>
+                            <Render type="box" material={pants} />
+                        </Entity>
+                    </Entity>
+                </Entity>
+            </Entity>
+        </>
+    );
+}
+
+function App() {
+    return (
+        <>
+            <Application usePhysics>
+                <Scene />
+            </Application>
+            <div className="hud">
+                <section className="panel">
+                    <h1>Third-Person Controller</h1>
+                    <p>Click the scene, then use WASD to move, mouse to orbit and Space to jump.</p>
+                </section>
+            </div>
+        </>
+    );
+}
+
+export default App;