playcanvas-engine

Build browser-based 3D games and interactive WebGL applications with PlayCanvas entity-component architecture.

Updated Aug 12, 2026
One-click install
npx skills add https://github.com/sixscripts-ai/agent-arena-voice --skill playcanvas-engine-sixscripts-ai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: playcanvas-engine
Source: https://github.com/sixscripts-ai/agent-arena-voice/tree/main/.claude/plugins/claudedesignskills/plugins/bundles/extended-3d-scroll/skills/playcanvas-engine
Command: npx skills add https://github.com/sixscripts-ai/agent-arena-voice --skill playcanvas-engine-sixscripts-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Building 3D games and interactive web experiences requires managing rendering loops, scene hierarchies, physics, assets, and input handling, which involves substantial boilerplate and engine-specific knowledge that slows down development. ## Core Features & Use Cases - Entity-Component System Patterns: Provides complete code patterns for applications, entities, components (model, camera, light, rigidbody, collision), update loops, and custom script lifecycle methods. - Component Generator Script: Includes a Python CLI tool that generates ready-to-use PlayCanvas script components (character controllers, orbit cameras, physics handlers, UI elements, animation state machines) in interactive or command-line mode. - Reference Documentation: Ships API reference, editor workflow guide, and optimization guide covering asset pipelines, publishing, profiling, batching, LOD, and mobile tuning. - Use Case: A developer building a browser game can generate a third-person character controller with the component builder script, wire up physics with Ammo.js, load GLTF models, and follow the optimization guide to hit 60 FPS on mobile. ## Quick Start Ask the AI to create a PlayCanvas scene with a rotating cube, camera, and directional light using the entity-component patterns from this skill.

Frequently Asked Questions about playcanvas-engine

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a PlayCanvas application in JavaScript?

Create a canvas element, instantiate pc.Application with the canvas and input devices, set fill mode and resolution, add entities with components, then call app.start(). The application manages the rendering loop and fires update events each frame.

PlayCanvas vs Three.js: which should I use for browser games?

PlayCanvas provides a game-focused entity-component system, built-in physics, and a visual editor, making it better for game projects. Three.js is lower-level and more flexible but requires more setup for game-specific features.

How do I add physics to a PlayCanvas entity?

Load Ammo.js first, then add a rigidbody component with a body type (static, dynamic, or kinematic) and a collision component defining the shape. Physics will not work until the Ammo library is loaded and assigned to window.Ammo.

Does PlayCanvas support loading GLTF and GLB models?

Yes, create a pc.Asset of type 'container' with the model URL, add it to the asset registry, and call instantiateRenderEntity() once loaded. Error handling is available via the asset's error event.

Why is my PlayCanvas scene not rendering or updating?

The most common cause is forgetting to call app.start() after creating entities. Also verify the canvas fill mode is set, a resize listener is registered, and entities are added to app.root.

How do I optimize PlayCanvas performance on mobile devices?

Disable shadows, reduce pixel ratio, compress textures with Basis or ETC2, batch static geometry, use entity pooling, and keep draw calls under 100. The optimization guide provides a full profiling and tuning checklist.