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 />);

Contributing

We welcome contributions! Please read our Contributing Guide to get started.

Roadmap

• [ ] Support for advanced PlayCanvas features like physics and particles.
• [ ] Integration with popular React libraries for state management and routing.
• [ ] More examples and tutorials.
• [ ] Improved TypeScript definitions.

Support

If you encounter any issues or have questions, please open an issue on our GitHub repository.

Acknowledgments

• PlayCanvas for their powerful 3D engine.
• The React community for the inspiration and support.

Happy coding!