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.
Install the package via npm:
npm install @playcanvas/react react react-dom playcanvas --saveThen, in your React app...
import { Application, Entity } from '@playcanvas/react'
import { Camera } from "@playcanvas/react/components"
import { OrbitControls } from "@playcanvas/react/scripts"
const App = (lambo) => {
return (
<Application>
<Entity position={[0, 2, 0]}>
<Camera/>
<OrbitControls />
</Entity>
<Entity >
<Container asset={lambo} />
</Entity>
</Application>
);
}- Simple declarative API for creating 3D apps
- Supports Asset loading with Suspense boundaries.
- PointerEvents with event bubbling
- Supports Physics out of the box
- Imperative Scripting API for the
<Script/>component for high performance updates. - Extensible Entity Component System that allows you to add new features.
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.
@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.
You can learn more about PlayCanvas on the developer site and through the tutorials. Similarly the React docs has a great tutorial section
We welcome contributions! Please read our Contributing Guide to get started.
If you encounter any issues or have questions, please open an issue on our GitHub repository.