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