Skip to main content

Class: Panel

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

A fundamental UI container that displays content on a 2D quad in 3D space. It supports background colors, rounded corners (squircles), and can be made interactive and draggable. It serves as a base for building complex user interfaces.

The panel intelligently selects a shader:

  • SpatialPanelShader: For interactive, draggable panels with hover/select highlights.
  • SquircleShader: For static, non-interactive panels with a clean, rounded look.

Extends​

Extended by​

Implements​

Constructors​

Constructor​

new Panel(options): Panel

Defined in: src/ui/core/Panel.ts:120

Parameters​

options​

PanelOptions = {}

Returns​

Panel

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

backgroundColor​

backgroundColor: string = '#c2c2c255'

Defined in: src/ui/core/Panel.ts:80

The background color of the panel, expressed as a CSS color string.

draggable​

draggable: boolean = false

Defined in: src/ui/core/Panel.ts:55

Determines if the panel can be dragged by the user.

Implementation of​

Draggable.draggable

draggingMode?​

optional draggingMode: DragMode

Defined in: src/ui/core/Panel.ts:58

Dragging mode, defaults to true if draggable else undefined.

Implementation of​

HasDraggingMode.draggingMode

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

isPanel​

isPanel: boolean = true

Defined in: src/ui/core/Panel.ts:49

Type identifier for easy checking with instanceof.

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:54

Inherited from​

View.isXRScript

keepFacingCamera​

keepFacingCamera: boolean = true

Defined in: src/ui/core/Panel.ts:43

mesh​

mesh: PanelMesh

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

The underlying mesh that renders the panel's background.

Overrides​

View.mesh

name​

name: string = 'Panel'

Defined in: src/ui/core/Panel.ts:46

Text description of the view

Implementation of​

Draggable.name

Overrides​

View.name

onFadeComplete()?​

optional onFadeComplete: () => void

Defined in: src/ui/core/Panel.ts:116

An optional callback function to execute when a fade animation completes.

Returns​

void

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

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

showHighlights​

showHighlights: boolean = false

Defined in: src/ui/core/Panel.ts:77

Whether to show highlights for the spatial panel.

touchable​

touchable: boolean = false

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

Determines if the panel can be touched by the user's hands.

useBorderlessShader​

useBorderlessShader: boolean = false

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

Panel by default uses borderless shader. This flag indicates whether to use borderless shader for Spatial Panels.

useDefaultPosition​

useDefaultPosition: boolean = true

Defined in: src/ui/core/Panel.ts:66

If true, a root panel will automatically spawn in front of the user.

ux​

ux: UX

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

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/core/Panel.ts:41

timer​

timer: typeof Timer = THREE.Timer

user​

user: typeof User = User

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): Panel

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

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

Parameters​

children​

...Object3D<Object3DEventMap>[]

Returns​

Panel

Implementation of​

Draggable.add

Inherited from​

View.add

addGrid()​

addGrid(): Grid

Defined in: src/ui/core/Panel.ts:305

Adds a Grid layout as a direct child of this panel.

Returns​

Grid

The newly created Grid instance.

dispose()​

dispose(): void

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

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:125

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

fadeIn()​

fadeIn(duration?, onComplete?): void

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

Starts fading the panel and its children in.

Parameters​

duration?​

number

Optional fade duration in seconds.

onComplete?​

() => void

Optional callback when fade completes.

Returns​

void

fadeOut()​

fadeOut(duration?, onComplete?): void

Defined in: src/ui/core/Panel.ts:206

Starts fading the panel and its children out.

Parameters​

duration?​

number

Optional fade duration in seconds.

onComplete?​

() => void

Optional callback when fade completes.

Returns​

void

getHeight()​

getHeight(): number

Defined in: src/ui/core/Panel.ts:337

Gets the panel's height in meters.

Returns​

number

The height in meters.

getWidth()​

getWidth(): number

Defined in: src/ui/core/Panel.ts:329

Gets the panel's width in meters.

Returns​

number

The width in meters.

hide()​

hide(): void

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

Makes the view and all its descendants invisible.

Returns​

void

Inherited from​

View.hide

init()​

init(__namedParameters): void

Defined in: src/ui/core/Panel.ts:160

Initializes the panel, setting its default position if applicable.

Parameters​

__namedParameters​
timer​

Timer

user​

User

Returns​

void

Overrides​

View.init

initPhysics()​

initPhysics(_physics): void | Promise<void>

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

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:158

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:163

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:168

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:110

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:111

Parameters​

_event​

KeyEvent

Returns​

void

Inherited from​

View.onKeyUp

onObjectGrabbing()​

onObjectGrabbing(_event): void

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

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:192

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:184

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/core/Script.ts:151

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​

View.onObjectSelectEnd

onObjectSelectStart()​

onObjectSelectStart(_event): boolean

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

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​

View.onObjectSelectStart

onObjectTouchEnd()​

onObjectTouchEnd(_event): void

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

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:176

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:172

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:99

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:93

Called whenever pinch / mouse click discontinues, globally.

Parameters​

_event​

SelectEvent

event.target holds its controller

Returns​

void

Inherited from​

View.onSelectEnd

onSelecting()​

onSelecting(_event): void

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

Called whenever pinch / mouse click is happening, globally.

Parameters​

_event​

SelectEvent

Returns​

void

Inherited from​

View.onSelecting

onSelectStart()​

onSelectStart(_event): void

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

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:79

Returns​

void

Inherited from​

View.onSimulatorStarted

onSqueeze()​

onSqueeze(_event): void

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

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:122

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:117

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:127

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:237

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:77

Returns​

void

Inherited from​

View.onXRSessionEnded

onXRSessionStarted()​

onXRSessionStarted(_session?): void

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

Parameters​

_session?​

XRSession

Returns​

void

Inherited from​

View.onXRSessionStarted

physicsStep()​

physicsStep(): void

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

Returns​

void

Inherited from​

View.physicsStep

resetLayout()​

resetLayout(): void

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

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:205

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:131

Makes the view and all its descendants visible.

Returns​

void

Inherited from​

View.show

update()​

update(): void

Defined in: src/ui/core/Panel.ts:285

Updates the fade animation progress each frame.

Returns​

void

Overrides​

View.update

updateLayout()​

updateLayout(): void

Defined in: src/ui/core/Panel.ts:314

Updates the panel's visual dimensions based on its layout properties.

Returns​

void

Overrides​

View.updateLayout

updateLayouts()​

updateLayouts(): void

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

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:186

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

dpToMeters()​

static dpToMeters(dp): number

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

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