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

Parameters

__namedParameters

castShadow?

boolean = true

raycastToChildren?

boolean = false

receiveShadow?

boolean = true

Returns

ModelViewer

Overrides

Script.constructor

Properties

animationMixer?

protected optional animationMixer: AnimationMixer<AnimationMixerEventMap>

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

---

bbox

bbox: Box3

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

---

camera?

protected optional camera: Camera

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

---

clipActions

clipActions: AnimationAction[] = []

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

---

controlBar?

protected optional controlBar: Mesh<BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>, Material<MaterialEventMap> | Material<MaterialEventMap>[], Object3DEventMap>

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

---

data?

protected optional data: GLTFData | SplatData

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

---

depth?

protected optional depth: Depth

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

---

draggable

draggable: boolean = true

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

Implementation of

Draggable.draggable

---

gltfMesh?

protected optional gltfMesh: GLTF

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

---

hoveringControllers

protected hoveringControllers: Set<unknown>

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

---

initialScale

initialScale: Vector3

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

---

isOneOneScale

isOneOneScale: boolean = false

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

---

isXRScript

isXRScript: boolean = true

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

Inherited from

Script.isXRScript

---

occludableShaders

protected occludableShaders: Set<Shader>

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

---

platform?

protected optional platform: ModelViewerPlatform

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

---

platformAnimationSpeed

platformAnimationSpeed: number = 2

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

---

platformThickness

platformThickness: number = 0.02

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

---

raycastToChildren

protected raycastToChildren: boolean

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

---

registry?

protected optional registry: Registry

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

---

renderer?

protected optional renderer: WebGLRenderer

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

---

rotatable

rotatable: boolean = true

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

---

rotationRaycastMesh?

protected optional rotationRaycastMesh: RotationRaycastMesh

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

---

scalable

scalable: boolean = true

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

---

scene?

protected optional scene: Scene<Object3DEventMap>

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

---

splatAnchor?

protected optional splatAnchor: SplatAnchor

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

---

splatMesh?

protected optional splatMesh: SplatMesh

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

---

startAnimationOnLoad

startAnimationOnLoad: boolean = true

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

---

timer

protected timer: Timer

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

---

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

timer

timer: typeof Timer = THREE.Timer

Methods

createSparkRendererIfNeeded()

createSparkRendererIfNeeded(): Promise<void>

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

Returns

Promise<void>

---

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

Script.dispose

---

getOcclusionEnabled()

getOcclusionEnabled(): any

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

Returns

any

---

init()

init(__namedParameters): Promise<void>

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

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

timer

Timer

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

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

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

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

Parameters

controller

Object3D

Returns

void

Whether the event was handled. If true, the event will not bubble up.

Overrides

Script.onHoverEnter

---

onHoverExit()

onHoverExit(controller): void

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

Called when the controller hovers over this object with reticle.

Parameters

controller

Object3D

Returns

void

Whether the event was handled. If true, the event will not bubble up.

Overrides

Script.onHoverExit

---

onHovering()

onHovering(_controller): boolean | 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

boolean | void

Whether the event was handled. If true, the event will not bubble up.

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

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

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

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

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

Returns

boolean

Whether the event was handled. If true, the event will not bubble up.

Overrides

Script.onObjectSelectEnd

---

onObjectSelectStart()

onObjectSelectStart(): boolean

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

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

Returns

boolean

Whether the event was handled. If true, the event will not bubble up.

Overrides

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

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

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

Script.onObjectTouchStart

---

onScaleButtonClick()

onScaleButtonClick(): void

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

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

Returns

void

---

raycast()

raycast(raycaster, intersects): boolean

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

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

Parameters

castShadow

boolean

Returns

void

---

setOcclusionEnabled()

setOcclusionEnabled(enabled): void

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

Parameters

enabled

boolean

Returns

void

---

setReceiveShadow()

setReceiveShadow(receiveShadow): void

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

Parameters

receiveShadow

boolean

Returns

void

---

setupBoundingBox()

setupBoundingBox(verticallyAlignObject, horizontallyAlignObject): Promise<void>

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

Parameters

verticallyAlignObject

boolean = true

horizontallyAlignObject

boolean = true

Returns

Promise<void>

---

setupPlatform()

setupPlatform(platformMargin): void

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

Parameters

platformMargin

Vector2 = defaultPlatformMargin

Returns

void

---

setupRaycastBox()

setupRaycastBox(): void

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

Returns

void

---

setupRaycastCylinder()

setupRaycastCylinder(): void

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

Returns

void

---

update()

update(): void

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

Runs per frame.

Returns

void

Overrides

Script.update