Class: SpatialPanel
Defined in: src/ui/layouts/SpatialPanel.ts:15
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
Constructors
Constructor
new SpatialPanel(
options):SpatialPanel
Defined in: src/ui/layouts/SpatialPanel.ts:24
Creates an instance of SpatialPanel.
Parameters
options
SpatialPanelOptions = {}
Returns
SpatialPanel
Overrides
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
backgroundColor
backgroundColor:
string='#c2c2c255'
Defined in: src/ui/core/Panel.ts:80
The background color of the panel, expressed as a CSS color string.
Inherited from
dragFacingCamera
dragFacingCamera:
boolean=true
Defined in: src/ui/layouts/SpatialPanel.ts:19
Keeps the panel facing the camera as it is dragged.
draggable
draggable:
boolean=false
Defined in: src/ui/core/Panel.ts:55
Determines if the panel can be dragged by the user.
Inherited from
draggingMode?
optionaldraggingMode:DragMode
Defined in: src/ui/core/Panel.ts:58
Dragging mode, defaults to true if draggable else undefined.
Inherited from
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
isPanel
isPanel:
boolean=true
Defined in: src/ui/core/Panel.ts:49
Type identifier for easy checking with instanceof.
Inherited from
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
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
isView
isView:
boolean=true
Defined in: src/ui/core/View.ts:31
Type identifier for easy checking with instanceof.
Inherited from
isXRScript
isXRScript:
boolean=true
Defined in: src/core/Script.ts:53
Inherited from
keepFacingCamera
keepFacingCamera:
boolean=true
Defined in: src/ui/core/Panel.ts:43
Inherited from
mesh
mesh:
PanelMesh
Defined in: src/ui/core/Panel.ts:52
The underlying mesh that renders the panel's background.
Inherited from
name
name:
string='Panel'
Defined in: src/ui/core/Panel.ts:46
Text description of the view
Inherited from
onFadeComplete()?
optionalonFadeComplete: () =>void
Defined in: src/ui/core/Panel.ts:116
An optional callback function to execute when a fade animation completes.
Returns
void
Inherited from
opacity
opacity:
number=1.0
Defined in: src/ui/core/View.ts:68
The overall opacity of the view and its children.
Inherited from
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
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
paddingZ
paddingZ:
number=0
Defined in: src/ui/core/View.ts:63
Depth padding, for z-axis adjustment to prevent z-fighting.
Inherited from
selectable
selectable:
boolean=true
Defined in: src/ui/core/View.ts:33
Determines if this view can be targeted by user input.
Inherited from
showHighlights
showHighlights:
boolean=false
Defined in: src/ui/core/Panel.ts:77
Whether to show highlights for the spatial panel.
Inherited from
touchable
touchable:
boolean=false
Defined in: src/ui/core/Panel.ts:61
Determines if the panel can be touched by the user's hands.
Inherited from
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.
Inherited from
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.
Inherited from
ux
ux:
UX
Defined in: src/core/Script.ts:52
Inherited from
weight
weight:
number=0.5
Defined in: src/ui/core/View.ts:38
Proportional size used in layouts like Row or Col.
Inherited from
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
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
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
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
dependencies
staticdependencies:object
Defined in: src/ui/core/Panel.ts:41
timer
timer: typeof
Timer=THREE.Timer
user
user: typeof
User=User
Inherited from
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
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
Methods
add()
add(...
children):SpatialPanel
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
SpatialPanel
Inherited from
addGrid()
addGrid():
Grid
Defined in: src/ui/core/Panel.ts:290
Adds a Grid layout as a direct child of this panel.
Returns
The newly created Grid instance.
Inherited from
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
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
fadeIn()
fadeIn(
duration?,onComplete?):void
Defined in: src/ui/core/Panel.ts:186
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
Inherited from
fadeOut()
fadeOut(
duration?,onComplete?):void
Defined in: src/ui/core/Panel.ts:197
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
Inherited from
getHeight()
getHeight():
number
Defined in: src/ui/core/Panel.ts:321
Gets the panel's height in meters.
Returns
number
The height in meters.
Inherited from
getWidth()
getWidth():
number
Defined in: src/ui/core/Panel.ts:313
Gets the panel's width in meters.
Returns
number
The width in meters.
Inherited from
hide()
hide():
void
Defined in: src/ui/core/View.ts:137
Makes the view and all its descendants invisible.
Returns
void
Inherited from
init()
init(
__namedParameters):void
Defined in: src/ui/core/Panel.ts:159
Initializes the panel, setting its default position if applicable.
Parameters
__namedParameters
timer
user
Returns
void
Inherited from
initPhysics()
initPhysics(
_physics):void|Promise<void>
Defined in: src/core/Script.ts:72
Enables depth-aware interactions with physics. See /demos/ballpit
Parameters
_physics
Returns
void | Promise<void>
Inherited from
onHoverEnter()
onHoverEnter(
_controller):void
Defined in: src/core/Script.ts:157
Called when the controller starts hovering over this object with reticle.
Parameters
_controller
An XR controller.
Returns
void
Inherited from
onHoverExit()
onHoverExit(
_controller):void
Defined in: src/core/Script.ts:162
Called when the controller hovers over this object with reticle.
Parameters
_controller
An XR controller.
Returns
void
Inherited from
onHovering()
onHovering(
_controller):void
Defined in: src/core/Script.ts:167
Called when the controller hovers over this object with reticle.
Parameters
_controller
An XR controller.
Returns
void
Inherited from
onKeyDown()
onKeyDown(
_event):void
Defined in: src/core/Script.ts:109
Called on keyboard keypress.
Parameters
_event
Event containing .code to read the keyboard key.
Returns
void
Inherited from
onKeyUp()
onKeyUp(
_event):void
Defined in: src/core/Script.ts:110
Parameters
_event
Returns
void
Inherited from
onObjectGrabbing()
onObjectGrabbing(
_event):void
Defined in: src/core/Script.ts:187
Called every frame a hand is grabbing this object.
Parameters
_event
Returns
void
Inherited from
onObjectGrabEnd()
onObjectGrabEnd(
_event):void
Defined in: src/core/Script.ts:191
Called when a hand stops grabbing this object.
Parameters
_event
Returns
void
Inherited from
onObjectGrabStart()
onObjectGrabStart(
_event):void
Defined in: src/core/Script.ts:183
Called when a hand starts grabbing this object (touching + pinching).
Parameters
_event
Returns
void
Inherited from
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
event.target holds its controller.
Returns
boolean
Whether the event was handled
Inherited from
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
event.target holds its controller.
Returns
boolean
Whether the event was handled
Inherited from
onObjectTouchEnd()
onObjectTouchEnd(
_event):void
Defined in: src/core/Script.ts:179
Called when a hand's index finger stops touching this object.
Parameters
_event
Returns
void
Inherited from
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
Returns
void
Inherited from
onObjectTouchStart()
onObjectTouchStart(
_event):void
Defined in: src/core/Script.ts:171
Called when a hand's index finger starts touching this object.
Parameters
_event
Returns
void
Inherited from
onSelect()
onSelect(
_event):void
Defined in: src/core/Script.ts:98
Called whenever pinch / mouse click successfully completes, globally.
Parameters
_event
event.target holds its controller.
Returns
void
Inherited from
onSelectEnd()
onSelectEnd(
_event):void
Defined in: src/core/Script.ts:92
Called whenever pinch / mouse click discontinues, globally.
Parameters
_event
event.target holds its controller
Returns
void
Inherited from
onSelecting()
onSelecting(
_event):void
Defined in: src/core/Script.ts:103
Called whenever pinch / mouse click is happening, globally.
Parameters
_event
Returns
void
Inherited from
onSelectStart()
onSelectStart(
_event):void
Defined in: src/core/Script.ts:86
Called whenever pinch / mouse click starts, globally.
Parameters
_event
event.target holds its controller
Returns
void
Inherited from
onSimulatorStarted()
onSimulatorStarted():
void
Defined in: src/core/Script.ts:78
Returns
void
Inherited from
onSqueeze()
onSqueeze(
_event):void
Defined in: src/core/Script.ts:132
Called whenever gamepad trigger successfully completes, globally.
Parameters
_event
event.target holds its controller.
Returns
void
Inherited from
onSqueezeEnd()
onSqueezeEnd(
_event):void
Defined in: src/core/Script.ts:121
Called whenever gamepad trigger stops, globally.
Parameters
_event
event.target holds its controller.
Returns
void
Inherited from
onSqueezeStart()
onSqueezeStart(
_event):void
Defined in: src/core/Script.ts:116
Called whenever gamepad trigger starts, globally.
Parameters
_event
event.target holds its controller.
Returns
void
Inherited from
onSqueezing()
onSqueezing(
_event):void
Defined in: src/core/Script.ts:126
Called whenever gamepad is being triggered, globally.
Parameters
_event
Returns
void
Inherited from
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
onXRSessionEnded()
onXRSessionEnded():
void
Defined in: src/core/Script.ts:76
Returns
void
Inherited from
onXRSessionStarted()
onXRSessionStarted(
_session?):void
Defined in: src/core/Script.ts:75
Parameters
_session?
Returns
void
Inherited from
physicsStep()
physicsStep():
void
Defined in: src/core/Script.ts:73
Returns
void
Inherited from
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
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
show()
show():
void
Defined in: src/ui/core/View.ts:129
Makes the view and all its descendants visible.
Returns
void
Inherited from
update()
update():
void
Defined in: src/ui/layouts/SpatialPanel.ts:34
Updates the fade animation progress each frame.
Returns
void
Overrides
updateLayout()
updateLayout():
void
Defined in: src/ui/core/Panel.ts:299
Updates the panel's visual dimensions based on its layout properties.
Returns
void
Inherited from
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
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
dpToMeters()
staticdpToMeters(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.