Class: LabelView
Defined in: src/ui/components/LabelView.ts:10
A view for displaying text in 3D. It features a dual-rendering system:
- SDF Text (Default): Uses
troika-three-textto render crisp, high-quality text using Signed Distance Fields. This is ideal for most use cases. The library is loaded dynamically on demand. - HTML Canvas Fallback: If
troika-three-textfails to load or is disabled viauseSDFText: false, it renders text to an HTML canvas and applies it as a texture to a plane.
Extends
Constructors
Constructor
new LabelView(
options):LabelView
Defined in: src/ui/components/LabelView.ts:11
Parameters
options
TextViewOptions = {}
Returns
LabelView
Overrides
Properties
anchorX
anchorX:
number|"left"|"right"|"center"|`${number}%`='center'
Defined in: src/ui/components/TextView.ts:103
Horizontal anchor point ('left', 'center', 'right').
Inherited from
anchorY
anchorY:
number|`${number}%`|"top"|"top-baseline"|"top-cap"|"top-ex"|"middle"|"bottom-baseline"|"bottom"='middle'
Defined in: src/ui/components/TextView.ts:105
Vertical anchor point ('top', 'middle', 'bottom').
Inherited from
aspectRatio
aspectRatio:
number=1.0
Defined in: src/ui/core/View.ts:72
The calculated aspect ratio (width / height) of this view.
Inherited from
canvas?
optionalcanvas:HTMLCanvasElement
Defined in: src/ui/components/TextView.ts:126
Fallback HTML canvas to render legacy text.
Inherited from
ctx?
optionalctx:CanvasRenderingContext2D
Defined in: src/ui/components/TextView.ts:128
Fallback HTML canvas context to render legacy text.
Inherited from
font
font:
string=FONT_FAMILIES.Roboto
Defined in: src/ui/components/TextView.ts:88
The font file to use. Defaults to Roboto.
Inherited from
fontColor
fontColor:
string|number=0xFFFFFF
Defined in: src/ui/components/TextView.ts:93
The color of the font.
Inherited from
fontSize?
optionalfontSize:number
Defined in: src/ui/components/TextView.ts:90
The size of the font in world units.
Inherited from
fontSizeDp?
optionalfontSizeDp:number
Defined in: src/ui/components/TextView.ts:91
Inherited from
height
height:
number=1
Defined in: src/ui/components/TextView.ts:123
Relative local height.
Inherited from
imageOffsetX
imageOffsetX:
number=0
Defined in: src/ui/components/TextView.ts:112
The horizontal offset for the imageOverlay texture.
Inherited from
imageOffsetY
imageOffsetY:
number=0
Defined in: src/ui/components/TextView.ts:114
The vertical offset for the imageOverlay texture.
Inherited from
imageOverlay?
optionalimageOverlay:string
Defined in: src/ui/components/TextView.ts:110
An optional image URL to use as an overlay texture on the text.
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/components/TextView.ts:81
TextView resides in a panel by default.
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
lineCount
lineCount:
number=0
Defined in: src/ui/components/TextView.ts:132
The total number of lines after text wrapping.
Inherited from
lineHeight
lineHeight:
number=0
Defined in: src/ui/components/TextView.ts:130
The calculated height of a single line of text.
Inherited from
maxWidth
maxWidth:
number=1.0
Defined in: src/ui/components/TextView.ts:99
The maximum width the text can occupy before wrapping. To fit a long TextView within a container, this value should be its container's height / width to avoid it getting rendered outside.
Inherited from
mesh?
optionalmesh: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
mode
mode:
string='fitWidth'
Defined in: src/ui/components/TextView.ts:101
Layout mode. 'fitWidth' scales text to fit the view's width.
Inherited from
name
name:
string='TextView'
Defined in: src/ui/components/TextView.ts:83
Default description of this view in Three.js DevTools.
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
textAlign
textAlign:
string='center'
Defined in: src/ui/components/TextView.ts:108
Horizontal alignment ('left', 'center', 'right').
Inherited from
textObj?
optionaltextObj:Mesh<BufferGeometry<NormalBufferAttributes,BufferGeometryEventMap>,Material|Material[],Object3DEventMap> |Text
Defined in: src/ui/components/TextView.ts:86
The underlying renderable object (either a Troika Text or a Plane.
Inherited from
useSDFText
useSDFText:
boolean=true
Defined in: src/ui/components/TextView.ts:79
Determines which rendering backend to use. Defaults to SDF text.
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/components/TextView.ts:121
Relative local width.
Inherited from
x
x:
number=0
Defined in: src/ui/components/TextView.ts:117
Relative local offset in X.
Inherited from
y
y:
number=0
Defined in: src/ui/components/TextView.ts:119
Relative local offset in Y.
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
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
text
Get Signature
get text():
string
Defined in: src/ui/components/TextView.ts:146
Returns
string
Set Signature
set text(
text):void
Defined in: src/ui/components/TextView.ts:136
Parameters
text
string
Returns
void
Inherited from
Methods
_initializeText()
protected_initializeText():void
Defined in: src/ui/components/TextView.ts:330
Private method to perform the actual initialization after the async import has resolved.
Returns
void
Inherited from
add()
add(...
children):LabelView
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
LabelView
Inherited from
createTextSDF()
protectedcreateTextSDF():void
Defined in: src/ui/components/LabelView.ts:16
Creates the text object using Troika Three Text for SDF rendering.
This method should only be called from _initializeText() when useSDFText
is true and the troika-three-text module has been successfully imported.
Returns
void
Overrides
dispose()
dispose():
void
Defined in: src/ui/components/TextView.ts:383
Disposes of resources used by the TextView, such as event listeners.
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
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(
_?):Promise<void>
Defined in: src/ui/components/TextView.ts:182
Initializes the TextView. It waits for the Troika module to be imported and then creates the text object, sets up aspect ratio, and loads overlays.
Parameters
_?
object
Returns
Promise<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
onSyncComplete()
onSyncComplete():
void
Defined in: src/ui/components/TextView.ts:301
Callback executed when Troika's text sync is complete. It captures layout data like total height and line count.
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
setText()
setText(
text):void
Defined in: src/ui/components/TextView.ts:191
Sets the text content of the view.
Parameters
text
string
The text to be displayed.
Returns
void
Inherited from
setTextColor()
protectedsetTextColor(color):void
Defined in: src/ui/components/TextView.ts:374
Parameters
color
number
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
syncTextObj()
protectedsyncTextObj():void
Defined in: src/ui/components/TextView.ts:368
Returns
void
Inherited from
update()
update(
_time?,_frame?):void
Defined in: src/core/Script.ts:67
Runs per frame.
Parameters
_time?
number
_frame?
Returns
void
Inherited from
updateLayout()
updateLayout():
void
Defined in: src/ui/components/TextView.ts:198
Updates the layout of the text object, such as its render order.
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.