Last reviewed 31 Jul 2026
Applies to
Banter VR JavaScript SDK Vector math Rotations
Difficulty Intermediate

Banter Vector and Quaternion Math

The Banter JavaScript SDK provides Vector2, Vector3, Vector4, and Quaternion types. They are used throughout the API for UI sizes, positions, directions, scales, colours, physics values, clipping planes, haptics, and rotations.

Use the Matching Math Type

Use Vector2 for paired values, Vector3 for spatial values, Vector4 for four-component data such as colours, and Quaternion for rotations.

  1. Construct the type with the documented number of components.
  2. Use mutating methods when the original value should change.
  3. Use methods ending in New when the calculation should return another vector.

Vector2

BS.Vector2 stores two values and is used for UI sizes, clipping-plane ranges, UV-style coordinates, and paired settings:

const size = new BS.Vector2(800, 600);
size.Set(1024, 768);

The official API includes Add(), Subtract(), Multiply(), and component-wise MultiplyVectors().

Vector3

BS.Vector3 is the main type for 3D positions, directions, scales, velocity, force, and axes:

const position = new BS.Vector3(1, 2, 3);
position.Add(new BS.Vector3(0, 1, 0));
position.Multiply(2);

The standard arithmetic methods modify the current vector.

Return a New Vector

The API provides non-mutating versions:

const moved = position.AddNew(
  new BS.Vector3(0, 1, 0)
);
const scaled = position.MultiplyNew(2);

The original position remains available when a New method returns a separate result.

Length and Normalization

const length = direction.Length();
const squaredLength = direction.SqrMagnitude();
const normalized = direction.NormalizeNew();

Normalize() changes the current vector. NormalizeNew() returns another normalized vector.

Dot, Cross, and Angles

const dot = BS.Vector3.Dot(forward, target);
const angle = forward.Angle(target);
const signed = forward.SignedAngle(target, upAxis);

The official reference describes Angle() as an unsigned angle in degrees and SignedAngle() as an angle around a supplied axis.

Cross() calculates a perpendicular direction from two vectors.

Vector4 for Colours

BS.Vector4 is used for four-component values including RGBA colours:

const colour = new BS.Vector4(1, 0.5, 0, 1);

For colour values:

  • x is red
  • y is green
  • z is blue
  • w is alpha

Vector4 also provides setting, addition, and multiplication operations.

Quaternion Rotations

BS.Quaternion represents rotation without relying on Euler angles:

const rotation = new BS.Quaternion(0, 0, 0, 1);
rotation.SetFromEuler({
  x: 0,
  y: 90,
  z: 0
});

const euler = rotation.GetEuler();

The identity quaternion is (0, 0, 0, 1).

Apply a Quaternion to a Vector

direction.ApplyQuaternion(rotation);

This rotates the vector using the quaternion.

Common Questions

Why did my original Banter vector change?

Methods such as Add(), Multiply(), and Normalize() modify the current vector. Use the corresponding New method when you need a separate result.

Should I use Euler angles or a Quaternion?

Use the API form required by the method or component. Quaternions represent rotation directly, while SetFromEuler() and GetEuler() convert to and from degree-based Euler values.

Official References

Related Navigation