PlayCanvas
PlayCanvas is an open-source, web-first 3D graphics platform with an MIT-licensed JavaScript engine, a real-time collaborative Editor, a React wrapper, and Web Components.
Covers
- Engine API and standalone usage
- Editor visual development
- PlayCanvas React declarative components
- Web Components HTML-based 3D
- Scripting and ECS architecture
- Graphics, materials, shaders
- Physics simulation
- Animation system
- Asset pipeline
- 2D and UI systems
- Performance optimization
- Publishing to web/mobile/desktop
- Gaussian Splatting
- PCUI framework
Reference Files (30 files)
Docs in references/ — load on demand:
| File | Covers |
|---|---|
getting-started |
Overview, community, OSS |
editor |
Overview + press |
editor-interface |
Toolbar, Hierarchy, Inspector, Viewport, Launch, Settings |
editor-assets |
Assets panel |
editor-scenes |
Scenes, entities, components, templates/prefabs |
editor-scripting |
Editor scripting tools |
editor-publishing-web |
Web, mobile, ads |
editor-version-control |
Branches, checkpoints, merging |
editor-realtime-collaboration |
Collaboration |
editor-editor-api |
Editor extension API |
editor-engine-compatibility |
V1 vs V2 |
editor-faq |
FAQ |
editor-troubleshooting |
Brightness/darkness fixes |
editor-getting-started |
Tutorial |
engine-standalone |
Engine API, standalone, Node.js, migrations, browser support |
graphics |
Cameras, lighting, materials, shaders, particles, layers, batching |
physics |
Rigid body, collision, compound shapes, ammo.js API |
animation |
Anim component, state graphs, events, layer masking |
scripting |
ESM/Classic, lifecycle, attributes, events, debugging, migration |
ecs |
Entity-Component-System |
react |
React installation, scenes, assets, materials, physics, interactivity |
web-components |
HTML tags, installation, tag reference |
2D |
Sprites, 9-slicing, sprite editor, texture packing |
user-interface |
Screen/Element components, localization |
assets |
Asset registry, loading, preloading, formats |
optimization |
GPU profiling, load time, texture compression, device pixel ratio |
api |
REST API endpoints |
account-management |
Organizations, billing |
pcui |
PCUI UI framework |
gaussian-splatting |
3D Gaussian Splatting |
glossary |
Terminology |
security |
Vulnerability reporting |
Key APIs
Core Engine
import * as pc from 'playcanvas';
const app = new pc.Application(canvas);
app.start();
Entity & Component
const entity = new pc.Entity('myEntity');
entity.addComponent('camera', { fov: 60 });
entity.addComponent('script');
entity.script.create('myScript', { attributes: { speed: 10 } });
app.root.addChild(entity);
Asset Loading
app.assets.loadFromUrl('model.glb', 'container', (err, asset) => {
const entity = asset.resource.instantiateRenderEntity();
app.root.addChild(entity);
});
Input
if (app.keyboard.isPressed(pc.KEY_SPACE)) { /* jump */ }
if (app.mouse.isPressed(pc.MOUSEBUTTON_LEFT)) { /* click */ }