diff --git a/README.md b/README.md index ea94941e..c5b75ae1 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,6 @@ ## @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) @@ -6,9 +8,9 @@ [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. - -image + + @playcanvas/react + ### Getting Started @@ -17,40 +19,55 @@ 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 ( + <> + + + + + + + ); +}; 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... +## 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. @@ -58,6 +75,11 @@ To find out more, check the [Getting Started](https://playcanvas-react.vercel.ap - [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.