Trigger Components

OKO Web Client 2.24.1 - CSP 4.19.0 

This article demonstrates how to add a Trigger Component to an Entity and guides you through a simple example of using a trigger volume to control the intensity of a light.

Instructions for OKO Web

Triggers are commonly associated with bounding boxes, and it is this bounding box that determines the area within which the trigger is active.

Let’s start with an Entity that includes a Static Model Component with an associated asset. In the following example, we have a static model of a statue.

With the Entity selected, select “Trigger” from the Components List.

You’ll see the Trigger Component added to the Entity in the Properties Panel. Then you’ll see the properties for this Component listed.

Transforms – the Transform allows you to define the position, rotation, and scale of the Trigger relative to its parent Entity. 

Mode – you can use the newly created bounding box as a Collider (default) or a Trigger.

Under the Mode dropdown, you’ll find the following options:

• Collider – a Collider is used to generate a bounding box or Mesh, preventing users from moving through it.

• Trigger – the bounding box can also serve as a Trigger. When a user enters the bounding box, an event is fired that a script can respond to.

To follow along with this example, select the Trigger mode. 

In order for the Trigger to affect something we need to use a Script Component, which will act as the ‘glue’ between the trigger event and the component property we wish to change. For details on how Script Components work please see the article here.

The following script turns a light on and off as the user enters the bounding box of the Trigger Component. For this example we will also require a light, add a Light Component to the same Entity and position it above the static model.

// Event fired when a user enters the trigger

globalThis.onTriggerEnter = (_evtName, params) => {

    const { id, cid } = JSON.parse(params);

    OKO.Log(`onTriggerEnter entityId: ${id} componentId: ${cid}`);

    const light = ThisEntity.getLightComponents()[0];

    if (light) {

        light.isVisible = true;

    }

};

// Event fired when a user leaves the trigger

globalThis.onTriggerLeave = (_evtName, params) => {

    const { id, cid } = JSON.parse(params);

    OKO.Log(`onTriggerLeave entityId: ${id} componentId: ${cid}`);

    const light = ThisEntity.getLightComponents()[0];

    if (light) {

        light.isVisible = false;

    }

};

// Subscribe to the trigger component events

ThisEntity.subscribeToMessage("trigger-enter", "onTriggerEnter");

ThisEntity.subscribeToMessage("trigger-leave", "onTriggerLeave");

 Add a Script Component and copy & paste the code above into the script window.

Now, the bounding box will work as a Trigger. 

The proximity script turns the light on when the user enters the bounding box and turns it off when they leave it.

That’s it for Triggers on OKO Web.