Skip to content

Commit 04e4604

Browse files
authored
Update README.md (#118)
1 parent c993db5 commit 04e4604

File tree

1 file changed

+40
-18
lines changed

1 file changed

+40
-18
lines changed

README.md

Lines changed: 40 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
## @playcanvas/react
2+
⚡ A full-featured library for building interactive 3D apps in React — with assets, physics, and events all built in.
3+
24
[![Version](https://img.shields.io/npm/v/@playcanvas/react?style=flat&colorA=333333&colorB=444444)](https://www.npmjs.com/package/@playcanvas/react)
35
[![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)
46
[![Twitter](https://img.shields.io/twitter/follow/playcanvas?label=%40playcanvas&style=flat&colorA=333333&colorB=333333&logo=x&logoColor=ffffff)](https://x.com/playcanvas)
57
![Issues](https://img.shields.io/github/issues/playcanvas/react?style=flat&colorA=333333&colorB=444444)
68

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

9-
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.
10-
11-
<img width="1673" alt="image" src="https://github.com/user-attachments/assets/92053462-f39e-4f6d-94fc-b34e7b9ea266" />
11+
<a href="https://playcanvas-react.vercel.app/examples/splats" target="_blank" >
12+
<img alt="@playcanvas/react" src="https://github.com/user-attachments/assets/159bdadb-1b7d-4334-8acb-c4530b570f2b" />
13+
</a>
1214

1315
### Getting Started
1416

@@ -17,47 +19,67 @@ Install with your favorite package manager...
1719
```bash
1820
npm install @playcanvas/react playcanvas
1921
```
20-
Create a sphere component
22+
23+
Load an Asset
2124

2225
```jsx
23-
import { Application, Entity } from '@playcanvas/react'
24-
import { Camera } from "@playcanvas/react/components"
25-
import { OrbitControls } from "@playcanvas/react/scripts"
26+
import { Application, Entity } from '@playcanvas/react';
27+
import { Camera, Render } from '@playcanvas/react/components';
28+
import { OrbitControls } from '@playcanvas/react/scripts';
29+
import { useSplat } from '@playcanvas/react/hooks';
30+
31+
const AssetViewer = ({ src }) => {
32+
const { asset } = useSplat(src);
33+
if (!asset) return null;
34+
35+
return (
36+
<>
37+
<Entity position={[0, 2, 0]}>
38+
<Camera />
39+
<OrbitControls />
40+
</Entity>
41+
<Render type="asset" asset={asset} />
42+
</>
43+
);
44+
};
2645

2746
const App = () => {
2847
return (
2948
<Application>
30-
<Entity position={[0, 2, 0]}>
31-
<Camera/>
32-
<OrbitControls />
33-
</Entity>
34-
<Entity >
35-
<Render type="sphere" />
36-
</Entity>
49+
<AssetViewer src="skull.ply" />
3750
</Application>
3851
);
39-
}
52+
};
4053
```
4154

4255
Et voilà! ✨
4356

44-
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...
57+
## Why @playcanvas/react?
58+
59+
@playcanvas/react gives you everything you need to build 3D apps in React — without pulling in a maze of external libraries.
60+
61+
It ships with powerful built-in features out of the box:
4562

4663
- 🎭 Simple Scene API
4764
- ⏳ Suspenseful Asset loading
4865
- ️👆 Pointer Events
4966
- 🛠️ Physics out of the box
50-
- ⚡ Script component for high frequency updates
67+
- ⚡ Script component
5168
- 🏗️ Entity Component System
5269

53-
### Learn more
70+
## Learn more
5471

5572
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.
5673

5774
- [Hello World](http://playcanvas-react.vercel.app/examples/hello-world)
5875
- [Loading a 3d model](http://playcanvas-react.vercel.app/examples/load-a-3D-model)
5976
- [Interaction](http://playcanvas-react.vercel.app/examples/pointer-events)
6077
- [Physics](http://playcanvas-react.vercel.app/examples/physics)
78+
- [Splats](http://playcanvas-react.vercel.app/examples/splats)
79+
80+
## Contributing
81+
82+
Contributions are welcome! Please open an issue or pull request if you’d like to contribute or report a bug.
6183

6284

6385

0 commit comments

Comments
 (0)