Last reviewed 31 Jul 2026
Applies to
Banter VR JavaScript SDK Lighting Object events
Difficulty Intermediate

Build a Clickable Light Switch in Banter

Banter's Light component supports point, directional, and spot lights. A separate GameObject can receive a click event and switch the light GameObject between active and inactive states.

Light Switch Workflow

Create the light and switch as separate GameObjects so the switch stays clickable while the light is inactive.

  1. Create a GameObject and add the Light component.
  2. Create a visible switch with a matching collider.
  3. Toggle the light with the switch GameObject's click event.

Create the Point Light

const lightObject = new BS.GameObject({
  name: "RoomPointLight",
  localPosition: new BS.Vector3(0, 2.5, 2)
});

lightObject.AddComponent(
  new BS.Light({
    type: BS.LightType.Point,
    color: new BS.Vector4(1, 0.9, 0.7, 1),
    intensity: 1,
    range: 10,
    spotAngle: 30,
    innerSpotAngle: 21.8,
    shadows: BS.LightShadows.None
  })
);

The range setting applies to point and spot lights. Spot angle settings apply to spot lights.

Create the Switch

const switchObject = new BS.GameObject({
  name: "RoomLightSwitch",
  localPosition: new BS.Vector3(1.5, 1.2, 2)
});

switchObject.AddComponent(
  new BS.BanterBox({
    width: 0.25,
    height: 0.4,
    depth: 0.08
  })
);

switchObject.AddComponent(
  new BS.BoxCollider({
    isTrigger: false,
    center: new BS.Vector3(0, 0, 0),
    size: new BS.Vector3(0.25, 0.4, 0.08)
  })
);

The box provides the visible switch while the collider defines its physical bounds.

Add a Switch Material

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

Toggle the Light

SetActive() is a documented GameObject method:

let lightIsOn = true;

switchObject.On("click", (event) => {
  lightIsOn = !lightIsOn;
  lightObject.SetActive(lightIsOn);

  console.log("Switch hit:", event.detail.point);
  console.log("Surface:", event.detail.normal);
});

The click event supplies the hit point and surface normal. Keep the light state in one variable so the next click applies the opposite value.

Use a Spot Light

Change the type when the scene needs a cone of light:

type: BS.LightType.Spot,
spotAngle: 30,
innerSpotAngle: 21.8

The official enums also include Point and Directional.

Common Questions

Why can I no longer click the Banter light switch?

Keep the switch and light on separate GameObjects. Toggle only the light object so the switch geometry and collider remain active.

Why does my Banter spot angle not change a point light?

The official reference marks spotAngle and innerSpotAngle as spot-light settings. Use BS.LightType.Spot when those cone angles are required.

Official References

Related Navigation