Last reviewed 31 Jul 2026
Applies to
Banter VR JavaScript SDK Mirrors GameObject hierarchies
Difficulty Beginner

Build a Reflective Mirror in Banter

BanterMirror creates a reflective mirror surface. Place the mirror on its own GameObject and use child GameObjects when the scene also needs a visible frame.

Mirror Workflow

Create a parent assembly, add the reflective surface as a child, and place frame pieces around it.

  1. Create the mirror assembly at its final position and rotation.
  2. Add BanterMirror to a scaled child GameObject.
  3. Add box children for the frame.

Create the Mirror Assembly

const mirrorAssembly = new BS.GameObject({
  name: "WallMirror",
  localPosition: new BS.Vector3(0, 1.7, 4),
  localEulerAngles: new BS.Vector3(0, 180, 0)
});

The parent keeps the mirror surface and frame under one transform.

Add the Reflective Surface

const mirrorSurface = new BS.GameObject({
  name: "MirrorSurface",
  parent: mirrorAssembly,
  localPosition: new BS.Vector3(0, 0, 0),
  localScale: new BS.Vector3(1.6, 2.2, 1)
});

mirrorSurface.AddComponent(
  new BS.BanterMirror()
);

The current official component reference exposes BanterMirror without constructor settings. Size and placement come from the GameObject transform.

Create a Frame Piece

function createFramePiece(
  name,
  position,
  size
) {
  const piece = new BS.GameObject({
    name,
    parent: mirrorAssembly,
    localPosition: position
  });

  piece.AddComponent(
    new BS.BanterBox({
      width: size.x,
      height: size.y,
      depth: size.z
    })
  );

  piece.AddComponent(
    new BS.BanterMaterial({
      shaderName: "Unlit/Diffuse",
      texture: "",
      color: new BS.Vector4(0.1, 0.1, 0.1, 1),
      side: BS.MaterialSide.Front,
      generateMipMaps: false
    })
  );

  return piece;
}

Add the Four Frame Sides

createFramePiece(
  "FrameTop",
  new BS.Vector3(0, 1.15, 0),
  new BS.Vector3(1.8, 0.1, 0.08)
);

createFramePiece(
  "FrameBottom",
  new BS.Vector3(0, -1.15, 0),
  new BS.Vector3(1.8, 0.1, 0.08)
);

createFramePiece(
  "FrameLeft",
  new BS.Vector3(-0.85, 0, 0),
  new BS.Vector3(0.1, 2.2, 0.08)
);

createFramePiece(
  "FrameRight",
  new BS.Vector3(0.85, 0, 0),
  new BS.Vector3(0.1, 2.2, 0.08)
);

All four pieces inherit the assembly's transform because the constructor sets parent: mirrorAssembly.

Move the Complete Mirror

Use the parent when the complete assembly must move:

mirrorAssembly.SetPosition(
  new BS.Vector3(3, 1.7, 4)
);

The mirror and frame remain grouped under the same hierarchy.

Common Questions

Where are the BanterMirror constructor properties?

The current official reference documents new BS.BanterMirror() without constructor properties. Configure the mirror GameObject's transform for placement and scale.

Why does the frame move separately from the Banter mirror?

Set parent: mirrorAssembly on the surface and every frame piece so they share the assembly hierarchy.

Official References

Related Navigation