Last reviewed 31 Jul 2026
Applies to
Banter VR JavaScript SDK Portals Space navigation
Difficulty Intermediate

Create a Portal between Banter Spaces

BanterPortal creates a portal to another Banter space. The documented configuration accepts a destination URL and an instance ID. Add the component to a positioned GameObject, then use separate geometry and text objects when the portal needs a visible frame or destination label.

Portal Setup

Create a portal root, set the destination with BanterPortal, and keep the visual frame and label as child objects.

  1. Create and position the portal root GameObject.
  2. Add BanterPortal with the destination URL and optional instance.
  3. Add child geometry or text so players can identify the destination.

Create the Portal Root

const portalRoot = new BS.GameObject({
  name: "GalleryPortal",
  localPosition: new BS.Vector3(0, 1, 4),
  localEulerAngles: new BS.Vector3(0, 180, 0)
});

The root transform controls the portal's placement and facing direction.

Add BanterPortal

portalRoot.AddComponent(new BS.BanterPortal({
  url: "https://space.bant.ing",
  instance: "instance-id"
}));

Replace the example URL with the intended Banter space URL. Supply the instance value when the portal must target a particular instance.

Add a Visible Frame

Keep the frame as a child so it moves with the portal:

const frame = new BS.GameObject({
  name: "PortalFrame",
  parent: portalRoot,
  localPosition: new BS.Vector3(0, 0, 0)
});

frame.AddComponent(new BS.BanterTorus({
  radius: 1,
  tube: 0.08,
  radialSegments: 8,
  tubularSegments: 24,
  arc: Math.PI * 2
}));

frame.AddComponent(new BS.BanterMaterial({
  color: new BS.Vector4(0.2, 0.8, 1, 1),
  side: BS.MaterialSide.Double
}));

The frame is visual decoration. The BanterPortal component remains on the root.

Add a Destination Label

const label = new BS.GameObject({
  name: "PortalLabel",
  parent: portalRoot,
  localPosition: new BS.Vector3(0, 1.25, 0)
});

label.AddComponent(new BS.BanterText({
  text: "Gallery",
  color: new BS.Vector4(1, 1, 1, 1),
  fontSize: 1.2,
  horizontalAlignment: BS.HorizontalAlignment.Center,
  verticalAlignment: BS.VerticalAlignment.Middle,
  enableWordWrapping: true,
  rectTransformSizeDelta: new BS.Vector2(5, 1)
}));

Use reader-facing destination text. Do not make players infer where an unlabeled portal leads.

Organize Multiple Portals

For a portal room, create one parent GameObject and put each portal root beneath it. Give every portal and label a unique name that matches its destination.

Verify the Destination

Before publishing the route through the space:

  1. Check the destination URL.
  2. Check whether the instance ID is required.
  3. Confirm the label matches the destination.
  4. Test the portal from the final position and orientation.

Common Questions

Why does my Banter portal open the wrong destination?

Check both the url and instance values passed to BanterPortal.

Why did the portal frame move away from the portal?

Parent the frame and label beneath the portal root and use local transforms for their offsets.

Official References

Related Navigation