@playcanvas/react

⚡ A full-featured library for building interactive 3D apps in React — with assets, physics, and events all built in.

Docs | Guide | Examples

Getting Started

Install with your favorite package manager...

npm install @playcanvas/react playcanvas

Load an Asset

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

const AssetViewer = ({ src }) => {
  const { asset } = useSplat(src);
  if (!asset) return null;

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

const App = () => {
  return (
    <Application>
      <AssetViewer src="skull.ply" />
    </Application>
  );
};

Et voilà! ✨

Why @playcanvas/react?

@playcanvas/react gives you everything you need to build 3D apps in React — without pulling in a maze of external libraries.

It ships with powerful built-in features out of the box:

• 🎭 Simple Scene API
• ⏳ Suspenseful Asset loading
• ️👆 Pointer Events
• 🛠️ Physics out of the box
• ⚡ Script component
• 🏗️ 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
• Splats

Contributing

Contributions are welcome! Please open an issue or pull request if you’d like to contribute or report a bug.