メインコンテンツまでスキップ

PlayCanvas React

PlayCanvas React is a modern library that brings the power of the PlayCanvas 3D engine into the React ecosystem. It provides a declarative, component-based approach to building interactive 3D applications using familiar React patterns.

Explore the official documentation or browse the GitHub repository for more.

Gaussian Splats Example3D Model Viewer ExamplePhysics ExampleClock Example

Why React?

React is at the heart of modern web development, and 3D content is no longer just for games. PlayCanvas React brings real-time 3D into the React ecosystem, enabling developers to build immersive experiences using the same tools and patterns they already use. With support for hooks, context, and component composition, it’s 3D — the React way.

Explore more in the example gallery.

Full Engine Power, React Simplicity

PlayCanvas React gives you access to the entire PlayCanvas engine via intuitive React components, with all its powerful features built-in without needing third-party libraries:

  • Physics – Full Ammo.js integration
  • Gaussian Splats – Cutting-edge 3D point cloud rendering
  • Pointer Events – React-style event propagation and bubbling
  • Asset System – Declarative and imperative loading of assets
  • Scripts – Escape hatches for custom logic when needed

Quick Start

The fastest way to get started is with the StackBlitz template. It's a one-click experience that launches a basic scene with a camera and a cube. Fork, edit, or clone the code to make it your own.

Alternatively, follow the Getting Started guide or install it directly in your project:

npm install @playcanvas/react

Then follow the [first scene walkthrough](./building-a-scene) to learn how to compose a scene using PlayCanvas React components and APIs.

## Learn More

- [Getting Started Guide](https://playcanvas-react.vercel.app/docs/guide/getting-started) - Set up your first project
- [Features Showcase](https://playcanvas-react.vercel.app/docs#features) - Explore all capabilities
- [Interactive Playground](https://playcanvas-react.vercel.app/examples) - Learn by doing
- [API Reference](https://playcanvas-react.vercel.app/docs/api) - Complete component documentation

Join the growing community of developers building the next generation of 3D web experiences with **PlayCanvas React**!