Building Up A Basic Demo With PlayCanvas

Introduction to PlayCanvas

PlayCanvas is a powerful web-based 3D game engine that enables developers to create immersive interactive experiences directly in modern browsers. Unlike traditional game engines that require downloads and installations, PlayCanvas runs entirely in the cloud, offering both a code-based engine approach for experienced programmers and a visual editor for rapid prototyping.

Whether you're building your first 3D scene or developing a complex game, PlayCanvas provides the tools and flexibility to bring your creative visions to life with WebGL technology. This guide walks you through building a basic demo using both the PlayCanvas Engine (code-first approach) and the PlayCanvas Editor (visual-first approach), giving you a comprehensive foundation for your 3D web development journey.

What you'll learn:

• Understanding PlayCanvas products: Engine vs Editor
• Setting up your development environment
• Creating 3D scenes with entities and components
• Lighting, materials, and visual styling
• Script-based animation techniques
• Complete code examples and visual workflows

To learn more about modern web technologies that power 3D experiences, explore our JavaScript development services and discover how we build cutting-edge web applications.

Creating Your First 3D Scene

The Entity-Component System

PlayCanvas uses an Entity-Component System (ECS) architecture where entities are the fundamental objects in your scene, and components provide their behaviors and properties. This modular approach, as described in the MDN PlayCanvas Engine documentation, makes it easy to compose complex objects from simple pieces and modify behavior at runtime.

Entities are containers that exist in the scene hierarchy. They have a transform (position, rotation, scale) but no inherent functionality.

Components attach to entities to add capabilities--camera, light, model, script, physics, and more. Mix and match components to create complex objects.

Creating Entities

In code:

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

In the Editor:

1. Click the "Add Entity" button (plus icon)
2. Select the entity type from the dropdown
3. The entity appears in the Hierarchy and Viewport

Adding a Camera

const camera = new pc.Entity();
camera.addComponent("camera", {
 clearColor: new pc.Color(0.8, 0.8, 0.8)
});
app.root.addChild(camera);
camera.setPosition(0, 0, 7);

The camera is positioned 7 units back on the Z-axis, giving objects room to appear in front of it. Every PlayCanvas project begins with creating the application instance that manages your 3D world, as outlined in the official PlayCanvas getting started guide.

Lighting Your Scene

Directional Light

Directional light simulates sunlight--rays are parallel and come from a specific direction:

const light = new pc.Entity();
light.addComponent("light", {
 type: "directional",
 color: new pc.Color(1, 1, 1),
 intensity: 1
});
app.root.addChild(light);
light.setEulerAngles(45, 30, 0);

Ambient Light

Ambient light fills shadows with base illumination:

app.scene.ambientLight = new pc.Color(0.2, 0.2, 0.2);

A value of 0.2 provides subtle fill without washing out contrast. As explained in the MDN PlayCanvas Engine documentation, ambient light prevents objects from appearing pitch black on their shadowed sides.

Lighting Types

Editor Lighting Workflow

1. New projects include a pre-configured directional light
2. Select the light to adjust intensity, color, and shadows
3. Use gizmos to position point and spot lights
4. Enable "Cast Shadows" for realistic shadow effects

According to the MDN Editor documentation, the Editor simplifies lighting by providing intuitive controls and visual gizmos.

Script-Based Animation

Creating Animation Scripts

PlayCanvas scripts have initialize() for setup and update() for frame-by-frame logic, as described in the MDN PlayCanvas Engine documentation:

// boxAnimation.js
var BoxAnimation = pc.createScript('boxAnimation');

BoxAnimation.prototype.initialize = function() {
 // Setup code runs once
};

BoxAnimation.prototype.update = function(dt) {
 // Called every frame
 this.entity.rotate(dt * 10, dt * 20, dt * 30);
};

Animation Techniques

Continuous Rotation:

this.entity.rotate(dt * 10, dt * 20, dt * 30);

Pulsing Scale:

this.timer += dt;
const scale = Math.abs(Math.sin(this.timer));
this.entity.setLocalScale(1, scale, 1);

Floating Motion:

const y = Math.sin(Date.now() / 1000) * 0.5;
this.entity.setPosition(0, y, 0);

Delta Time (dt)

The update function receives dt (delta time in seconds)--the time since the last frame. Multiply animation values by dt to create frame-rate-independent animations that run at the same speed on all devices. As documented in the MDN guide, using dt ensures smooth animations regardless of frame rate.

Complete Code Example

Here's the complete code for a working PlayCanvas demo with a rotating blue cube, as demonstrated in the MDN PlayCanvas Engine tutorial:

const canvas = document.getElementById("application-canvas");

// Start and init Application
const app = new pc.Application(canvas);
app.start();
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);

// Create camera
const camera = new pc.Entity();
camera.addComponent("camera", { clearColor: new pc.Color(0.8, 0.8, 0.8) });
app.root.addChild(camera);
camera.setPosition(0, 0, 7);

// Create cube
const box = new pc.Entity();
box.addComponent("model", { type: "box" });
app.root.addChild(box);
box.rotate(10, 15, 0);

// Create light
const light = new pc.Entity();
light.addComponent("light");
light.setEulerAngles(45, 30, 0);
app.root.addChild(light);
app.scene.ambientLight = new pc.Color(0.2, 0.2, 0.2);

// Create cube's material
const boxMaterial = new pc.StandardMaterial();
boxMaterial.diffuse.set(0, 0.58, 0.86);
boxMaterial.update();
box.model.meshInstances[0].material = boxMaterial;

// Animation script
const RotateScript = pc.createScript('rotate');
RotateScript.prototype.update = function(dt) {
 this.entity.rotate(dt * 10, dt * 20, dt * 30);
};
box.addComponent('script');
box.script.create('rotate');

// Handle window resize
window.addEventListener("resize", () => {
 app.resizeCanvas(canvas.width, canvas.height);
});

This demo creates:

• A light gray background via camera clear color
• A blue cube with StandardMaterial
• Directional lighting from an angle
• Ambient fill light
• Continuous rotation animation

The PlayCanvas Crash Course provides additional end-to-end game development tutorials covering project setup, asset management, physics, scripting, and animation state graphs for more complex projects.

Taking Your Skills Further

Advanced Topics to Explore

• Physics Simulation: Add realistic object interactions with collision detection and rigidbody dynamics
• Asset Management: Organize imported models, textures, and sounds efficiently
• Animation State Graphs: Create sophisticated character animations with blend trees and transitions
• Particle Systems: Add effects like fire, smoke, sparks, and magic abilities
• UI Systems: Build menus, HUDs, and interactive interfaces
• Audio: Add sound effects and background music to your projects
• Input Handling: Respond to keyboard, mouse, touch, and gamepad input

Learning Resources

• PlayCanvas User Manual: Comprehensive reference for all features
• Tutorials Section: Hundreds of step-by-step guides for specific features
• API Reference: Complete documentation of the JavaScript API
• Community Forum: Get help from experienced developers
• Discord Server: Real-time chat with the PlayCanvas community

Start Building Today

With the fundamentals of PlayCanvas mastered, you have everything you need to start creating your own 3D web experiences. Start with simple projects to solidify your understanding, then gradually tackle more complex features as your skills grow. The PlayCanvas community is welcoming and supportive--don't hesitate to ask questions as you learn!

For teams looking to integrate 3D experiences into their web applications, our custom development services can help you leverage PlayCanvas and other modern web technologies to create compelling interactive experiences.

Sources

1. MDN Web Docs - Building up a basic demo with PlayCanvas Engine
2. MDN Web Docs - Building up a basic demo with PlayCanvas Editor
3. PlayCanvas Developer - Crash Course: Make a Game
4. PlayCanvas Developer - Getting Started