Learn PLAYCANVAS with Real Code Examples

# playcanvas/demo/main.js
const app = new pc.Application(document.getElementById('canvas'), {
    graphicsDeviceOptions: { alpha: true }
});
app.start();

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

app.on('update', function (dt) {
    cube.rotate(10 * dt, 20 * dt, 30 * dt);
});

A basic PlayCanvas program that sets up a scene with a rotating cube.

# playcanvas/demo/sphere.js
const app = new pc.Application(document.getElementById('canvas'), { graphicsDeviceOptions: { alpha: true } });
app.start();

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

app.on('update', function (dt) {
    sphere.rotate(0, 50 * dt, 0);
});

Sets up a scene with a spinning sphere.

# playcanvas/demo/light.js
const app = new pc.Application(document.getElementById('canvas'));
app.start();

const light = new pc.Entity();
light.addComponent('light', { type: 'directional', color: new pc.Color(1, 1, 1) });
app.root.addChild(light);

Adds a directional light to the scene.

# playcanvas/demo/ground.js
const app = new pc.Application(document.getElementById('canvas'));
app.start();

const ground = new pc.Entity();
ground.addComponent('model', { type: 'box', castShadows: false });
ground.setLocalScale(10, 0.1, 10);
app.root.addChild(ground);

Creates a ground plane for the scene.

# playcanvas/demo/multiple_cubes.js
const app = new pc.Application(document.getElementById('canvas'));
app.start();

for (let i = -2; i <= 2; i++) {
    const cube = new pc.Entity();
    cube.addComponent('model', { type: 'box' });
    cube.setPosition(i * 2, 0, 0);
    app.root.addChild(cube);
}

Adds multiple cubes to the scene in a row.

# playcanvas/demo/orbit_camera.js
const app = new pc.Application(document.getElementById('canvas'));
app.start();

const camera = new pc.Entity();
camera.addComponent('camera');
camera.setPosition(0, 5, 10);
app.root.addChild(camera);

app.on('update', function(dt) {
    const t = Date.now() * 0.001;
    camera.setPosition(Math.sin(t) * 10, 5, Math.cos(t) * 10);
    camera.lookAt(pc.Vec3.ZERO);
});

Sets up a camera orbiting the origin automatically.

# playcanvas/demo/textured_cube.js
const app = new pc.Application(document.getElementById('canvas'));
app.start();

const cube = new pc.Entity();
cube.addComponent('model', { type: 'box' });
const material = new pc.StandardMaterial();
material.diffuseMap = new pc.Texture(app.graphicsDevice, {url: 'https://playcanvas.com/assets/textures/crate.png'});
cube.model.material = material;
app.root.addChild(cube);

Applies a texture to a cube.

# playcanvas/demo/cylinder.js
const app = new pc.Application(document.getElementById('canvas'));
app.start();

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

app.on('update', function(dt) {
    cylinder.rotate(30 * dt, 0, 0);
});

Adds a rotating cylinder to the scene.

# playcanvas/demo/bouncing_sphere.js
const app = new pc.Application(document.getElementById('canvas'));
app.start();

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

app.on('update', function(dt) {
    sphere.setPosition(0, Math.abs(Math.sin(Date.now() * 0.002)) * 3, 0);
});

A sphere that bounces up and down over time.

# playcanvas/demo/light_shadow.js
const app = new pc.Application(document.getElementById('canvas'));
app.start();

const light = new pc.Entity();
light.addComponent('light', { type: 'directional', castShadows: true });
light.setEulerAngles(45, 30, 0);
app.root.addChild(light);

Adds a directional light with shadows enabled.