@playcanvas/react

A thin react library for for creating 3D apps that suppports pointer events, physics, gaussian splats, and more straight out of the box.

  const { data: envMap } = useEnvAtlas('/environment-map.png');
  const { data: model } = useModel('/lamborghini_vision_gt.glb');
 
  if(!envMap || !model) return <LoadingSpinner />;
 
  return (<Entity>
      <EnvAtlas asset={envMap} intensity={0.5} showSkybox={false} />
      <Grid />
      <Entity name='camera' position={[4, 1, 4]}>
          <Camera clearColor='#090707' fov={28} />
          <OrbitControls inertiaFactor={0.07} distanceMin={6} distanceMax={10} pitchAngleMin={1} pitchAngleMax={90}/>
          <StaticPostEffects />
          <AutoRotate />
      </Entity>
      <Entity>
          <Container asset={model}/>
      </Entity>
  </Entity>

How does it work?

The library provides a thin declarative layer around the open source library PlayCanvas . You create an Application and add Entities to it. Entities have position, rotation and scale. You add behaviour by attaching Components to entities.

Here’s a simple example rendering a simple 3D asset with orbit controls.

import { Application, Entity } from '@playcanvas/react'
import { Camera } from "@playcanvas/react/components"
import { OrbitControls } from "@playcanvas/react/scripts"
 
const App = (car) => {
  return (
    <Application>
        <Entity position={[0, 2, 0]}>
          <Camera clearColor="blue"/>
          <OrbitControls />
        </Entity>
        <Entity >
          <Container asset={car} />
        </Entity>
    </Application>
  );
}

You can find additional examples in the Playground.

Features

PlayCanvas comes with a number of built in components and scripts that you can use. This makes it easy to get started building your app.

• Physics - Add rigid body components to your entities to enable physics sims
• Gaussian Splats - Add a GSplat component to render high quality 3D content
• Interactivity - Supports PointerEvents with event bubbling
• Scripts - Provides an imperative API for adding non-declaratives logic to your app
• Built using a natural ECS architecture.
• Asset System - Easy to use asset loader for 3D models, audio, video and other assets
• ECS - Intuitive Entity Component System

Who’s using it?

Currently used in the following apps:

First steps

If you’re familiar with React but new to PlayCanvas and 3D in general, the best place to start is the Getting Started Guide. It will walk you through creating a simple app and explain the core concepts.

If you’re already using PlayCanvas, but new to React, it’s worth checking out the React docs  first, which provide a great introduction to the React ecosystem. From then you can jump into the API Reference.

You can learn more about PlayCanvas on the developer site  and through the tutorials . Similarly the React docs has a great tutorial section