Last reviewed 31 Jul 2026
Applies to
Banter VR JavaScript SDK Rendering Geometry
Difficulty Intermediate

Banter Geometry, Materials, Lights, Text, and Mirrors

Banter can create geometry directly from JavaScript and decorate it with materials, textures, lights, text, billboards, mirrors, and inside-out mesh rendering. These components are useful for runtime prototypes, interface objects, signs, rooms, and generated environments.

Visible Object Stack

Create a GameObject, add one geometry component, apply a material, then add lighting or interaction only where the design needs it.

  1. Create and position the GameObject.
  2. Add a primitive or loaded model component.
  3. Add BanterMaterial, text, lighting, or other visual components.

Geometry Primitives

The official SDK currently includes:

  • BanterBox
  • BanterSphere
  • BanterPlane
  • BanterCylinder
  • BanterCone
  • BanterCircle
  • BanterTorus
  • BanterTorusKnot

It also lists parametric shapes such as Klein bottle, Möbius strip, catenoid, helicoid, spiral, spring, and shell forms.

Create a Box

const box = new BS.GameObject({
  name: "DisplayBox",
  localPosition: new BS.Vector3(0, 1, 2)
});

box.AddComponent(new BS.BanterBox({
  width: 1,
  height: 0.5,
  depth: 1,
  widthSegments: 1,
  heightSegments: 1,
  depthSegments: 1
}));

Segment settings change how the primitive is subdivided. Do not add segments that the intended shape or later processing does not use.

Create Curved Geometry

const ring = new BS.GameObject({ name: "PortalRing" });

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

Spheres, cylinders, cones, circles, toruses, and torus knots expose shape-specific radius, segment, angle, height, or arc settings in the official reference.

Apply a Material and Texture

BanterMaterial controls the shader, texture, colour tint, rendered side, and mip-map generation:

box.AddComponent(new BS.BanterMaterial({
  shaderName: "Unlit/Diffuse",
  texture: "https://example.com/texture.png",
  color: new BS.Vector4(1, 1, 1, 1),
  side: BS.MaterialSide.Front,
  generateMipMaps: false
}));

MaterialSide supports front, back, and double-sided rendering. Use double-sided rendering only when both sides of the surface must be visible.

Add Lighting

BS.Light supports point, directional, and spot types:

lightObject.AddComponent(new BS.Light({
  type: BS.LightType.Point,
  color: new BS.Vector4(1, 0.8, 0.6, 1),
  intensity: 1,
  range: 10,
  shadows: BS.LightShadows.None
}));

Spot lights additionally use outer and inner spot angles. Shadow options are none, hard, and soft.

Render 3D Text

BanterText supports text, colour, font size, horizontal and vertical alignment, rich text, word wrapping, and text-box size:

labelObject.AddComponent(new BS.BanterText({
  text: "Welcome",
  color: new BS.Vector4(1, 1, 1, 1),
  fontSize: 2,
  horizontalAlignment: BS.HorizontalAlignment.Center,
  verticalAlignment: BS.VerticalAlignment.Middle,
  enableWordWrapping: true,
  rectTransformSizeDelta: new BS.Vector2(8, 2)
}));

Set the text-box size deliberately so wrapping and alignment have defined boundaries.

Face Text or Objects Toward the Camera

BanterBillboard rotates an object toward the camera. Each axis can be enabled separately, and smoothing controls whether the rotation is instant or gradual.

This is useful for labels that must remain readable from changing viewpoints.

Mirrors and Inverted Meshes

BanterMirror creates a reflective surface:

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

BanterInvertedMesh reverses mesh normals so the object renders inside-out. This is useful when the viewer is intended to stand inside the geometry.

Common Questions

Why is the back of my Banter plane invisible?

Check the material's side setting. The API supports front, back, or double-sided rendering.

Why does my Banter text wrap unexpectedly?

Check enableWordWrapping and the rectTransformSizeDelta used as the text-box size.

Official References

Related Navigation