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

Build a Teleport Destination Panel in Banter

BanterScene.TeleportTo() moves the player to a position and Y rotation. Connect the method to UIButton controls to create an in-world destination panel.

Teleport Panel Workflow

Create a world-space UI panel, define each destination, and call TeleportTo from the matching button.

  1. Add BanterUIPanel to a positioned GameObject.
  2. Create a button for each destination.
  3. Pass the destination position and Y rotation to TeleportTo().

Create the Destination Panel

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

const panel = panelObject.AddComponent(
  new BS.BanterUIPanel({
    resolution: new BS.Vector2(800, 600),
    screenSpace: false,
    enableHaptics: true,
    clickHaptic: new BS.Vector2(0.1, 0.05),
    enterHaptic: new BS.Vector2(0.05, 0.02),
    exitHaptic: new BS.Vector2(0.05, 0.02),
    enableSounds: false
  })
);

Add a Destination Button

const observationButton = new BS.UIButton();
observationButton.SetProperty(
  BS.PN.text,
  "Observation Deck"
);
observationButton.style.width = "240px";
observationButton.style.height = "50px";
observationButton.style.backgroundColor = "#4CAF50";
observationButton.style.color = "#FFFFFF";

observationButton.OnClick(() => {
  scene.TeleportTo(
    new BS.Vector3(0, 5, 12),
    180,
    true,
    false
  );
});

panel.root.AppendChild(observationButton);

The documented teleport arguments are:

  1. position
  2. Y rotation in degrees
  3. whether to stop velocity
  4. whether the destination is treated as a spawn

Create Reusable Destination Buttons

Move the repeated button setup into a helper:

function addDestinationButton(
  label,
  position,
  rotation
) {
  const button = new BS.UIButton();
  button.SetProperty(BS.PN.text, label);
  button.style.width = "240px";
  button.style.height = "50px";

  button.OnClick(() => {
    scene.TeleportTo(
      position,
      rotation,
      true,
      false
    );
  });

  panel.root.AppendChild(button);
}

Then add the destinations:

addDestinationButton(
  "Observation Deck",
  new BS.Vector3(0, 5, 12),
  180
);

addDestinationButton(
  "Gallery",
  new BS.Vector3(8, 1, 0),
  270
);

addDestinationButton(
  "Lobby",
  new BS.Vector3(0, 1, 0),
  0
);

Control Teleport Ability

The scene API can enable or disable normal player teleporting:

scene.SetCanTeleport(false);
scene.SetCanTeleport(true);

Restore the setting to true when the player should regain normal teleport controls.

Common Questions

Why is the player facing the wrong direction after a Banter teleport?

Adjust the second TeleportTo() argument. The official method defines it as the destination Y rotation in degrees.

Why does the player keep their previous movement after teleporting?

Pass true as the third argument when the teleport should stop the player's current velocity.

Official References

Related Navigation