Class: ModelViewer

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

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

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

---

draggable

draggable: boolean = true

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

Implementation of

Draggable.draggable

---

initialScale

initialScale: Vector3

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

---

isOneOneScale

isOneOneScale: boolean = false

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

---

isXRScript

isXRScript: boolean = true

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

Inherited from

Script.isXRScript

---

platformAnimationSpeed

platformAnimationSpeed: number = 2

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

---

platformThickness

platformThickness: number = 0.02

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

---

rotatable

rotatable: boolean = true

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

---

scalable

scalable: boolean = true

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

---

startAnimationOnLoad

startAnimationOnLoad: boolean = true

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

---

ux

ux: UX

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

Inherited from

Script.ux

---

dependencies

static dependencies: object

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

camera

camera: typeof Camera = THREE.Camera

depth

depth: typeof Depth = Depth

renderer

renderer: typeof WebGLRenderer = THREE.WebGLRenderer

scene

scene: typeof Scene = THREE.Scene

Methods

createSparkRendererIfNeeded()

createSparkRendererIfNeeded(): Promise<void>

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

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

Returns

any

---

init()

init(__namedParameters): Promise<void>

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

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

renderer

WebGLRenderer

scene

Scene

Returns

Promise<void>

Overrides

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

Script.initPhysics

---

loadGLTFModel()

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

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

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

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

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

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

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

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

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

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

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

Returns

void

---

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

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

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

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

Script.onSelectStart

---

onSimulatorStarted()

onSimulatorStarted(): void

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

Returns

void

Inherited from

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

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

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

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

Script.onSqueezing

---

onXRSessionEnded()

onXRSessionEnded(): void

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

Returns

void

Inherited from

Script.onXRSessionEnded

---

onXRSessionStarted()

onXRSessionStarted(_session?): void

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

Parameters

_session?

XRSession

Returns

void

Inherited from

Script.onXRSessionStarted

---

physicsStep()

physicsStep(): void

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

Returns

void

Inherited from

Script.physicsStep

---

playClipAnimationOnce()

playClipAnimationOnce(): void

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

Returns

void

---

raycast()

raycast(raycaster, intersects): boolean

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

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

Parameters

castShadow

boolean

Returns

void

---

setOcclusionEnabled()

setOcclusionEnabled(enabled): void

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

Parameters

enabled

boolean

Returns

void

---

setReceiveShadow()

setReceiveShadow(receiveShadow): void

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

Parameters

receiveShadow

boolean

Returns

void

---

setupBoundingBox()

setupBoundingBox(verticallyAlignObject, horizontallyAlignObject): Promise<void>

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

Parameters

verticallyAlignObject

boolean = true

horizontallyAlignObject

boolean = true

Returns

Promise<void>

---

setupPlatform()

setupPlatform(platformMargin): void

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

Parameters

platformMargin

Vector2 = defaultPlatformMargin

Returns

void

---

setupRaycastBox()

setupRaycastBox(): void

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

Returns

void

---

setupRaycastCylinder()

setupRaycastCylinder(): void

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

Returns

void

---

update()

update(): void

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

Runs per frame.

Returns

void

Overrides

Script.update