PlayCanvas

Comprehensive guide for PlayCanvas, the web-first 3D graphics platform including the Engine API, Editor, React wrapper, and Web Components. Use when building 3D web applications, games, or interactive experiences with 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 */ }