Class: ModelViewer

Defined in: src/ui/interaction/ModelViewer.ts:68

A comprehensive UI component for loading, displaying, and interacting with 3D models (GLTF and Splats) in an XR scene. It automatically creates an interactive platform for translation and provides mechanisms for rotation and scaling in both desktop and XR.

Extends

• Script

Implements

• Draggable

Constructors

Constructor

new ModelViewer(__namedParameters): ModelViewer

Defined in: src/ui/interaction/ModelViewer.ts:107

Parameters

__namedParameters

castShadow?

boolean = true

raycastToChildren?

boolean = false

receiveShadow?

boolean = true

Returns

ModelViewer

Overrides

Script.constructor

Properties

clipActions

clipActions: AnimationAction[] = []

Defined in: src/ui/interaction/ModelViewer.ts:85

---

draggable

draggable: boolean = true

Defined in: src/ui/interaction/ModelViewer.ts:77

Implementation of

Draggable.draggable

---

initialScale

initialScale: Vector3

Defined in: src/ui/interaction/ModelViewer.ts:83

---

isOneOneScale

isOneOneScale: boolean = false

Defined in: src/ui/interaction/ModelViewer.ts:82

---

isXRScript

isXRScript: boolean = true

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

Inherited from

Script.isXRScript

---

platformAnimationSpeed

platformAnimationSpeed: number = 2

Defined in: src/ui/interaction/ModelViewer.ts:80

---

platformThickness

platformThickness: number = 0.02

Defined in: src/ui/interaction/ModelViewer.ts:81

---

rotatable

rotatable: boolean = true

Defined in: src/ui/interaction/ModelViewer.ts:78

---

scalable

scalable: boolean = true

Defined in: src/ui/interaction/ModelViewer.ts:79

---

startAnimationOnLoad

startAnimationOnLoad: boolean = true

Defined in: src/ui/interaction/ModelViewer.ts:84

---

ux

ux: UX

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

Inherited from

Script.ux

---

dependencies

static dependencies: object

Defined in: src/ui/interaction/ModelViewer.ts:69

camera

camera: typeof Camera = THREE.Camera

depth

depth: typeof Depth = Depth

registry

registry: typeof Registry = Registry

renderer

renderer: typeof WebGLRenderer = THREE.WebGLRenderer

scene

scene: typeof Scene = THREE.Scene

Methods

createSparkRendererIfNeeded()

createSparkRendererIfNeeded(): Promise<void>

Defined in: src/ui/interaction/ModelViewer.ts:587

Returns

Promise<void>

---

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

Script.dispose

---

getOcclusionEnabled()

getOcclusionEnabled(): any

Defined in: src/ui/interaction/ModelViewer.ts:561

Returns

any

---

init()

init(__namedParameters): Promise<void>

Defined in: src/ui/interaction/ModelViewer.ts:118

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

camera

Camera

depth

Depth

registry

Registry

renderer

WebGLRenderer

scene

Scene

Returns

Promise<void>

Overrides

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

Script.initPhysics

---

loadGLTFModel()

loadGLTFModel(__namedParameters): Promise<void | Group<Object3DEventMap>>

Defined in: src/ui/interaction/ModelViewer.ts:212

Parameters

__namedParameters

addOcclusionToShader?

boolean = false

data

GLTFData

onSceneLoaded?

(scene) => void = ...

platformMargin?

Vector2 = defaultPlatformMargin

renderer?

WebGLRenderer = undefined

setupPlatform?

boolean = true

setupRaycastBox?

boolean = false

setupRaycastCylinder?

boolean = true

Returns

Promise<void | Group<Object3DEventMap>>

---

loadSplatModel()

loadSplatModel(__namedParameters): Promise<void | SplatAnchor>

Defined in: src/ui/interaction/ModelViewer.ts:147

Parameters

__namedParameters

data

SplatData

onSceneLoaded?

(scene) => void = ...

platformMargin?

Vector2 = defaultPlatformMargin

setupPlatform?

boolean = true

setupRaycastBox?

boolean = false

setupRaycastCylinder?

boolean = true

Returns

Promise<void | SplatAnchor>

---

onHoverEnter()

onHoverEnter(controller): void

Defined in: src/ui/interaction/ModelViewer.ts:474

Called when the controller starts hovering over this object with reticle.

Parameters

controller

Object3D

Returns

void

Overrides

Script.onHoverEnter

---

onHoverExit()

onHoverExit(controller): void

Defined in: src/ui/interaction/ModelViewer.ts:481

Called when the controller hovers over this object with reticle.

Parameters

controller

Object3D

Returns

void

Overrides

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

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

Script.onKeyDown

---

onKeyUp()

onKeyUp(_event): void

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

Parameters

_event

KeyEvent

Returns

void

Inherited from

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

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

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

Script.onObjectGrabStart

---

onObjectSelectEnd()

onObjectSelectEnd(): boolean

Defined in: src/ui/interaction/ModelViewer.ts:470

Called when the controller stops selecting this object the script represents, e.g. View, ModelView.

Returns

boolean

Whether the event was handled

Overrides

Script.onObjectSelectEnd

---

onObjectSelectStart()

onObjectSelectStart(): boolean

Defined in: src/ui/interaction/ModelViewer.ts:466

Called when the controller starts selecting this object the script represents, e.g. View, ModelView.

Returns

boolean

Whether the event was handled

Overrides

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

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

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

Script.onObjectTouchStart

---

onScaleButtonClick()

onScaleButtonClick(): void

Defined in: src/ui/interaction/ModelViewer.ts:533

Returns

void

---

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

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

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

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

Script.onSelectStart

---

onSimulatorStarted()

onSimulatorStarted(): void

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

Returns

void

Inherited from

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

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

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

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

Script.onSqueezing

---

onXRSessionEnded()

onXRSessionEnded(): void

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

Returns

void

Inherited from

Script.onXRSessionEnded

---

onXRSessionStarted()

onXRSessionStarted(_session?): void

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

Parameters

_session?

XRSession

Returns

void

Inherited from

Script.onXRSessionStarted

---

physicsStep()

physicsStep(): void

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

Returns

void

Inherited from

Script.physicsStep

---

playClipAnimationOnce()

playClipAnimationOnce(): void

Defined in: src/ui/interaction/ModelViewer.ts:574

Returns

void

---

raycast()

raycast(raycaster, intersects): boolean

Defined in: src/ui/interaction/ModelViewer.ts:491

Parameters

raycaster

Raycaster

intersects

Intersection<Object3D<Object3DEventMap>>[]

Returns

boolean

Implementation of

Draggable.raycast

Overrides

Script.raycast

---

setCastShadow()

setCastShadow(castShadow): void

Defined in: src/ui/interaction/ModelViewer.ts:537

Parameters

castShadow

boolean

Returns

void

---

setOcclusionEnabled()

setOcclusionEnabled(enabled): void

Defined in: src/ui/interaction/ModelViewer.ts:568

Parameters

enabled

boolean

Returns

void

---

setReceiveShadow()

setReceiveShadow(receiveShadow): void

Defined in: src/ui/interaction/ModelViewer.ts:549

Parameters

receiveShadow

boolean

Returns

void

---

setupBoundingBox()

setupBoundingBox(verticallyAlignObject, horizontallyAlignObject): Promise<void>

Defined in: src/ui/interaction/ModelViewer.ts:316

Parameters

verticallyAlignObject

boolean = true

horizontallyAlignObject

boolean = true

Returns

Promise<void>

---

setupPlatform()

setupPlatform(platformMargin): void

Defined in: src/ui/interaction/ModelViewer.ts:410

Parameters

platformMargin

Vector2 = defaultPlatformMargin

Returns

void

---

setupRaycastBox()

setupRaycastBox(): void

Defined in: src/ui/interaction/ModelViewer.ts:391

Returns

void

---

setupRaycastCylinder()

setupRaycastCylinder(): void

Defined in: src/ui/interaction/ModelViewer.ts:376

Returns

void

---

update()

update(): void

Defined in: src/ui/interaction/ModelViewer.ts:426

Runs per frame.

Returns

void

Overrides

Script.update