Class: Pager

Defined in: src/ui/layouts/Pager.ts:31

A layout container that manages a collection of Page views and allows the user to navigate between them, typically through swiping gestures. It clips the content of its pages to create a sliding window effect.

Extends

• View

Extended by

• HorizontalPager
• VerticalPager

Constructors

Constructor

new Pager(options): Pager

Defined in: src/ui/layouts/Pager.ts:54

Parameters

options

PagerOptions = {}

Returns

Pager

Overrides

View.constructor

Properties

aspectRatio

aspectRatio: number = 1.0

Defined in: src/ui/core/View.ts:72

The calculated aspect ratio (width / height) of this view.

Inherited from

View.aspectRatio

---

clippingPlanes

clippingPlanes: Plane[] = []

Defined in: src/ui/layouts/Pager.ts:42

---

height

height: number = 1

Defined in: src/ui/core/View.ts:42

The height of the view, as a 0-1 ratio of its parent's available space.

Inherited from

View.height

---

isQuad

isQuad: boolean = true

Defined in: src/ui/core/View.ts:27

Flag indicating View behaves as a 2D quad in layout calculations.

Inherited from

View.isQuad

---

isRoot

isRoot: boolean = false

Defined in: src/ui/core/View.ts:29

Flag indicating if this is the root view of a layout.

Inherited from

View.isRoot

---

isView

isView: boolean = true

Defined in: src/ui/core/View.ts:31

Type identifier for easy checking with instanceof.

Inherited from

View.isView

---

isXRScript

isXRScript: boolean = true

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

Inherited from

View.isXRScript

---

localClippingPlanes

localClippingPlanes: Plane[]

Defined in: src/ui/layouts/Pager.ts:34

---

mesh?

optional mesh: Mesh<BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>, Material | Material[], Object3DEventMap>

Defined in: src/ui/core/View.ts:70

The underlying THREE.Mesh if the view has a visible geometry.

Inherited from

View.mesh

---

name

name: string = 'View'

Defined in: src/ui/core/View.ts:25

Text description of the view

Inherited from

View.name

---

opacity

opacity: number = 1.0

Defined in: src/ui/core/View.ts:68

The overall opacity of the view and its children.

Inherited from

View.opacity

---

paddingX

paddingX: number = 0

Defined in: src/ui/core/View.ts:59

Horizontal padding, as a 0-1 ratio of the parent's width.

Inherited from

View.paddingX

---

paddingY

paddingY: number = 0

Defined in: src/ui/core/View.ts:61

Vertical padding, as a 0-1 ratio of the parent's height.

Inherited from

View.paddingY

---

paddingZ

paddingZ: number = 0

Defined in: src/ui/core/View.ts:63

Depth padding, for z-axis adjustment to prevent z-fighting.

Inherited from

View.paddingZ

---

raycastMesh

raycastMesh: Mesh<PlaneGeometry, MeshBasicMaterial, Object3DEventMap>

Defined in: src/ui/layouts/Pager.ts:38

---

selectable

selectable: boolean = true

Defined in: src/ui/core/View.ts:33

Determines if this view can be targeted by user input.

Inherited from

View.selectable

---

state

state: PagerState

Defined in: src/ui/layouts/Pager.ts:41

---

ux

ux: UX

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

Inherited from

View.ux

---

weight

weight: number = 0.5

Defined in: src/ui/core/View.ts:38

Proportional size used in layouts like Row or Col.

Inherited from

View.weight

---

width

width: number = 1

Defined in: src/ui/core/View.ts:40

The width of the view, as a 0-1 ratio of its parent's available space.

Inherited from

View.width

---

x

x: number = 0

Defined in: src/ui/core/View.ts:47

The local x-coordinate within the parent's layout, from -0.5 to 0.5. For root view (Panel), this will be addition to the global positioning.

Inherited from

View.x

---

y

y: number = 0

Defined in: src/ui/core/View.ts:52

The local y-coordinate within the parent's layout, from -0.5 to 0.5. For root view (Panel), this will be addition to the global positioning.

Inherited from

View.y

---

z

z: number = 0

Defined in: src/ui/core/View.ts:57

The local z-coordinate within the parent's layout. For root view (Panel), this will be addition to the global positioning.

Inherited from

View.z

---

dependencies

static dependencies: object

Defined in: src/ui/layouts/Pager.ts:32

input

input: typeof Input = Input

renderer

renderer: typeof WebGLRenderer = THREE.WebGLRenderer

Accessors

rangeX

Get Signature

get rangeX(): number

Defined in: src/ui/core/View.ts:79

Gets the effective horizontal range for child elements, normalized to 1.0 for the smaller dimension.

Returns

number

The horizontal layout range.

Inherited from

View.rangeX

---

rangeY

Get Signature

get rangeY(): number

Defined in: src/ui/core/View.ts:88

Gets the effective vertical range for child elements, normalized to 1.0 for the smaller dimension.

Returns

number

The vertical layout range.

Inherited from

View.rangeY

Methods

add()

add(...children): Pager

Defined in: src/ui/core/View.ts:215

Overrides THREE.Object3D.add to automatically trigger a layout update when a new View is added as a child.

Parameters

children

...Object3D<Object3DEventMap>[]

Returns

Pager

Inherited from

View.add

---

computeSelectingDelta()

protected computeSelectingDelta(selectingPosition, startSelectPosition): number

Defined in: src/ui/layouts/Pager.ts:155

Parameters

selectingPosition

Vector3

startSelectPosition

Vector3

Returns

number

---

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

View.dispose

---

dpToLocalUnits()

dpToLocalUnits(dp): number

Defined in: src/ui/core/View.ts:123

Converts a value from Density-Independent Pixels (DP) to local units.

Parameters

dp

number

The value in density-independent pixels.

Returns

number

The equivalent value in local units.

Inherited from

View.dpToLocalUnits

---

hide()

hide(): void

Defined in: src/ui/core/View.ts:137

Makes the view and all its descendants invisible.

Returns

void

Inherited from

View.hide

---

init()

init(__namedParameters): void

Defined in: src/ui/layouts/Pager.ts:72

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

__namedParameters

input

Input

renderer

WebGLRenderer

Returns

void

Overrides

View.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

View.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

View.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

View.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

View.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

View.onKeyDown

---

onKeyUp()

onKeyUp(_event): void

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

Parameters

_event

KeyEvent

Returns

void

Inherited from

View.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

View.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

View.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

View.onObjectGrabStart

---

onObjectSelectEnd()

onObjectSelectEnd(event): boolean

Defined in: src/ui/layouts/Pager.ts:182

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

Parameters

event

SelectEvent

Returns

boolean

Whether the event was handled

Overrides

View.onObjectSelectEnd

---

onObjectSelectStart()

onObjectSelectStart(event): boolean

Defined in: src/ui/layouts/Pager.ts:135

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

Parameters

event

SelectEvent

Returns

boolean

Whether the event was handled

Overrides

View.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

View.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

View.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

View.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

View.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

View.onSelectEnd

---

onSelecting()

onSelecting(): void

Defined in: src/ui/layouts/Pager.ts:160

Called whenever pinch / mouse click is happening, globally.

Returns

void

Overrides

View.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

View.onSelectStart

---

onSimulatorStarted()

onSimulatorStarted(): void

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

Returns

void

Inherited from

View.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

View.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

View.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

View.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

View.onSqueezing

---

onTriggered()

onTriggered(_id): void

Defined in: src/ui/core/View.ts:230

Hook called on a complete select action (e.g., a click) when this view is the target. Intended for override by subclasses.

Parameters

_id

number

The ID of the controller that triggered the action.

Returns

void

Inherited from

View.onTriggered

---

onXRSessionEnded()

onXRSessionEnded(): void

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

Returns

void

Inherited from

View.onXRSessionEnded

---

onXRSessionStarted()

onXRSessionStarted(_session?): void

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

Parameters

_session?

XRSession

Returns

void

Inherited from

View.onXRSessionStarted

---

physicsStep()

physicsStep(): void

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

Returns

void

Inherited from

View.physicsStep

---

raycast()

raycast(raycaster, intersects): boolean

Defined in: src/ui/layouts/Pager.ts:192

Raycast to the pager's raycastMesh so the user can scroll across pages.

Parameters

raycaster

Raycaster

intersects

Intersection<Object3D<Object3DEventMap>>[]

Returns

boolean

Overrides

View.raycast

---

resetClippingPlanesToLocalSpace()

resetClippingPlanesToLocalSpace(): void

Defined in: src/ui/layouts/Pager.ts:102

Returns

void

---

resetLayout()

resetLayout(): void

Defined in: src/ui/core/View.ts:195

Resets the layout state of this view. Intended for override by subclasses.

Returns

void

Inherited from

View.resetLayout

---

resetLayouts()

resetLayouts(): void

Defined in: src/ui/core/View.ts:198

Resets the layout state for this view and all its descendants.

Returns

void

Inherited from

View.resetLayouts

---

show()

show(): void

Defined in: src/ui/core/View.ts:129

Makes the view and all its descendants visible.

Returns

void

Inherited from

View.show

---

update()

update(): void

Defined in: src/ui/layouts/Pager.ts:124

Runs per frame.

Returns

void

Overrides

View.update

---

updateClippingPlanes()

updateClippingPlanes(): void

Defined in: src/ui/layouts/Pager.ts:110

Returns

void

---

updateLayout()

updateLayout(): void

Defined in: src/ui/layouts/Pager.ts:130

Calculates and applies the position and scale for this single view based on its layout properties and its parent's dimensions.

Returns

void

Overrides

View.updateLayout

---

updateLayouts()

updateLayouts(): void

Defined in: src/ui/core/View.ts:171

Triggers a layout update for this view and all its descendants.

Returns

void

Inherited from

View.updateLayouts

---

updateLayoutsBFS()

updateLayoutsBFS(): void

Defined in: src/ui/core/View.ts:179

Performs a Breadth-First Search (BFS) traversal to update the layout tree, ensuring parent layouts are calculated before their children.

Returns

void

Inherited from

View.updateLayoutsBFS

---

updatePageCount()

updatePageCount(): void

Defined in: src/ui/layouts/Pager.ts:77

Returns

void

---

updatePagePositions()

updatePagePositions(): void

Defined in: src/ui/layouts/Pager.ts:89

Returns

void

---

dpToMeters()

static dpToMeters(dp): number

Defined in: src/ui/core/View.ts:114

Converts a value from Density-Independent Pixels (DP) to meters.

Parameters

dp

number

The value in density-independent pixels.

Returns

number

The equivalent value in meters.

Inherited from

View.dpToMeters