Skip to main content

Class: VerticalPager

Defined in: src/ui/layouts/VerticalPager.ts:10

A specialized Pager that arranges its pages vertically and enables vertical swiping gestures. It is commonly used as the foundation for scrollable text views.

Extends

Constructors

Constructor

new VerticalPager(options): VerticalPager

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

Parameters

options

PagerOptions = {}

Returns

VerticalPager

Inherited from

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

Pager.aspectRatio


clippingPlanes

clippingPlanes: Plane[] = []

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

Inherited from

Pager.clippingPlanes


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

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

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

Pager.isRoot


isView

isView: boolean = true

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

Type identifier for easy checking with instanceof.

Inherited from

Pager.isView


isXRScript

isXRScript: boolean = true

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

Inherited from

Pager.isXRScript


localClippingPlanes

localClippingPlanes: Plane[]

Defined in: src/ui/layouts/VerticalPager.ts:11

Overrides

Pager.localClippingPlanes


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

Pager.mesh


name

name: string = 'View'

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

Text description of the view

Inherited from

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

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

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

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

Pager.paddingZ


raycastMesh

raycastMesh: Mesh<PlaneGeometry, MeshBasicMaterial, Object3DEventMap>

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

Inherited from

Pager.raycastMesh


selectable

selectable: boolean = true

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

Determines if this view can be targeted by user input.

Inherited from

Pager.selectable


state

state: PagerState

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

Inherited from

Pager.state


ux

ux: UX

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

Inherited from

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

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

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

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

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

Pager.z


dependencies

static dependencies: object

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

input

input: typeof Input = Input

renderer

renderer: typeof WebGLRenderer = THREE.WebGLRenderer

Inherited from

Pager.dependencies

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

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

Pager.rangeY

Methods

add()

add(...children): VerticalPager

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

VerticalPager

Inherited from

Pager.add


computeSelectingDelta()

protected computeSelectingDelta(selectingPosition, startSelectPosition): number

Defined in: src/ui/layouts/VerticalPager.ts:22

Parameters

selectingPosition

Vector3

startSelectPosition

Vector3

Returns

number

Overrides

Pager.computeSelectingDelta


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

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

Pager.dpToLocalUnits


hide()

hide(): void

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

Makes the view and all its descendants invisible.

Returns

void

Inherited from

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

Inherited from

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

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

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

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

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

Pager.onKeyDown


onKeyUp()

onKeyUp(_event): void

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

Parameters

_event

KeyEvent

Returns

void

Inherited from

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

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

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

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

Inherited from

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

Inherited from

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

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

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

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

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

Pager.onSelectEnd


onSelecting()

onSelecting(): void

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

Called whenever pinch / mouse click is happening, globally.

Returns

void

Inherited from

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

Pager.onSelectStart


onSimulatorStarted()

onSimulatorStarted(): void

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

Returns

void

Inherited from

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

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

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

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

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

Pager.onTriggered


onXRSessionEnded()

onXRSessionEnded(): void

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

Returns

void

Inherited from

Pager.onXRSessionEnded


onXRSessionStarted()

onXRSessionStarted(_session?): void

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

Parameters

_session?

XRSession

Returns

void

Inherited from

Pager.onXRSessionStarted


physicsStep()

physicsStep(): void

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

Returns

void

Inherited from

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

Inherited from

Pager.raycast


resetClippingPlanesToLocalSpace()

resetClippingPlanesToLocalSpace(): void

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

Returns

void

Inherited from

Pager.resetClippingPlanesToLocalSpace


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

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

Pager.resetLayouts


show()

show(): void

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

Makes the view and all its descendants visible.

Returns

void

Inherited from

Pager.show


update()

update(): void

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

Runs per frame.

Returns

void

Inherited from

Pager.update


updateClippingPlanes()

updateClippingPlanes(): void

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

Returns

void

Inherited from

Pager.updateClippingPlanes


updateLayout()

updateLayout(): void

Defined in: src/ui/layouts/VerticalPager.ts:16

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

Returns

void

Overrides

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

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

Pager.updateLayoutsBFS


updatePageCount()

updatePageCount(): void

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

Returns

void

Inherited from

Pager.updatePageCount


updatePagePositions()

updatePagePositions(): void

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

Returns

void

Inherited from

Pager.updatePagePositions


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

Pager.dpToMeters