|
4 | 4 | [](https://x.com/playcanvas) |
5 | 5 |  |
6 | 6 |
|
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/) |
8 | 8 |
|
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. |
10 | 10 |
|
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" /> |
12 | 12 |
|
13 | 13 | ### Getting Started |
14 | 14 |
|
15 | | -Install the package via npm: |
| 15 | +Install with your favorite package manager... |
16 | 16 |
|
17 | 17 | ```bash |
18 | | -npm install @playcanvas/react react react-dom playcanvas --save |
| 18 | +npm install @playcanvas/react react react-dom playcanvas |
19 | 19 | ``` |
20 | | -Then, in your React app... |
| 20 | +Create a sphere component |
21 | 21 |
|
22 | 22 | ```jsx |
23 | 23 | import { Application, Entity } from '@playcanvas/react' |
24 | 24 | import { Camera } from "@playcanvas/react/components" |
25 | 25 | import { OrbitControls } from "@playcanvas/react/scripts" |
26 | 26 |
|
27 | | -const App = (lambo) => { |
| 27 | +const App = () => { |
28 | 28 | return ( |
29 | 29 | <Application> |
30 | 30 | <Entity position={[0, 2, 0]}> |
31 | 31 | <Camera/> |
32 | 32 | <OrbitControls /> |
33 | 33 | </Entity> |
34 | 34 | <Entity > |
35 | | - <Container asset={lambo} /> |
| 35 | + <Render type="sphere" /> |
36 | 36 | </Entity> |
37 | 37 | </Application> |
38 | 38 | ); |
39 | 39 | } |
40 | 40 | ``` |
41 | 41 |
|
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... |
43 | 45 |
|
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 |
50 | 52 |
|
51 | | -#### Learning more |
| 53 | +### Learn more |
52 | 54 |
|
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. |
54 | 56 |
|
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) |
56 | 61 |
|
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) |
58 | 62 |
|
59 | | -### Contributing |
60 | 63 |
|
61 | | -We welcome contributions! Please read our [Contributing Guide](https://github.com/playcanvas/engine/blob/main/.github/CONTRIBUTING.md) to get started. |
62 | 64 |
|
63 | | -### Support |
64 | 65 |
|
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