https://github.com/playcanvas/react

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

3d declarative gaussian react splats webgl webgpu

Last synced: 4 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 (6 months ago)
• Default Branch: main
• Last Pushed: 2025-04-10T13:14:55.000Z (6 days ago)
• Last Synced: 2025-04-12T03:46:09.062Z (4 days ago)
• Topics: 3d, declarative, gaussian, react, splats, webgl, webgpu
• Language: TypeScript
• Homepage: https://playcanvas-react.vercel.app
• Size: 22.1 MB
• Stars: 201
• Watchers: 7
• Forks: 12
• Open Issues: 5
• 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

[![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/)

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

Install with your favorite package manager...

```bash

npm install @playcanvas/react playcanvas

```

Create a sphere component

```jsx

import { Application, Entity } from '@playcanvas/react'

import { Camera } from "@playcanvas/react/components"

import { OrbitControls } from "@playcanvas/react/scripts"

const App = () => {

  return (

    

        

          

          

        

        

          

        

    

  );

}

```

Et voilà! ✨

The library is built around the [PlayCanvas engine](https://github.com/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](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)