Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 40 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
## @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/)

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.

<img width="1673" alt="image" src="https://github.com/user-attachments/assets/92053462-f39e-4f6d-94fc-b34e7b9ea266" />
<a href="https://playcanvas-react.vercel.app/examples/splats" target="_blank" >
<img alt="@playcanvas/react" src="https://github.com/user-attachments/assets/159bdadb-1b7d-4334-8acb-c4530b570f2b" />
</a>

### Getting Started

Expand All @@ -17,47 +19,67 @@ Install with your favorite package manager...
```bash
npm install @playcanvas/react playcanvas
```
Create a sphere component

Load an Asset

```jsx
import { Application, Entity } from '@playcanvas/react'
import { Camera } from "@playcanvas/react/components"
import { OrbitControls } from "@playcanvas/react/scripts"
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>
<Entity position={[0, 2, 0]}>
<Camera/>
<OrbitControls />
</Entity>
<Entity >
<Render type="sphere" />
</Entity>
<AssetViewer src="skull.ply" />
</Application>
);
}
};
```

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...
## 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 for high frequency updates
- ⚡ Script component
- 🏗️ Entity Component System

### Learn more
## 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.



Expand Down
Loading