Last reviewed 31 Jul 2026
Applies to
Banter VR JavaScript SDK Trigger volumes In-world UI
Difficulty Intermediate

Build a Trigger Zone Status Display in Banter

A Banter collider with isTrigger: true can emit trigger-enter and trigger-exit. Add BanterColliderEvents to the same GameObject and display each event's object name in a UI label.

Trigger Zone Workflow

Create a trigger collider, add BanterColliderEvents, and connect enter and exit events to a status label.

  1. Create the zone GameObject and trigger collider.
  2. Add BanterColliderEvents.
  3. Update the label from trigger-enter and trigger-exit.

Create the Status Panel

const panelObject = new BS.GameObject({
  name: "TriggerStatusPanel",
  localPosition: new BS.Vector3(0, 2, 3)
});

const panel = panelObject.AddComponent(
  new BS.BanterUIPanel({
    resolution: new BS.Vector2(800, 240),
    screenSpace: false,
    enableHaptics: false,
    enableSounds: false
  })
);

const status = new BS.UILabel();
status.SetProperty(
  BS.PN.text,
  "Zone is clear"
);
status.style.fontSize = "28px";
status.style.color = "#FFFFFF";
panel.root.AppendChild(status);

Create the Trigger Volume

const zone = new BS.GameObject({
  name: "DetectionZone",
  localPosition: new BS.Vector3(0, 1, 5)
});

zone.AddComponent(
  new BS.BoxCollider({
    isTrigger: true,
    center: new BS.Vector3(0, 0, 0),
    size: new BS.Vector3(3, 2, 3)
  })
);

The collider produces trigger behaviour because isTrigger is true.

Enable Trigger Events

zone.AddComponent(
  new BS.BanterColliderEvents()
);

The official reference requires BanterColliderEvents for collision-enter, collision-exit, trigger-enter, and trigger-exit.

Handle Trigger Entry

zone.On("trigger-enter", (event) => {
  console.log(
    "Entered trigger:",
    event.detail.name
  );

  status.SetProperty(
    BS.PN.text,
    `Entered: ${event.detail.name}`
  );
});

Handle Trigger Exit

zone.On("trigger-exit", (event) => {
  console.log(
    "Exited trigger:",
    event.detail.name
  );

  status.SetProperty(
    BS.PN.text,
    `Exited: ${event.detail.name}`
  );
});

The official trigger examples identify the other object by event.detail.name.

Keep the Zone Invisible

This example uses only a collider, so no visible geometry is created. Add separate geometry when creators should see the zone boundary during the finished experience.

Common Questions

Why does my Banter trigger zone not emit events?

Confirm that the collider uses isTrigger: true and that the same GameObject has BanterColliderEvents.

Where is the object name in a Banter trigger event?

Read event.detail.name in the documented trigger-enter and trigger-exit handlers.

Official References

Related Navigation