<Script/>

The <Script/> component provides a simple imperative way to add behaviors to an <Entity/>.

This is useful for things like physics, animation, and interactivity where, for performance reasons, you want to bypass updating React props. It allows you to hook into the engine's update loop outside of React, which is useful for performance-critical code. You can also leverage existing Scripts from PlayCanvas Editor Projects.

You can find more information about Scripts in the Engine documentation.

Usage

The Script component takes a class that extends the PlayCanvas Script class and attaches it to the Entity. Any additional props are passed to the Script class directly and can be used as properties on the class.

import { Script } from '@playcanvas/react/components'
import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs'

return <Script script={CameraControls} />

The following examples adds a SpinMe script to the entity that rotates the entity every frame.

Demo

Script component with rotation behavior - View Code

Code

// ↑ imports hidden

// This class runs in the scope of the entity it's attached to
class SpinMe extends PcScript {
  update(dt) {
    this.entity.rotate(0, dt * this.speed, 0);
  }
}

export const ScriptExample = () => {
  const { speed } = useControls(vars);

  return (
    <Entity>
      <Render type="box" castShadows receiveShadows />
      <Script script={SpinMe} speed={speed} />
    </Entity>
  );
};

You can use any existing Script or create your own, or any from the engine repository for existing Scripts.

tip

The PlayCanvas engine contains a number of useful scripts that you can use in your projects. Find them here.

You can learn more about the anatomy of a ESM Script in the Scripting documentation.

Properties

Name	Type	Default
script	SubclassOf<Script> The Script class to attach to the entity	-