API Reference

A simple API for building 3D apps - providing a thin layer around the PlayCanvas engine that allows you to build 3D apps with React’s declarative approach.

Build your first 3D app in minutes

Overview

At its core, the API provides a thin abstraction over the PlayCanvas engine. Most components map 1:1 to their engine counterparts, making it easy to reason about behavior.

Because this library wraps the live engine directly, you get instant access to the latest engine features without waiting for the API to catch up.

Structure

The library is divided into a few main sections, each with its own purpose:

@playcanvas/react — Core components like Application and Entity
@playcanvas/react/components — Scene components such as Render, Camera, Light
@playcanvas/react/hooks — Hooks to interact with the runtime (e.g. useApp, useFrame)
@playcanvas/react/utils — Utility functions (e.g. fetchAsset)

App.tsx


import { Entity } from '@playcanvas/react'
import { Render, Collision, RigidBody } from '@playcanvas/react/components'
 
const Demo = () => (
    <Entity name="Cube">
        <Render type="box"/> 
        <Collision type="box"/>
        <RigidBody type="dynamic"/>
    </Entity>
}
 
export { Demo }

Serialized Props

Component props are passed directly to the underlying PlayCanvas engine where possible. Some are wrapped to support simpler, serializable formats — making them easier to use in JSX.

Colors

Color values can be provided as numeric arrays (e.g. [1, 0, 0]) or CSS color strings (e.g. "red"):

App.tsx


useMaterial({
    diffuse: [1, 0, 0],
    emissive: "red",
})

See the full list of supported CSS color names .

Transforms

Transform-related props like position, rotation, and scale are passed as numeric arrays:

App.tsx


<Entity position={[10, -10, 20]}/>
<Entity rotation={[0, 90, 0]}/>
<Entity scale={[1, 2, 1]}/>

See the Entity component for more information.