A lightweight, declarative library for for creating 3D apps, with an extensible Entity-Component System supporting Physics, Pointer Events, and a built-in Scripting API.
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 nested Entities, Components and Assets.
- Suspend 3D Assets during loading with
swrorreact-query. - Supports PointerEvents with event bubbling
- Supports Ammo.js physics out of the box
- Subscribe to frame updates with the
<Script/>component - 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.