create-playcanvas 0.5.0 → 0.6.0

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

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

package/templates/engine/product-configurator/src/main.ts

@@ -0,0 +1,156 @@
+import type { ContainerResource, RenderComponent } from 'playcanvas';
+import {
+    AppBase,
+    AppOptions,
+    Asset,
+    AssetListLoader,
+    CameraComponentSystem,
+    Color,
+    ContainerHandler,
+    CylinderGeometry,
+    Entity,
+    FILLMODE_FILL_WINDOW,
+    LightComponentSystem,
+    Mesh,
+    MeshInstance,
+    RenderComponentSystem,
+    RESOLUTION_AUTO,
+    ScriptComponentSystem,
+    StandardMaterial,
+    TextureHandler,
+    TONEMAP_ACES2,
+    Vec2,
+    Vec3,
+    createGraphicsDevice
+} from 'playcanvas';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
+import { ProceduralSky } from 'playcanvas/scripts/esm/sky/procedural-sky.mjs';
+
+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);
+
+document.body.insertAdjacentHTML(
+    'beforeend',
+    `<div class="hud"><section class="panel"><h1>Product Configurator</h1><p>Choose a paint finish, then drag to orbit.</p><div class="controls variants" id="paints">${PAINTS.map(({ name, color }, i) => `<button aria-pressed="${i === 0}" data-color="${color}"><span class="finish" style="--color:${color}"></span>${name}</button>`).join('')}</div></section></div>`
+);
+
+const canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
+const device = await createGraphicsDevice(canvas);
+device.maxPixelRatio = Math.min(device.maxPixelRatio, 2);
+
+const options = new AppOptions();
+options.graphicsDevice = device;
+options.componentSystems = [RenderComponentSystem, CameraComponentSystem, LightComponentSystem, ScriptComponentSystem];
+options.resourceHandlers = [TextureHandler, ContainerHandler];
+
+const app = new AppBase(canvas);
+app.init(options);
+app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
+app.setCanvasResolution(RESOLUTION_AUTO);
+
+const product = new Asset('car', 'container', { url: PRODUCT_URL });
+await new Promise<void>((resolve) => new AssetListLoader([product], app.assets).load(() => resolve()));
+
+app.start();
+
+const car = (product.resource as ContainerResource).instantiateRenderEntity();
+car.setLocalEulerAngles(-90, -25, 0);
+app.root.addChild(car);
+app.root.syncHierarchy();
+
+const meshes = (car.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);
+car.setLocalScale(scale, scale, scale);
+app.root.syncHierarchy();
+bounds.copy(meshes[0].aabb);
+meshes.slice(1).forEach((mesh) => bounds.add(mesh.aabb));
+car.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');
+const paint = body[0].material.clone() as StandardMaterial;
+const shade = panels[0].material.clone() as StandardMaterial;
+body.forEach((mesh) => (mesh.material = paint));
+panels.forEach((mesh) => (mesh.material = shade));
+paint.diffuse.fromString(PAINTS[0].color);
+shade.diffuse.fromString(PAINTS[0].shade);
+paint.update();
+shade.update();
+
+const sky = new Entity('sky');
+sky.addComponent('script');
+sky.script!.create(ProceduralSky, { properties: { luminance: 0.18 } });
+app.root.addChild(sky);
+
+const camera = new Entity('camera');
+camera.setPosition(5.5, 3.2, 6.5);
+camera.lookAt(CAMERA_FOCUS);
+camera.addComponent('camera', { fov: 40, toneMapping: TONEMAP_ACES2, renderSceneColorMap: true });
+camera.addComponent('script');
+camera.script!.create(CameraControls, {
+    properties: {
+        sceneSize: 6.2,
+        focusPoint: CAMERA_FOCUS,
+        pitchRange: CAMERA_PITCH,
+        enableFly: false,
+        enablePan: false
+    }
+});
+app.root.addChild(camera);
+
+const ground = new Entity('studio-ground');
+const podium = new StandardMaterial();
+podium.diffuse = new Color(0.3, 0.32, 0.34);
+podium.metalness = 0.15;
+podium.gloss = 0.65;
+podium.update();
+
+ground.setPosition(0, -0.08, 0);
+ground.addComponent('render', {
+    meshInstances: [
+        new MeshInstance(
+            Mesh.fromGeometry(
+                device,
+                new CylinderGeometry({ radius: 4, height: 0.16, heightSegments: 1, capSegments: 128 })
+            ),
+            podium
+        )
+    ],
+    castShadows: false,
+    receiveShadows: true
+});
+app.root.addChild(ground);
+
+const light = new Entity('light');
+light.addComponent('light', {
+    type: 'directional',
+    intensity: 2.5,
+    castShadows: true,
+    shadowBias: 0.2,
+    normalOffsetBias: 0.05
+});
+light.setEulerAngles(45, -145, 0);
+app.root.addChild(light);
+
+document.querySelectorAll<HTMLButtonElement>('#paints button').forEach((button, i, buttons) => {
+    button.onclick = () => {
+        paint.diffuse.fromString(PAINTS[i].color);
+        shade.diffuse.fromString(PAINTS[i].shade);
+        paint.update();
+        shade.update();
+        buttons.forEach((item, j) => (item.ariaPressed = String(i === j)));
+    };
+});
+
+window.addEventListener('resize', () => app.resizeCanvas());

package/templates/engine/scene-editor/src/main.ts

@@ -0,0 +1,90 @@
+import {
+    AppBase,
+    AppOptions,
+    CameraComponentSystem,
+    Color,
+    Entity,
+    FILLMODE_FILL_WINDOW,
+    LightComponentSystem,
+    RenderComponentSystem,
+    RESOLUTION_AUTO,
+    ScriptComponentSystem,
+    StandardMaterial,
+    createGraphicsDevice
+} from 'playcanvas';
+import { Grid } from 'playcanvas/scripts/esm/grid.mjs';
+
+import { SceneEditor } from './scene-editor';
+import './starter.css';
+
+document.body.insertAdjacentHTML(
+    'beforeend',
+    '<div class="hud"><section class="panel"><h1>Scene Editor</h1><p>Select an object, then translate, rotate or scale it.</p><div class="controls"><button data-target="0" aria-pressed="true">Cube</button><button data-target="1">Sphere</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></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];
+
+const app = new AppBase(canvas);
+app.init(options);
+app.start();
+app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
+app.setCanvasResolution(RESOLUTION_AUTO);
+
+app.scene.ambientLight = new Color(0.25, 0.28, 0.34);
+
+const coral = new StandardMaterial();
+coral.diffuse = new Color(1, 0.32, 0.27);
+coral.update();
+const cyan = new StandardMaterial();
+cyan.diffuse = new Color(0.14, 0.68, 0.88);
+cyan.update();
+
+const cube = new Entity('cube');
+cube.addComponent('render', { type: 'box', material: coral });
+cube.setPosition(-1.2, 0.5, 0);
+app.root.addChild(cube);
+
+const sphere = new Entity('sphere');
+sphere.addComponent('render', { type: 'sphere', material: cyan });
+sphere.setPosition(1.2, 0.5, 0);
+app.root.addChild(sphere);
+
+const grid = new Entity('grid');
+grid.addComponent('script');
+grid.script!.create(Grid);
+grid.setLocalScale(12, 12, 12);
+app.root.addChild(grid);
+
+const camera = new Entity('camera');
+camera.addComponent('camera', { clearColor: new Color(0.04, 0.06, 0.09) });
+camera.setPosition(4, 3.2, 5);
+camera.lookAt(0, 0.5, 0);
+app.root.addChild(camera);
+
+const light = new Entity('light');
+light.addComponent('light', {
+    type: 'directional',
+    intensity: 2.5,
+    castShadows: true,
+    shadowBias: 0.2,
+    normalOffsetBias: 0.05
+});
+light.setEulerAngles(45, 30, 0);
+app.root.addChild(light);
+
+const editor = new Entity('editor');
+editor.addComponent('script');
+editor.script!.create(SceneEditor, {
+    properties: {
+        camera,
+        targets: [cube, sphere],
+        layer: app.scene.layers.getLayerByName('World')
+    }
+});
+app.root.addChild(editor);
+
+window.addEventListener('resize', () => app.resizeCanvas());

package/templates/engine/splat-viewer/src/main.ts

@@ -4,6 +4,7 @@ import {
     Asset,
     AssetListLoader,
     CameraComponentSystem,
+    Color,
     Entity,
     FILLMODE_FILL_WINDOW,
     GSplatComponentSystem,
@@ -67,8 +68,8 @@ app.root.addChild(toyCat);
 
 // Create camera entity with orbit controls
 const camera = new Entity('camera');
-camera.addComponent('camera');
-camera.setPosition(0, 0, 2.5);
+camera.addComponent('camera', { clearColor: new Color(0.56, 0.58, 0.62) });
+camera.setPosition(0, 0, 2.8);
 camera.addComponent('script');
-camera.script?.create(CameraControls);
+camera.script?.create(CameraControls, { properties: { sceneSize: 2 } });
 app.root.addChild(camera);

package/templates/engine/sprite-game/src/main.ts

@@ -0,0 +1,72 @@
+import {
+    AppBase,
+    AppOptions,
+    CameraComponentSystem,
+    Color,
+    Entity,
+    FILLMODE_FILL_WINDOW,
+    RenderComponentSystem,
+    RESOLUTION_AUTO,
+    ScriptComponentSystem,
+    SpriteComponentSystem,
+    StandardMaterial,
+    createGraphicsDevice
+} from 'playcanvas';
+
+import { SpriteGame } from './sprite-game';
+import './starter.css';
+
+document.body.insertAdjacentHTML(
+    'beforeend',
+    '<div class="hud"><section class="panel"><h1>Sprite Game</h1><p>Use A/D or the arrow keys to move and Space to jump.</p></section></div>'
+);
+
+const canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
+const device = await createGraphicsDevice(canvas);
+device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+
+const options = new AppOptions();
+options.graphicsDevice = device;
+options.componentSystems = [RenderComponentSystem, CameraComponentSystem, SpriteComponentSystem, ScriptComponentSystem];
+
+const app = new AppBase(canvas);
+app.init(options);
+app.start();
+app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
+app.setCanvasResolution(RESOLUTION_AUTO);
+
+const camera = new Entity('camera');
+camera.addComponent('camera', {
+    projection: 1,
+    orthoHeight: 4.4,
+    clearColor: new Color(0.36, 0.73, 0.9)
+});
+camera.setPosition(0, 0, 10);
+app.root.addChild(camera);
+
+const dirtMaterial = new StandardMaterial();
+dirtMaterial.emissive = new Color(0.45, 0.28, 0.16);
+dirtMaterial.update();
+const grassMaterial = new StandardMaterial();
+grassMaterial.emissive = new Color(0.28, 0.62, 0.34);
+grassMaterial.update();
+
+const dirt = new Entity('dirt');
+dirt.addComponent('render', { type: 'box', material: dirtMaterial });
+dirt.setLocalScale(20, 2.6, 1);
+dirt.setPosition(0, -3.39, 0);
+app.root.addChild(dirt);
+
+const grass = new Entity('grass');
+grass.addComponent('render', { type: 'box', material: grassMaterial });
+grass.setLocalScale(20, 0.18, 1);
+grass.setPosition(0, -2, 0);
+app.root.addChild(grass);
+
+const game = new Entity('game');
+game.setPosition(0, -2.15, 0);
+game.addComponent('script');
+game.script!.create(SpriteGame);
+app.root.addChild(game);
+
+window.addEventListener('resize', () => app.resizeCanvas());

package/templates/engine/third-person-controller/src/main.ts

@@ -0,0 +1,216 @@
+import {
+    AppBase,
+    AppOptions,
+    CameraComponentSystem,
+    CollisionComponentSystem,
+    Color,
+    Entity,
+    FILLMODE_FILL_WINDOW,
+    LightComponentSystem,
+    RenderComponentSystem,
+    RESOLUTION_AUTO,
+    RigidBodyComponentSystem,
+    ScriptComponentSystem,
+    StandardMaterial,
+    Vec3,
+    WasmModule,
+    createGraphicsDevice
+} from 'playcanvas';
+
+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]
+];
+
+WasmModule.setConfig('Ammo', {
+    glueUrl: '/ammo/ammo.wasm.js',
+    wasmUrl: '/ammo/ammo.wasm.wasm',
+    fallbackUrl: '/ammo/ammo.js'
+});
+await new Promise<void>((resolve) => {
+    WasmModule.getInstance('Ammo', () => resolve());
+});
+
+document.body.insertAdjacentHTML(
+    'beforeend',
+    '<div class="hud"><section class="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>'
+);
+
+const canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
+const device = await createGraphicsDevice(canvas);
+const options = new AppOptions();
+options.graphicsDevice = device;
+options.componentSystems = [
+    RenderComponentSystem,
+    CameraComponentSystem,
+    LightComponentSystem,
+    ScriptComponentSystem,
+    CollisionComponentSystem,
+    RigidBodyComponentSystem
+];
+
+const app = new AppBase(canvas);
+app.init(options);
+app.start();
+app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
+app.setCanvasResolution(RESOLUTION_AUTO);
+app.scene.ambientLight = new Color(0.28, 0.32, 0.38);
+
+const groundMaterial = new StandardMaterial();
+groundMaterial.diffuse = new Color(0.2, 0.4, 0.18);
+groundMaterial.update();
+const blockMaterial = new StandardMaterial();
+blockMaterial.diffuse = new Color(0.34, 0.35, 0.3);
+blockMaterial.update();
+
+const ground = new Entity('ground');
+ground.setLocalScale(20, 0.2, 20);
+ground.setPosition(0, -0.1, 0);
+ground.addComponent('render', { type: 'box', material: groundMaterial });
+ground.addComponent('collision', { type: 'box', halfExtents: new Vec3(10, 0.1, 10) });
+ground.addComponent('rigidbody', { type: 'static' });
+app.root.addChild(ground);
+
+for (const [i, position] of BLOCKS.entries()) {
+    const block = new Entity(`block-${i}`);
+    block.setPosition(...position);
+    block.setLocalScale(...BLOCK_SCALE);
+    block.setEulerAngles(0, i * 25, 0);
+    block.addComponent('render', { type: 'box', material: blockMaterial });
+    block.addComponent('collision', { type: 'box', halfExtents: new Vec3(...BLOCK_HALF_EXTENTS) });
+    block.addComponent('rigidbody', { type: 'static' });
+    app.root.addChild(block);
+}
+
+const wood = new StandardMaterial();
+wood.diffuse = new Color(0.34, 0.18, 0.08);
+wood.update();
+const leaves = new StandardMaterial();
+leaves.diffuse = new Color(0.08, 0.3, 0.12);
+leaves.update();
+const tips = new StandardMaterial();
+tips.diffuse = new Color(0.12, 0.4, 0.16);
+tips.update();
+const prop = (
+    name: string,
+    position: [number, number, number],
+    scale: [number, number, number],
+    material: StandardMaterial
+) => {
+    const entity = new Entity(name);
+    entity.setPosition(...position);
+    entity.setLocalScale(...scale);
+    entity.addComponent('render', { type: 'box', material });
+    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);
+};
+for (const [i, [x, z, size]] of TREES.entries()) {
+    prop(`tree-${i}-trunk`, [x, size * 0.9, z], [size * 0.38, size * 1.8, size * 0.38], wood);
+    for (const [j, [y, width, height]] of PINE_LAYERS.entries()) {
+        const crown = new Entity(`tree-${i}-crown-${j}`);
+        crown.setPosition(x, size * y, z);
+        crown.setLocalScale(size * width, size * height, size * width);
+        crown.addComponent('render', { type: 'cone', material: j === 1 ? tips : leaves });
+        app.root.addChild(crown);
+    }
+}
+prop('fallen-log', [0, 0.35, 6], [3.8, 0.7, 0.7], wood);
+prop('stump', [-1.8, 0.4, -2.2], [0.9, 0.8, 0.9], wood);
+
+const player = new Entity('player');
+player.setPosition(0, 1.1, 0);
+player.addComponent('collision', {
+    type: 'capsule',
+    radius: 0.5,
+    height: 2.4,
+    linearOffset: new Vec3(0, 0.1, 0)
+});
+player.addComponent('rigidbody', { type: 'dynamic', mass: 70, angularFactor: Vec3.ZERO });
+app.root.addChild(player);
+
+const shirt = new StandardMaterial();
+shirt.diffuse = new Color(0.15, 0.55, 0.9);
+shirt.update();
+const skin = new StandardMaterial();
+skin.diffuse = new Color(0.78, 0.53, 0.35);
+skin.update();
+const pants = new StandardMaterial();
+pants.diffuse = new Color(0.18, 0.29, 0.52);
+pants.update();
+
+const model = new Entity('character');
+model.setLocalPosition(0, 0.2, 0);
+const part = (
+    parent: Entity,
+    name: string,
+    position: [number, number, number],
+    scale: [number, number, number],
+    material: StandardMaterial
+) => {
+    const entity = new Entity(name);
+    entity.addComponent('render', { type: 'box', material });
+    entity.setLocalPosition(...position);
+    entity.setLocalScale(...scale);
+    parent.addChild(entity);
+};
+const limb = (
+    name: string,
+    position: [number, number, number],
+    offset: number,
+    scale: [number, number, number],
+    material: StandardMaterial
+) => {
+    const joint = new Entity(name);
+    joint.setLocalPosition(...position);
+    model.addChild(joint);
+    part(joint, `${name}-mesh`, [0, offset, 0], scale, material);
+};
+part(model, 'body', [0, 0, 0], [0.56, 0.88, 0.38], shirt);
+part(model, 'head', [0, 0.76, 0], [0.52, 0.6, 0.52], skin);
+limb('left-arm', [-0.38, 0.44, 0], -0.44, [0.18, 0.88, 0.32], shirt);
+limb('right-arm', [0.38, 0.44, 0], -0.44, [0.18, 0.88, 0.32], shirt);
+limb('left-leg', [-0.15, -0.44, 0], -0.43, [0.24, 0.86, 0.34], pants);
+limb('right-leg', [0.15, -0.44, 0], -0.43, [0.24, 0.86, 0.34], pants);
+player.addChild(model);
+
+const camera = new Entity('camera');
+camera.addComponent('camera', { clearColor: new Color(0.48, 0.72, 0.9) });
+camera.setPosition(0, 3, 6);
+app.root.addChild(camera);
+addThirdPersonController(player, camera, model);
+
+const light = new Entity('light');
+light.addComponent('light', {
+    type: 'directional',
+    intensity: 2.5,
+    castShadows: true,
+    shadowBias: 0.2,
+    normalOffsetBias: 0.05
+});
+light.setEulerAngles(45, 30, 0);
+app.root.addChild(light);
+
+window.addEventListener('resize', () => app.resizeCanvas());