Load GLB Models, Video, Browsers, and Portals in Banter

Banter's media and content components load external 3D models, platform asset bundles, video, web pages, Street View panoramas, and links to other Banter spaces. Each component is added to a GameObject so its transform controls where the content appears.

Media Object Workflow

Create a named GameObject, add one content component, then wait for its loading event before enabling interactions that depend on the asset.

Create and position a GameObject for the content.
Add the matching GLTF, video, browser, bundle, Street View, or portal component.
Listen for loading and progress events when later logic depends on the content being ready.

Load a GLB or glTF Model

BanterGLTF loads models in glTF or GLB format:

const model = new BS.GameObject({
  name: "RuntimeModel",
  localPosition: new BS.Vector3(0, 0, 3)
});

const gltf = model.AddComponent(new BS.BanterGLTF({
  url: "https://example.com/model.glb",
  generateMipMaps: false,
  addColliders: false
}));

gltf.On("loaded", () => {
  console.log("Model ready");
});

The official component also exposes options for generated colliders, non-convex collision, slippery or climbable behaviour, legacy rotation, and the layer assigned to children.

Only enable generated collision when the model needs it. A visual background model and an interactive physical prop have different collision requirements.

Load Banter Asset Bundles

BanterAssetBundle accepts platform-specific bundle URLs. The current reference lists Windows, Android, macOS, Linux, iOS, and visionOS fields.

It can load a bundle as a scene or as prefab content:

bundleObject.AddComponent(new BS.BanterAssetBundle({
  windowsUrl: "https://example.com/windows.banter",
  androidUrl: "https://example.com/android.banter",
  isScene: false
}));

Provide the platform files your audience needs. Do not assume one platform bundle can replace the documented platform-specific fields.

Add a Video Surface

BanterVideoPlayer supports a media URL, volume, looping, automatic playback, drop behaviour, and waiting for the first frame.

const video = screen.AddComponent(new BS.BanterVideoPlayer({
  url: "https://example.com/video.mp4",
  volume: 1,
  loop: true,
  playOnAwake: true
}));

video.Play();
video.Pause();
video.Stop();

The reference also exposes current playback time, playing state, and looping state.

Embed a Web Page

BanterBrowser renders a web page on a surface. Its documented configuration includes:

URL
mip-map count
pixels per unit
page width and height
startup actions

Interaction can be enabled or disabled with ToggleInteraction(). The component can also run browser actions with RunActions().

Use page dimensions that match the web content you control. Check the result in VR so text size and controls remain usable at the physical scale of the surface.

Add Street View

BanterStreetView loads a panorama using a Google Street View panorama ID:

panorama.AddComponent(new BS.BanterStreetView({
  panoId: "PANORAMA_ID"
}));

The component expects the panorama identifier, not a general maps search phrase.

Create a Portal

BanterPortal links to another Banter space and can include an instance ID:

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

Confirm the destination and instance behaviour before placing the portal in a public route through the space.

Loading Events

Content components can emit loaded, progress, and unity-linked. Use loaded or the component's isLoaded property before running code that expects the asset to exist.

Common Questions

Why is my GLB visible but not collidable?

BanterGLTF has separate collider options. Check addColliders and the documented collider configuration instead of assuming the visual mesh automatically supplies collision.

Why does my script run before the model or video is ready?

Listen for the component's loaded event or check isLoaded before running logic that depends on the content.