Open Source Ecosystems

A React renderer for PlayCanvas – build interactive 3D applications using React's declarative paradigm.

Introduction

@playcanvas/react is a thin React wrapper around the PlayCanvas 3D engine. It allows developers to create interactive 3D applications and games using React components and hooks, bringing the declarative and component-based architecture of React to PlayCanvas.

By leveraging React's features, you can build complex 3D scenes with reusable components, manage state efficiently, and create interactive experiences with ease.

Features

Declarative 3D Scene Composition: Construct 3D scenes using JSX, making your code more readable and maintainable.
Reusable Components: Create and compose reusable 3D components, enabling modularity and scalability in your projects.
React Hooks Integration: Use React hooks to manage state and lifecycle events within your 3D components.
Event Handling: Utilize React's event system for user interactions within the 3D environment.
Interoperability: Seamlessly integrate with other React libraries and tools.

Installation

Install the package via npm:

npm install @playcanvas/react

Ensure that you have the peer dependencies installed:

npm install react react-dom playcanvas

Getting Started

Here's a simple example to get you started with @playcanvas/react.

Basic Setup

import React from 'react';
import { createRoot } from 'react-dom/client';

import { Application, Entity } from '@playcanvas/react'
import { Camera } from "@playcanvas/react/components"
import { OrbitControls } from "@playcanvas/react/scripts"

function App() {
  return (
    <Application>
        <Entity>
          <Camera/>
          <OrbitControls />
        </Entity>

        <Entity >
          <Render type='box' />
        </Entity>
    </Application>
  );
}

const root = createRoot(document.getElementById('root'));
root.render(<App />);