https://github.com/playcanvas/react

Build 3D apps with React
https://github.com/playcanvas/react

3d declarative gaussian react splats webgl webgpu

Last synced: 16 days ago
JSON representation

Build 3D apps with React

• Host: GitHub
• URL: https://github.com/playcanvas/react
• Owner: playcanvas
• License: mit
• Created: 2024-10-11T14:05:21.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2025-05-08T09:37:30.000Z (24 days ago)
• Last Synced: 2025-05-08T10:34:56.024Z (23 days ago)
• Topics: 3d, declarative, gaussian, react, splats, webgl, webgpu
• Language: TypeScript
• Homepage: https://playcanvas-react.vercel.app
• Size: 22.4 MB
• Stars: 216
• Watchers: 7
• Forks: 14
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-playcanvas - PlayCanvas React - Open source React wrapper for the PlayCanvas Engine. (PlayCanvas Products)
• trackawesomelist - PlayCanvas React (⭐115) - Open source React wrapper for the PlayCanvas Engine. (Recently Updated / [Feb 23, 2025](/content/2025/02/23/README.md))

README

        
## @playcanvas/react

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

[![Version](https://img.shields.io/npm/v/@playcanvas/react?style=flat&colorA=333333&colorB=444444)](https://www.npmjs.com/package/@playcanvas/react)

[![Discord](https://img.shields.io/discord/740090768164651008?style=flat&olorA=333333&colorB=444444&label=discord&logo=discord&logoColor=ffffff)](https://discord.com/channels/408617316415307776/408617316415307778)

[![Twitter](https://img.shields.io/twitter/follow/playcanvas?label=%40playcanvas&style=flat&colorA=333333&colorB=333333&logo=x&logoColor=ffffff)](https://x.com/playcanvas)

![Issues](https://img.shields.io/github/issues/playcanvas/react?style=flat&colorA=333333&colorB=444444)

[Docs](https://playcanvas-react.vercel.app) | [Guide](http://playcanvas-react.vercel.app/docs/guide/getting-started) | [Examples](https://playcanvas-react.vercel.app/examples/)



  



### Getting Started

Install with your favorite package manager...

```bash

npm install @playcanvas/react playcanvas

```

Load an Asset

```jsx

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 (

    <>

      

        

        

      

      

    >

  );

};

const App = () => {

  return (

    

      

    

  );

};

```

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](https://playcanvas-react.vercel.app/docs/guide/getting-started) guide for a walk through, or see the [other examples](https://playcanvas-react.vercel.app/examples/) in the Playground.

- [Hello World](http://playcanvas-react.vercel.app/examples/hello-world)

- [Loading a 3d model](http://playcanvas-react.vercel.app/examples/load-a-3D-model)

- [Interaction](http://playcanvas-react.vercel.app/examples/pointer-events)

- [Physics](http://playcanvas-react.vercel.app/examples/physics)

- [Splats](http://playcanvas-react.vercel.app/examples/splats)

## Contributing

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