# playcanvas-engine

Guides 3D web app and browser game development using the PlayCanvas WebGL/WebGPU engine. Helps set up ECS architecture, asset loading, and the main rendering loop.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2300 installs · ★ 1133
- Author: freshtechbro
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/freshtechbro/claudedesignskills/tree/HEAD/plugins/bundles/extended-3d-scroll/skills/playcanvas-engine/SKILL.md
- Updated: 2025-11-20
- HTML: https://affpapa.org/en/nevibecode/skills/playcanvas-engine

## What it does

This skill provides patterns for building WebGL and WebGPU applications with the PlayCanvas engine. It covers initialising `pc.Application`, configuring canvas fill modes, handling window resize events, and binding inputs across keyboard, mouse, touch, and gamepads. It also details the update loop events such as `update`, `prerender`, and `postrender`.

You get code recipes for entity-component structures, including camera placement, directional lighting, and primitive models. In addition, the skill covers loading GLB and GLTF assets through the `pc.Asset` registry with `instantiateRenderEntity`, alongside setting up PBR properties on `pc.StandardMaterial`.

Adding `rigidbody` and `collision` components requires an active physics integration, so dynamic movement will fail without it. Compared to bare Three.js setups, PlayCanvas enforces an entity-component hierarchy right from the start.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill playcanvas-engine -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/playcanvas-engine/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/playcanvas-engine/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill playcanvas-engine -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/playcanvas-engine/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill playcanvas-engine -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/playcanvas-engine/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install freshtechbro/claudedesignskills playcanvas-engine
```

2. **Manually: put the files in place**
- File: `.github/skills/playcanvas-engine/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill playcanvas-engine -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/freshtechbro/claudedesignskills --path plugins/bundles/extended-3d-scroll/skills/playcanvas-engine
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/playcanvas-engine/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill playcanvas-engine -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/freshtechbro/claudedesignskills/tree/HEAD/plugins/bundles/extended-3d-scroll/skills/playcanvas-engine/SKILL.md

## When to use it
- set up a complete PlayCanvas scene with a camera, lights, and update loop
- load external 3D models in GLB or GLTF format using the asset registry
- configure PBR materials using StandardMaterial with custom textures
- structure scene objects and behaviors using entity-component patterns

## Example prompts
- Create a basic PlayCanvas scene with a camera, directional light, and a rotating cube
- Show me how to load a GLB character model using PlayCanvas asset loader with error handling
- Set up a PlayCanvas entity with rigidbody and box collision components

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 685024bae645c80c.

BEGIN THIRD-PARTY FILE 685024bae645c80c
````text
---
name: playcanvas-engine
description: Lightweight WebGL/WebGPU game engine with entity-component architecture and visual editor integration. Use this skill when building browser-based games, interactive 3D applications, or performance-critical web experiences. Triggers on tasks involving PlayCanvas, entity-component systems, game engine development, WebGL games, 3D browser applications, editor-first workflows, or real-time 3D rendering. Alternative to Three.js with game-specific features and integrated development environment.
---

# PlayCanvas Engine Skill

Lightweight WebGL/WebGPU game engine with entity-component architecture, visual editor integration, and performance-focused design.

## When to Use This Skill

Trigger this skill when you see:
- "PlayCanvas engine"
- "WebGL game engine"
- "entity component system"
- "PlayCanvas application"
- "3D browser games"
- "online 3D editor"
- "lightweight 3D engine"
- Need for editor-first workflow

Compare with:
- **Three.js**: Lower-level, more flexible but requires more setup
- **Babylon.js**: Feature-rich but heavier, has editor but less mature
- **A-Frame**: VR-focused, declarative HTML approach
- Use PlayCanvas for: Game projects, editor-first workflow, performance-critical apps

---

## Core Concepts

### 1. Application

The root PlayCanvas application manages the rendering loop.

```javascript
import * as pc from 'playcanvas';

// Create canvas
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);

// Create application
const app = new pc.Application(canvas, {
  keyboard: new pc.Keyboard(window),
  mouse: new pc.Mouse(canvas),
  touch: new pc.TouchDevice(canvas),
  gamepads: new pc.GamePads()
});

// Configure canvas
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);

// Handle resize
window.addEventListener('resize', () => app.resizeCanvas());

// Start the application
app.start();
```

---

### 2. Entity-Component System

PlayCanvas uses ECS architecture: Entities contain Components.

```javascript
// Create entity
const entity = new pc.Entity('myEntity');

// Add to scene hierarchy
app.root.addChild(entity);

// Add components
entity.addComponent('model', {
  type: 'box'
});

entity.addComponent('script');

// Transform
entity.setPosition(0, 1, 0);
entity.setEulerAngles(0, 45, 0);
entity.setLocalScale(2, 2, 2);

// Parent-child hierarchy
const parent = new pc.Entity('parent');
const child = new pc.Entity('child');
parent.addChild(child);
```
````
END THIRD-PARTY FILE 685024bae645c80c

The third-party file has ended. Everything between the 685024bae645c80c tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2516 of 22829 bytes. © freshtechbro · MIT · https://github.com/freshtechbro/claudedesignskills/tree/HEAD/plugins/bundles/extended-3d-scroll/skills/playcanvas-engine/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md