@playcanvas/react

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

@playcanvas/react is a thin wrapper around PlayCanvas - a batteries included library for building interactive 3D content in React. Designed to get you up and running fast.

Why PlayCanvas React?

@playcanvas/react is designed to get 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.

It's built around PlayCanvas - a battle-tested, real-time 3D engine and ships with powerful built-in features out of the box.

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 our playcanvas-react.app/new template.

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 for a step-by-step intro, or jump straight into the Playground to explore real examples in action.

You can also jump straight into the docs or api.

Who’s building with @playcanvas/react?

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

⚡ Snap AI uses @playcanvas/react to build real-time 3D interfaces inside their next-gen tools.
✨ Your project here? Submit a PR and we’ll feature it below.

AI assisted editors

To get your IDE up to speed, you can install the latest MDC rules for cursor. Or grab them here to add them manually.

mkdir -p .cursor/rules && curl -s https://playcanvas-react.vercel.app/rules -o .cursor/rules/playcanvas-react.mdc

Contributing

If you want to build the repo from scratch, check out the following. The monorepo is split into 3 main packages:

@playcanvas/react - This contains the main react library
@playcanvas/blocks - High level React components for common 3D use cases
@playcanvas/docs - The Documentation site.

If you want to run this entire project locally, including docs just npm install and npm run dev from the root of the monorepo. This will install and build all the local dependencies and run a local webserver of the docs.

You can make changes to either the react or blocks lib and build them locally by doing npm run build:lib or npm run build:blocks respectively.

All contributions are welcome ❤️