Playcanvas Engine

# PlayCanvas Examples

Comprehensive collection of PlayCanvas examples, patterns, and use cases.

---

## Table of Contents

1. [Basic Examples](#basic-examples)
2. [3D Graphics](#3d-graphics)
3. [Physics & Interaction](#physics--interaction)
4. [Animation](#animation)
5. [User Interface](#user-interface)
6. [Audio](#audio)
7. [Performance](#performance)
8. [Integration Patterns](#integration-patterns)

---

## Basic Examples

### 1. Hello Cube

Minimal PlayCanvas scene with rotating cube:

```javascript
const canvas = document.getElementById('canvas');
const app = new pc.Application(canvas);

app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);

// Camera
const camera = new pc.Entity('camera');
camera.addComponent('camera', {
    clearColor: new pc.Color(0.2, 0.3, 0.4)
});
camera.setPosition(0, 0, 5);
app.root.addChild(camera);

// Light
const light = new pc.Entity('light');
light.addComponent('light');
light.setEulerAngles(45, 45, 0);
app.root.addChild(light);

// Cube
const cube = new pc.Entity('cube');
cube.addComponent('model', { type: 'box' });
app.root.addChild(cube);

// Rotate cube
app.on('update', (dt) => {
    cube.rotate(10 * dt, 20 * dt, 30 * dt);
});

app.start();
```

---

### 2. Multiple Objects

Creating multiple objects in a scene:

```javascript
const shapes = ['box', 'sphere', 'cylinder', 'cone', 'capsule'];
const colors = [
    new pc.Color(1, 0, 0),  // Red
    new pc.Color(0, 1, 0),  // Green
    new pc.Color(0, 0, 1),  // Blue
    new pc.Color(1, 1, 0),  // Yellow
    new pc.Color(1, 0, 1)   // Magenta
];

shapes.forEach((shape, i) => {
    const entity = new pc.Entity(shape);
    entity.addComponent('model', { type: shape });

    // Position in grid
    entity.setPosition((i - 2) * 2, 0, 0);

    // Create material
    const material = new pc.StandardMaterial();
    material.diffuse = colors[i];
    material.update();
    entity.model.material = material;

    app.root.addChild(entity);
});
```

---

### 3. Loading 3D Models

Load GLTF/GLB models:

```javascript
// Create asset for model
const asset = new pc.Asset('model', 'container', {
    url: 'path/to/model.glb'
});

app.assets.add(asset);

// Load asset
app.assets.load(asset);

asset.ready((asset) => {
    const entity = asset.resource.instantiateRenderEntity();
    entity.setPosition(0, 0, 0);
    app.root.addChild(entity);
});

asset.on('error', (err) => {
    console.error('Failed to load model:', err);
});
```

---

## 3D Graphics

### 1. Materials & Textures

PBR material with textures:

```javascript
// Create material
const material = new pc.StandardMaterial();

// Diffuse (albedo) texture
const diffuseAsset = new pc.Asset('diffuse', 'texture', {
    url: 'textures/albedo.jpg'
});
app.assets.add(diffuseAsset);
app.assets.load(diffuseAsset);

diffuseAsset.ready(() => {
    material.diffuseMap = diffuseAsset.resource;
    material.update();
});

// Normal map
const normalAsset = new pc.Asset('normal', 'texture', {
    url: 'textures/normal.jpg'
});
app.assets.add(normalAsset);
app.assets.load(normalAsset);

normalAsset.ready(() => {
    material.normalMap = normalAsset.resource;
    material.update();
});

// Metalness
material.metalness = 0.7;
material.gloss = 0.8;

// Apply to entity
entity.model.material = material;
```

---

### 2. Dynamic Lighting

Multiple light types:

```javascript
// Directional Light (Sun)
const sun = new pc.Entity('sun');
sun.addComponent('light', {
    type: 'directional',
    color: new pc.Color(1, 1, 0.9),
    intensity: 1.5,
    castShadows: true,
    shadowBias: 0.2,
    shadowDistance: 40
});
sun.setEulerAngles(45, 30, 0);
app.root.addChild(sun);

// Point Light
const pointLight = new pc.Entity('pointLight');
pointLight.addComponent('light', {
    type: 'point',
    color: new pc.Color(1, 0, 0),
    intensity: 1,
    range: 10,
    castShadows: false
});
pointLight.setPosition(0, 2, 0);
app.root.addChild(pointLight);

// Spot Light
const spotLight = new pc.Entity('spot