Skip to main content

Class: MaterialSymbolsView

Defined in: src/ui/components/MaterialSymbolsView.ts:27

A View that dynamically loads and displays an icon from the Google Material Symbols library as a 3D object. It constructs the icon from SVG data, allowing for customization of weight, style, color, and scale.

Extends

Constructors

Constructor

new MaterialSymbolsView(options): MaterialSymbolsView

Defined in: src/ui/components/MaterialSymbolsView.ts:78

Construct a Material Symbol view.

Parameters

options

MaterialSymbolsViewOptions

Options for the icon.

Returns

MaterialSymbolsView

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


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


iconScale

iconScale: number = 1

Defined in: src/ui/components/MaterialSymbolsView.ts:69


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


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


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


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

Accessors

icon

Get Signature

get icon(): string

Defined in: src/ui/components/MaterialSymbolsView.ts:29

Returns

string

Set Signature

set icon(value): void

Defined in: src/ui/components/MaterialSymbolsView.ts:32

Parameters
value

string

Returns

void


iconColor

Get Signature

get iconColor(): string

Defined in: src/ui/components/MaterialSymbolsView.ts:56

Returns

string

Set Signature

set iconColor(value): void

Defined in: src/ui/components/MaterialSymbolsView.ts:59

Parameters
value

string

Returns

void


iconStyle

Get Signature

get iconStyle(): string

Defined in: src/ui/components/MaterialSymbolsView.ts:47

Returns

string

Set Signature

set iconStyle(value): void

Defined in: src/ui/components/MaterialSymbolsView.ts:50

Parameters
value

string

Returns

void


iconWeight

Get Signature

get iconWeight(): number

Defined in: src/ui/components/MaterialSymbolsView.ts:38

Returns

number

Set Signature

set iconWeight(value): void

Defined in: src/ui/components/MaterialSymbolsView.ts:41

Parameters
value

number

Returns

void


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

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

MaterialSymbolsView

Inherited from

View.add


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(): Promise<void>

Defined in: src/ui/components/MaterialSymbolsView.ts:93

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.

Returns

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

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

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: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(_event): void

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

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


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(_time?, _frame?): void

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

Runs per frame.

Parameters

_time?

number

_frame?

XRFrame

Returns

void

Inherited from

View.update


updateIcon()

updateIcon(): Promise<void>

Defined in: src/ui/components/MaterialSymbolsView.ts:105

Updates the icon displayed by loading the appropriate SVG from the Material Symbols library based on the current icon, iconWeight, and iconStyle properties.

Returns

Promise<void>

Promise


updateLayout()

updateLayout(): void

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

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

Returns

void

Inherited from

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


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