Variable: ScreenSpace

const ScreenSpace: Component<{ bottom: { default: string; type: String; }; height: { default: string; type: String; }; left: { default: string; type: String; }; right: { default: string; type: String; }; top: { default: string; type: String; }; width: { default: string; type: String; }; zOffset: { default: number; type: Float32; }; }>

Defined in: packages/core/src/ui/screenspace.ts:39

CSS‑like screen‑space layout for a PanelUI.

Remarks

When XR is not presenting, the panel is re‑parented under the active camera and positioned in pixels using CSS‑like expressions for top/left/bottom/right, with width/height specified in any CSS units supported by the browser (e.g. px, vw, vh, %, em).

On XR session start, the panel is automatically returned to world space.

All size inputs are ultimately converted to meters using the camera frustum at zOffset.

Example

entity.addComponent(PanelUI, { config: '/ui/menu.json' })
entity.addComponent(ScreenSpace, {
  width: '40vw',
  height: 'auto',
  bottom: '24px',
  right: '24px',
  zOffset: 0.25,
})