Skip to content

Commit 221ba90

Browse files
authored
Docs update (#70)
* Update nextra and nextra-theme-docs dependencies to latest versions * Update README files to enhance clarity and improve installation instructions * Enhance documentation with new inline buttons for CodeSandbox and Playground, and fix minor typos in descriptions * Fix typo in README example link for loading a 3D model * Remove unused LoadingSpinner import from HomePageExample component
1 parent f9e93dc commit 221ba90

File tree

8 files changed

+423
-229
lines changed

8 files changed

+423
-229
lines changed

README.md

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,62 +4,62 @@
44
[![Twitter](https://img.shields.io/twitter/follow/playcanvas?label=%40playcanvas&style=flat&colorA=333333&colorB=333333&logo=x&logoColor=ffffff)](https://x.com/playcanvas)
55
![Issues](https://img.shields.io/github/issues/playcanvas/react?style=flat&colorA=333333&colorB=444444)
66

7-
A lightweight, declarative library for for creating 3D apps that supports Physics, Pointer Events, Gaussian Splats and a built-in Scripting API straight out of the box.
7+
[Docs](https://playcanvas-react.vercel.app) | [Guide](http://localhost:3001/docs/guide/getting-started) | [Examples](http://localhost:3001/examples/)
88

9-
<img width="1673" alt="image" src="https://github.com/user-attachments/assets/92053462-f39e-4f6d-94fc-b34e7b9ea266" />
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.
1010

11-
[Documentation](https://playcanvas-react.vercel.app)
11+
<img width="1673" alt="image" src="https://github.com/user-attachments/assets/92053462-f39e-4f6d-94fc-b34e7b9ea266" />
1212

1313
### Getting Started
1414

15-
Install the package via npm:
15+
Install with your favorite package manager...
1616

1717
```bash
18-
npm install @playcanvas/react react react-dom playcanvas --save
18+
npm install @playcanvas/react react react-dom playcanvas
1919
```
20-
Then, in your React app...
20+
Create a sphere component
2121

2222
```jsx
2323
import { Application, Entity } from '@playcanvas/react'
2424
import { Camera } from "@playcanvas/react/components"
2525
import { OrbitControls } from "@playcanvas/react/scripts"
2626

27-
const App = (lambo) => {
27+
const App = () => {
2828
return (
2929
<Application>
3030
<Entity position={[0, 2, 0]}>
3131
<Camera/>
3232
<OrbitControls />
3333
</Entity>
3434
<Entity >
35-
<Container asset={lambo} />
35+
<Render type="sphere" />
3636
</Entity>
3737
</Application>
3838
);
3939
}
4040
```
4141

42-
#### Features
42+
Et voilà! ✨
43+
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...
4345

44-
- Simple declarative API for creating 3D apps
45-
- Supports Asset loading with Suspense boundaries.
46-
- PointerEvents with event bubbling
47-
- Supports [Physics]((https://github.com/kripken/ammo.js)) out of the box
48-
- Imperative Scripting API for the `<Script/>` component for high performance updates.
49-
- Extensible Entity Component System that allows you to add new features.
46+
- 🎭 Simple Scene API
47+
- ⏳ Suspenseful Asset loading
48+
- ️👆 Pointer Events
49+
- 🛠️ Physics out of the box
50+
- Script component for high frequency updates
51+
- 🏗️ Entity Component System
5052

51-
#### Learning more
53+
### Learn more
5254

53-
With @playcanvas/react you can add interactive 3D content directly within a React project using the same familiar JSX syntax as the rest of your app. The entire React ecosystem such as it's powerful state management and dev tools are available, so you can make live changes and preserve all of your 3D state.
55+
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.
5456

55-
`@playcanvas/react` is built around the popular PlayCanvas engine. If you're not familiar with it or React, it's worth checking out the docs for both. Much of the `@playcanvas/react` api is a thin wrapper around the Entity Component System (ECS) used in PlayCanvas, so even a basic understanding of this is helpful.
57+
- [Hello World](http://localhost:3001/examples/hello-world)
58+
- [Loading a 3d model](http://localhost:3001/examples/load-a-3D-model)
59+
- [Interaction](http://localhost:3001/examples/pointer-events)
60+
- [Physics](http://localhost:3001/examples/physics)
5661

57-
You can learn more about PlayCanvas on the [developer site](https://developer.playcanvas.com/) and through the [tutorials](https://developer.playcanvas.com/tutorials/). Similarly the React docs has a [great tutorial section](https://react.dev/learn)
5862

59-
### Contributing
6063

61-
We welcome contributions! Please read our [Contributing Guide](https://github.com/playcanvas/engine/blob/main/.github/CONTRIBUTING.md) to get started.
6264

63-
### Support
6465

65-
If you encounter any issues or have questions, please open an issue on our [GitHub repository](https://github.com/playcanvas/playcanvas-react/issues).

0 commit comments

Comments
 (0)