Align

This aligns / pins a plane to a fixed screen position. This is useful for making responsive user interface elements which adjust to the window size and device pixel ratio.

UI.Align(group, plane, marginPx, x, y, distance);

If the plane is the root of your UI, you can pass it in like:

UI.Align(plane, plane, marginPx, x, y, distance);

It's recommended to disable this when in XR, as it locks to the camera's position.

Example

this.update = () => {
  // Each frame the element is aligned with the camera / viewport view
  UI.Align(this, this.plane, 10, "left", "center", 0.2);
};

Signature

UI.align(
  group: THREE.Object3D,
  plane: THREE.Mesh,
  marginPx: number = 10,
  x: 'left' | 'center' | 'right',
  y: 'top'  | 'center' | 'bottom',
  distance: number = 0.25 // distance from the camera on the Z axis
): void