Guide · Open source

How to use PlayCanvas Engine: install and run a 3D scene

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

PlayCanvas Engine is an open-source JavaScript engine for building interactive 3D and 2D apps, games and visualizations that run in a web browser. It is distributed as the npm package playcanvas. This guide shows how to install it, run a minimal example and understand which features it covers, so you can decide whether it fits your project.

PlayCanvasplaycanvas/engine · ★ 17.2k · MIT Install options & downloads

Quick start

1Install the package. Run npm install playcanvas in your project folder.
2Create a canvas. Create a canvas element, add it to the page, and pass it to new Application(canvas).
3Set the canvas size. Use setCanvasFillMode and setCanvasResolution, and resize the canvas on window resize.
4Add entities and components. Create entities with render, camera and light components and add them to app.root.
5Add update logic. Listen to the update event and change entity properties using the delta time.
6Start the app. Call app.start() to begin the render loop.

Install the PlayCanvas Engine package

The engine is published on npm as playcanvas. Install it into your project with the command below. Building the engine from source requires Node.js 18 or newer and npm.

npm install playcanvas

Optionally scaffold a full project

If you want a ready-made project structure instead of starting from an empty file, the create-playcanvas tool can generate one. Run the command below. It is optional; the package install above is enough to use the engine.

npm create playcanvas@latest

Run a Hello World example (spinning cube)

The README's minimal example creates a canvas, starts an Application, adds a box, a camera and a directional light, and rotates the box on every update. Save it in a JavaScript module that your bundler or dev setup can load, then start the app. You can also edit the same code on CodePen using the link in the official README.

The example sets the canvas to fill the window and resizes it when the window changes size. Each frame, the box rotates based on the delta time, so motion stays consistent across frame rates.

Import Application, Color, Entity and related constants from 'playcanvas'.
Create a canvas, append it to the page and pass it to new Application(canvas).
Add entities with components: a render component of type 'box', a camera component and a light component.
Call app.start() to begin the loop.

import { Application, Color, Entity, FILLMODE_FILL_WINDOW, RESOLUTION_AUTO } from 'playcanvas';

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

const app = new Application(canvas);
app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
app.setCanvasResolution(RESOLUTION_AUTO);
window.addEventListener('resize', () => app.resizeCanvas());

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

const camera = new Entity('camera');
camera.addComponent('camera', { clearColor: new Color(0.1, 0.2, 0.3) });
app.root.addChild(camera);
camera.setPosition(0, 0, 3);

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

app.on('update', dt => box.rotate(10 * dt, 20 * dt, 30 * dt));

app.start();

Know what the engine includes

The README lists the main subsystems. Graphics are built on WebGL2 and WebGPU. Physics uses the ammo.js rigid-body engine. Animation is state-based, and input covers mouse, keyboard, touch and gamepad. Sound is 3D positional audio built on the Web Audio API. Assets load through glTF 2.0 with Draco and Basis compression. Scripts can be written in TypeScript or JavaScript.

Graphics: 2D and 3D on WebGL2 and WebGPU
Gaussian Splatting support
XR: AR and VR via WebXR
Physics via ammo.js
Animation, input, 3D sound, glTF asset loading

Find the rest of the ecosystem and docs

The README lists related packages: @playcanvas/react for a React renderer, @playcanvas/web-components for declarative 3D via Custom Elements, and create-playcanvas for scaffolding. A browser-based PlayCanvas Editor is a separate project. The full User Manual, API Reference and Examples are linked from the README.

User Manual: developer.playcanvas.com/user-manual/engine/
API Reference: api.playcanvas.com/engine/
Examples: playcanvas.com/examples/
Forum: forum.playcanvas.com

Build the engine from source

If you want to modify the engine itself, clone the repository, make sure Node.js 18+ is installed, and install dependencies. The README lists two build commands: one builds all engine flavors and type declarations into build, the other builds API docs into docs.

npm run build outputs to build
npm run docs outputs to docs

npm install

What people use it for

Adding an interactive 3D scene or small game to a website
Building WebXR AR or VR experiences that run in the browser
Creating 3D product visualizations or browser-based ads
Writing game behaviors in TypeScript or JavaScript

Frequently asked questions

Is PlayCanvas Engine free to use?

The repository is licensed under the MIT licence, as shown on the npm badge and in the project's LICENSE file. Check the LICENSE file in the repository for the exact terms before shipping a commercial product.

What do I need to install PlayCanvas Engine?

To use the engine, install the playcanvas package with npm. To build the engine from source, the README asks for Node.js 18 or newer and npm.

Do I need to know JavaScript to use PlayCanvas?

Yes. The README's examples assume familiarity with JavaScript modules and npm, so beginners with no JavaScript experience will find it hard to start. The browser-based Editor is a separate project and is not the engine itself.

Can PlayCanvas Engine build native desktop or console games?

The README does not mention native desktop or console builds. It describes the engine as a browser runtime built on WebGL2 and WebGPU, so projects that need native builds should look elsewhere.

How does PlayCanvas compare to Three.js or Babylon.js?

All three are JavaScript 3D libraries for the web. PlayCanvas Engine describes itself as a full game engine with built-in physics via ammo.js, animation, input, 3D sound and asset loading. Three.js and Babylon.js are also common choices; compare them on the features you need.

Does PlayCanvas Engine support AR and VR in the browser?

Yes. The README lists built-in support for immersive AR and VR experiences through WebXR.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

PlayCanvas Engine suits JavaScript or TypeScript developers who want to add 3D scenes, games, WebXR experiences or product visualizations to a website, under an MIT licence. It is a poor fit for people who want a no-code tool, beginners without JavaScript experience, or anyone who needs a native desktop or console build.

Install options & downloads