JSPM

@playcanvas/react

Docs | Guide | Examples

A lightweight, library for for creating 3D apps in React that supports Physics, Pointer Events, Gaussian Splats and a built-in Scripts out of the box.

Getting Started

⚡ Start building in minutes with our Stackblitz template.

Or for a local npm setup run the following and follow the Getting Started Guide.

npm install @playcanvas/react playcanvas

You can also clone the following starter template.

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

Create a sphere component

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

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

Et voilà! ✨

Assisted AI Development

To get your IDE up to speed, run the following command from the root of your project to install the latest MDC rules. 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

The library is built around the PlayCanvas engine and comes with lots of features for creating more complex content including...

• 🎭 Simple Scene API
• ⏳ Suspenseful Asset loading
• ️👆 Pointer Events
• 🛠️ Physics out of the box
• ⚡ Script component for high frequency updates
• 🏗️ Entity Component System

Learn more

To find out more, check the Getting Started guide for a walk through, or see the other examples in the Playground.

• Hello World
• Loading a 3d model
• Interaction
• Physics