Last reviewed 31 Jul 2026
Applies to
Banter VR JavaScript SDK GLB models Loading events In-world UI
Difficulty Intermediate

Load a GLB Model with Progress in Banter

BanterGLTF loads glTF and GLB models. Its component events can report progress, Unity linking, and completion, while isLoaded exposes whether loading has finished.

GLB Loading Workflow

Create the status label first, then add BanterGLTF and connect its progress, unity-linked, and loaded events.

  1. Create the model GameObject at its final transform.
  2. Add BanterGLTF with the model URL and collider settings.
  3. Display component events in a UILabel.

Create the Loading Status Panel

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

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

const statusLabel = new BS.UILabel();
statusLabel.SetProperty(
  BS.PN.text,
  "Preparing model..."
);
statusLabel.style.fontSize = "28px";
statusLabel.style.color = "#FFFFFF";
panel.root.AppendChild(statusLabel);

Create the Model Object

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

Add BanterGLTF

const gltf = modelObject.AddComponent(
  new BS.BanterGLTF({
    url: "https://example.com/model.glb",
    generateMipMaps: false,
    addColliders: false,
    nonConvexColliders: false,
    slippery: false,
    climbable: false,
    legacyRotate: false,
    childrenLayer: 0
  })
);

The official component options include:

  • automatic collider generation
  • non-convex mesh colliders
  • slippery surfaces
  • climbable surfaces
  • legacy rotation
  • a layer for child objects

Choose these settings for the model's intended interaction rather than enabling every option.

Display Loading Progress

The progress event reports a value from 0 to 1:

gltf.On("progress", (event) => {
  const percent = Math.round(
    event.detail.progress * 100
  );

  statusLabel.SetProperty(
    BS.PN.text,
    `Loading model: ${percent}%`
  );
});

Read the Unity Link

unity-linked reports the Unity ID:

gltf.On("unity-linked", (event) => {
  console.log(
    "Unity ID:",
    event.detail.unityId
  );
});

Handle Completion

gltf.On("loaded", () => {
  statusLabel.SetProperty(
    BS.PN.text,
    "Model loaded"
  );

  console.log("Loaded:", gltf.isLoaded);
});

The official example shows isLoaded as true inside the loaded handler.

Check Loading State Later

if (gltf.isLoaded) {
  console.log("The model is ready");
}

Use the loaded event when logic should run immediately at completion. Use isLoaded when later code needs to inspect the current state.

Common Questions

Why does my Banter GLB model have no collision?

Check the addColliders setting. The official reference identifies it as the option that automatically generates colliders for the loaded model.

Why does my loading label never reach 100 percent?

Use the loaded event as the completion signal and set the final label there. The progress event reports intermediate loading values.

Official References

Related Navigation