.playcanvas-react

Overview of @playcanvas/react

@playcanvas/react is a fully featured thin wrapper around the PlayCanvas API. You use it to build 3D content

📚 Full Docs
🔗 GitHub Repo
🧩 API Reference

Structure

// Core 
import { Application, Entity } from '@playcanvas/react'
// Components add behaviors to Entities
import { Light, Camera, Render, Gsplat, Screen, Collision, RigidBody, Anim } from '@playcanvas/react/components'
// Hooks add functionality
import { useModel, useSplat, useAppEvent, useParent, useApp } from '@playcanvas/react/hooks'

Rules for 3D Content

When generating 3D content with @playcanvas/react, follow these conventions:

• Always wrap components at the root in an <Application /> to initialize the engine.
• <Entity /> defines a transform node — use it for position, rotation, and scale. It does not render anything on its own.
• Use components from @playcanvas/react/components to add functionality (e.g., <Camera />, <Light />, <Render />).
• Load assets using hooks like useModel(src) and useSplat(src).
• Materials must be created using the useMaterial() hook.
• Use numeric arrays for colors and vectors:
  • Colors: [1, 0, 0]
  • Position/rotation/scale: [0, 0, 0]

---

Examples

📸 A Camera

Transform goes on <Entity />, camera settings go on <Camera />.

<Entity position={[0, 0, 4]}>
    <Camera fov={30}/>
</Entity>

A Light

<Entity position={[0, 0, 4]}>
    <Light type='directional' />
</Entity>

A Primitive

<Entity position={[0, 0, 4]}>
    <Render type='sphere' />
</Entity>

An Asset

export const Car = () => {
  const { asset } = useModel('./car.glb');
  if (!asset) return null;

  return (
    <Entity>
      <Render type="asset" asset={asset} />
    </Entity>
  );
};