@playcanvas/react

⚡ A full-featured library for interactive 3D in React.

@playcanvas/react is a thin wrapper around PlayCanvas — a battle-tested, real-time 3D engine — designed to get you up and running fast.

Why PlayCanvas React?

@playcanvas/react gets you building fast — without the usual mess of wiring together separate libraries for physics, input or asset management. It's a complete, batteries-included toolkit for interactive 3D experiences in React.

Features

• 🎭 Simple Scene API
• ⏳ Suspenseful asset loading
• 👆 Pointer events
• 🛠️ Physics out of the box
• ⚡ Script component
• 🏗️ Entity Component System

Getting Started

⚡ Start building in minutes with the StackBlitz starter.

Install with your favorite package manager...

npm install @playcanvas/react playcanvas

You can also clone the following starter template.

git clone https://github.com/marklundin/playcanvas-react-template.git

Show me the code

Here's how you render a sphere.

import { Application, Entity } from '@playcanvas/react';
import { Camera, Render } from '@playcanvas/react/components';
import { OrbitControls } from '@playcanvas/react/scripts';

export function AssetViewer() {
  return (
    <Application>
      <Entity position={[0, 2, 0]}>
        <Camera />
        <OrbitControls />
      </Entity>
      <Render type="sphere"/>
    </Application>
  );
}

Et voilà! ✨

Ready to build something?

Now you've got the tools, you're ready to start building. Start with the Getting Started guide for a step-by-step intro, or dive into the examples to see it all in action.

• Building a scene
• Loading a 3D model
• Interaction
• Model Viewer
• Motion
• Physics
• Splats

You can also browse the full documentation or the API reference.

Who's building with @playcanvas/react?

Developers and studios are already using @playcanvas/react in production.

• Snap AI — Real-time 3D interfaces inside Snap's next-gen tools.
• GSplat Share — Share your splats with optional time-limited and password-protected links.
• ✨ Your project here? Submit a PR and we'll feature it.

AI-assisted editors

To get your IDE up to speed, install the PlayCanvas React rules for Cursor:

mkdir -p .cursor/rules && curl -s https://raw.githubusercontent.com/playcanvas/react/main/packages/lib/.playcanvas-react.mdc -o .cursor/rules/playcanvas-react.mdc

Contributing

The monorepo is split into 2 packages:

• @playcanvas/react - The main React library
• @playcanvas/blocks - High-level React components for common 3D use cases

To get set up, run pnpm install from the root of the monorepo. You can then build each package with pnpm run build:lib or pnpm run build:blocks, and run the tests with pnpm test.

All contributions are welcome :heart: