Skip to main content

Class: UI

Defined in: src/ui/UI.ts:48

Manages the construction and lifecycle of a declarative UI defined by a JSON object. It translates the JSON structure into a hierarchy of UI objects. See samples/ui for a complete example of composing UI with JSON.

Extends

Constructors

Constructor

new UI(): UI

Defined in: node_modules/@types/three/src/core/Object3D.d.ts:95

This creates a new Object3D object.

Returns

UI

Inherited from

Script.constructor

Properties

isXRScript

isXRScript: boolean = true

Defined in: src/core/Script.ts:53

Inherited from

Script.isXRScript


ux

ux: UX

Defined in: src/core/Script.ts:52

Inherited from

Script.ux


views

views: View<Object3DEventMap>[] = []

Defined in: src/ui/UI.ts:49


ComponentRegistry

static ComponentRegistry: Map<string, Constructor<View<Object3DEventMap>>>

Defined in: src/ui/UI.ts:55

A static registry mapping string identifiers to UI component classes. This allows for an extensible and declarative UI system.

Methods

compose()

compose(json): null | View<Object3DEventMap>

Defined in: src/ui/UI.ts:78

Composes a UI hierarchy from a JSON object and attaches it to this UI instance. This is the primary method for building a declarative UI.

Parameters

json

UIJsonNode

The JSON object defining the UI structure.

Returns

null | View<Object3DEventMap>

The root view of the composed UI, or null if composition fails.


dispose()

dispose(): void

Defined in: src/core/Script.ts:196

Called when the script is removed from the scene. Opposite of init.

Returns

void

Inherited from

Script.dispose


init()

init(_?): void | Promise<void>

Defined in: src/core/Script.ts:62

Initializes an instance with XR controllers, grips, hands, raycaster, and default options. We allow all scripts to quickly access its user (e.g., user.isSelecting(), user.hands), world (e.g., physical depth mesh, lighting estimation, and recognized objects), and scene (the root of three.js's scene graph). If this returns a promise, we will wait for it.

Parameters

_?

object

Returns

void | Promise<void>

Inherited from

Script.init


initPhysics()

initPhysics(_physics): void | Promise<void>

Defined in: src/core/Script.ts:72

Enables depth-aware interactions with physics. See /demos/ballpit

Parameters

_physics

Physics

Returns

void | Promise<void>

Inherited from

Script.initPhysics


onHoverEnter()

onHoverEnter(_controller): void

Defined in: src/core/Script.ts:157

Called when the controller starts hovering over this object with reticle.

Parameters

_controller

Object3D

An XR controller.

Returns

void

Inherited from

Script.onHoverEnter


onHoverExit()

onHoverExit(_controller): void

Defined in: src/core/Script.ts:162

Called when the controller hovers over this object with reticle.

Parameters

_controller

Object3D

An XR controller.

Returns

void

Inherited from

Script.onHoverExit


onHovering()

onHovering(_controller): void

Defined in: src/core/Script.ts:167

Called when the controller hovers over this object with reticle.

Parameters

_controller

Object3D

An XR controller.

Returns

void

Inherited from

Script.onHovering


onKeyDown()

onKeyDown(_event): void

Defined in: src/core/Script.ts:109

Called on keyboard keypress.

Parameters

_event

KeyEvent

Event containing .code to read the keyboard key.

Returns

void

Inherited from

Script.onKeyDown


onKeyUp()

onKeyUp(_event): void

Defined in: src/core/Script.ts:110

Parameters

_event

KeyEvent

Returns

void

Inherited from

Script.onKeyUp


onObjectGrabbing()

onObjectGrabbing(_event): void

Defined in: src/core/Script.ts:187

Called every frame a hand is grabbing this object.

Parameters

_event

ObjectGrabEvent

Returns

void

Inherited from

Script.onObjectGrabbing


onObjectGrabEnd()

onObjectGrabEnd(_event): void

Defined in: src/core/Script.ts:191

Called when a hand stops grabbing this object.

Parameters

_event

ObjectGrabEvent

Returns

void

Inherited from

Script.onObjectGrabEnd


onObjectGrabStart()

onObjectGrabStart(_event): void

Defined in: src/core/Script.ts:183

Called when a hand starts grabbing this object (touching + pinching).

Parameters

_event

ObjectGrabEvent

Returns

void

Inherited from

Script.onObjectGrabStart


onObjectSelectEnd()

onObjectSelectEnd(_event): boolean

Defined in: src/core/Script.ts:150

Called when the controller stops selecting this object the script represents, e.g. View, ModelView.

Parameters

_event

SelectEvent

event.target holds its controller.

Returns

boolean

Whether the event was handled

Inherited from

Script.onObjectSelectEnd


onObjectSelectStart()

onObjectSelectStart(_event): boolean

Defined in: src/core/Script.ts:141

Called when the controller starts selecting this object the script represents, e.g. View, ModelView.

Parameters

_event

SelectEvent

event.target holds its controller.

Returns

boolean

Whether the event was handled

Inherited from

Script.onObjectSelectStart


onObjectTouchEnd()

onObjectTouchEnd(_event): void

Defined in: src/core/Script.ts:179

Called when a hand's index finger stops touching this object.

Parameters

_event

ObjectTouchEvent

Returns

void

Inherited from

Script.onObjectTouchEnd


onObjectTouching()

onObjectTouching(_event): void

Defined in: src/core/Script.ts:175

Called every frame that a hand's index finger is touching this object.

Parameters

_event

ObjectTouchEvent

Returns

void

Inherited from

Script.onObjectTouching


onObjectTouchStart()

onObjectTouchStart(_event): void

Defined in: src/core/Script.ts:171

Called when a hand's index finger starts touching this object.

Parameters

_event

ObjectTouchEvent

Returns

void

Inherited from

Script.onObjectTouchStart


onSelect()

onSelect(_event): void

Defined in: src/core/Script.ts:98

Called whenever pinch / mouse click successfully completes, globally.

Parameters

_event

SelectEvent

event.target holds its controller.

Returns

void

Inherited from

Script.onSelect


onSelectEnd()

onSelectEnd(_event): void

Defined in: src/core/Script.ts:92

Called whenever pinch / mouse click discontinues, globally.

Parameters

_event

SelectEvent

event.target holds its controller

Returns

void

Inherited from

Script.onSelectEnd


onSelecting()

onSelecting(_event): void

Defined in: src/core/Script.ts:103

Called whenever pinch / mouse click is happening, globally.

Parameters

_event

SelectEvent

Returns

void

Inherited from

Script.onSelecting


onSelectStart()

onSelectStart(_event): void

Defined in: src/core/Script.ts:86

Called whenever pinch / mouse click starts, globally.

Parameters

_event

SelectEvent

event.target holds its controller

Returns

void

Inherited from

Script.onSelectStart


onSimulatorStarted()

onSimulatorStarted(): void

Defined in: src/core/Script.ts:78

Returns

void

Inherited from

Script.onSimulatorStarted


onSqueeze()

onSqueeze(_event): void

Defined in: src/core/Script.ts:132

Called whenever gamepad trigger successfully completes, globally.

Parameters

_event

SelectEvent

event.target holds its controller.

Returns

void

Inherited from

Script.onSqueeze


onSqueezeEnd()

onSqueezeEnd(_event): void

Defined in: src/core/Script.ts:121

Called whenever gamepad trigger stops, globally.

Parameters

_event

SelectEvent

event.target holds its controller.

Returns

void

Inherited from

Script.onSqueezeEnd


onSqueezeStart()

onSqueezeStart(_event): void

Defined in: src/core/Script.ts:116

Called whenever gamepad trigger starts, globally.

Parameters

_event

SelectEvent

event.target holds its controller.

Returns

void

Inherited from

Script.onSqueezeStart


onSqueezing()

onSqueezing(_event): void

Defined in: src/core/Script.ts:126

Called whenever gamepad is being triggered, globally.

Parameters

_event

SelectEvent

Returns

void

Inherited from

Script.onSqueezing


onXRSessionEnded()

onXRSessionEnded(): void

Defined in: src/core/Script.ts:76

Returns

void

Inherited from

Script.onXRSessionEnded


onXRSessionStarted()

onXRSessionStarted(_session?): void

Defined in: src/core/Script.ts:75

Parameters

_session?

XRSession

Returns

void

Inherited from

Script.onXRSessionStarted


physicsStep()

physicsStep(): void

Defined in: src/core/Script.ts:73

Returns

void

Inherited from

Script.physicsStep


update()

update(_time?, _frame?): void

Defined in: src/core/Script.ts:67

Runs per frame.

Parameters

_time?

number

_frame?

XRFrame

Returns

void

Inherited from

Script.update


registerComponent()

static registerComponent(typeName, componentClass): void

Defined in: src/ui/UI.ts:63

Registers a component class with a string key, making it available to the compose function.

Parameters

typeName

string

The key to use in the JSON configuration.

componentClass

Constructor<View<Object3DEventMap>>

The class constructor of the UI component.

Returns

void