# Viewer

Viewer contains pre-defined scene, camera and renderer

## Constructor

#### new Viewer(optionsopt)

Source:
  - viewer/Viewer.js, line 42

##### Parameters:

Name | Type | Attributes | Description
--- | --- | --- | ---
`options` | object | <optional> | Use custom or default config options ###### Properties
Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`container` | HTMLElement | <optional> |  | A HTMLElement to host the canvas
`scene` | THREE.Scene | <optional> | `THREE.Scene` | A THREE.Scene which contains panorama and 3D objects
`camera` | THREE.Camera | <optional> | `THREE.PerspectiveCamera` | A THREE.Camera to view the scene
`renderer` | THREE.WebGLRenderer | <optional> | `THREE.WebGLRenderer` | A THREE.WebGLRenderer to render canvas
`controlBar` | boolean | <optional> | `true` | Show/hide control bar on the bottom of the container
`controlButtons` | array | <optional> | `[]` | Button names to mount on controlBar if controlBar exists, Defaults to ['fullscreen', 'setting', 'video']
`autoHideControlBar` | boolean | <optional> | `false` | Auto hide control bar when click on non-active area
`autoHideInfospot` | boolean | <optional> | `true` | Auto hide infospots when click on non-active area
`horizontalView` | boolean | <optional> | `false` | Allow only horizontal camera control
`clickTolerance` | number | <optional> | `10` | Distance tolerance to tigger click / tap event
`cameraFov` | number | <optional> | `60` | Camera field of view value
`reverseDragging` | boolean | <optional> | `false` | Reverse dragging direction
`enableReticle` | boolean | <optional> | `false` | Enable reticle for mouseless interaction other than VR mode
`dwellTime` | number | <optional> | `1500` | Dwell time for reticle selection in ms
`autoReticleSelect` | boolean | <optional> | `true` | Auto select a clickable target after dwellTime
`viewIndicator` | boolean | <optional> | `false` | Adds an angle view indicator in upper left corner
`indicatorSize` | number | <optional> | `30` | Size of View Indicator
`output` | string | <optional> | `'none'` | Whether and where to output raycast position. Could be 'console' or 'overlay'
`autoRotate` | boolean | <optional> | `false` | Auto rotate
`autoRotateSpeed` | number | <optional> | `2.0` | Auto rotate speed as in degree per second. Positive is counter-clockwise and negative is clockwise.
`autoRotateActivationDuration` | number | <optional> | `5000` | Duration before auto rotatation when no user interactivity in ms

### Methods

#### activateWidgetItem(controlIndex, mode)

Source:
  - viewer/Viewer.js, line 414

Set widget content

##### Parameters:

Name | Type | Description
--- | --- | ---
`controlIndex` | integer | Control index
`mode` | integer | Modes for effects

#### add(object)

Source:
  - viewer/Viewer.js, line 250

Add an object to the scene Automatically hookup with panolens-viewer-handler listener to communicate with viewer method

##### Parameters:

Name | Type | Description
--- | --- | ---
`object` | THREE.Object3D | The object to be added

#### addDefaultControlBar(array)

Source:
  - viewer/Viewer.js, line 325

Add default control bar

##### Parameters:

Name | Type | Description
--- | --- | ---
`array` | array | The control buttons array

#### addOutputElement()

Source:
  - viewer/Viewer.js, line 1281

Add output element

#### addPanoramaEventListener(pano)

Source:
  - viewer/Viewer.js, line 816

Add default panorama event listeners

##### Parameters:

Name | Type | Description
--- | --- | ---
`pano` | Panorama | The panorama to be added with event listener

#### addReticle()

Source:
  - viewer/Viewer.js, line 1081

Add reticle

#### addUpdateCallback(callback)

Source:
  - viewer/Viewer.js, line 728

Add update callback to be called every animation frame

##### Parameters:

Name | Type | Description
--- | --- | ---
`callback` | function |

#### addViewIndicator()

Source:
  - viewer/Viewer.js, line 2040

View indicator in upper left

#### animate()

Source:
  - viewer/Viewer.js, line 1806

Animate

#### appendControlItem(optionopt)

Source:
  - viewer/Viewer.js, line 2110

Append custom control item to existing control bar

##### Parameters:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`option` | object | <optional> | `{}` | Style object to overwirte default element style. It takes 'style', 'onTap' and 'group' properties.

#### checkSpriteInViewport()

Source:
  - viewer/Viewer.js, line 1054

Check Sprite in Viewport

#### clearAllCache()

Source:
  - viewer/Viewer.js, line 2133

Clear all cached files

#### destroy()

Source:
  - viewer/Viewer.js, line 1988

Destroy viewer by disposing and stopping requestAnimationFrame

#### disableAutoRate()

Source:
  - viewer/Viewer.js, line 648

Disable auto rotation

#### disableControl()

Source:
  - viewer/Viewer.js, line 1011

Disable current control

#### disableEffect()

Source:
  - viewer/Viewer.js, line 559

Disable additional rendering effect

#### disableReticleControl()

Source:
  - viewer/Viewer.js, line 612

Disable reticle control

#### dispatchEventToChildren(event)

Source:
  - viewer/Viewer.js, line 400

Dispatch event to all descendants

##### Parameters:

Name | Type | Description
--- | --- | ---
`event` | object | Event to be passed along

#### dispose()

Source:
  - viewer/Viewer.js, line 1933

Dispose all scene objects and clear cache

#### enableAutoRate()

Source:
  - viewer/Viewer.js, line 636

Enable auto rotation

#### enableControl(index)

Source:
  - viewer/Viewer.js, line 970

Enable control by index

##### Parameters:

Name | Type | Description
--- | --- | ---
`index` | CONTROLS | Index of camera control

#### enableEffect(mode)

Source:
  - viewer/Viewer.js, line 495

Enable rendering effect

##### Parameters:

Name | Type | Description
--- | --- | ---
`mode` | MODES | Modes for effects

#### enableReticleControl()

Source:
  - viewer/Viewer.js, line 593

Enable reticle control

#### eventHandler(event)

Source:
  - viewer/Viewer.js, line 384

Event handler to execute commands from child objects

##### Parameters:

Name | Type | Description
--- | --- | ---
`event` | object | The dispatched event with method as function name and data as an argument

#### getCamera() → {THREE.Camera}

Source:
  - viewer/Viewer.js, line 881

Get camera

##### Returns:

- The scene camera

Type
  THREE.Camera

#### getContainer() → {HTMLElement}

Source:
  - viewer/Viewer.js, line 905

Get container

##### Returns:

- The container holds rendererd canvas

Type
  HTMLElement

#### getControl() → {object|THREE.OrbitControls|THREE.DeviceOrientationControls}

Source:
  - viewer/Viewer.js, line 857

Get current camera control

##### Returns:

- - Current navigation control
  Type
    object
- Type
    THREE.OrbitControls | THREE.DeviceOrientationControls

#### getControlId() → {string}

Source:
  - viewer/Viewer.js, line 917

Get control id

##### Returns:

- Control id. 'orbit' or 'device-orientation'

Type
  string

#### getConvertedIntersect(intersects)

Source:
  - viewer/Viewer.js, line 1649

Get converted intersect

##### Parameters:

Name | Type | Description
--- | --- | ---
`intersects` | array |

#### getNextControlId() → {string}

Source:
  - viewer/Viewer.js, line 929

Get next navigation control id

##### Returns:

- Next control id

Type
  string

#### getNextControlIndex() → {number}

Source:
  - viewer/Viewer.js, line 941

Get next navigation control index

##### Returns:

- Next control index

Type
  number

#### getRenderer() → {THREE.WebGLRenderer}

Source:
  - viewer/Viewer.js, line 893

Get renderer

##### Returns:

- The renderer using webgl

Type
  THREE.WebGLRenderer

#### getScene() → {THREE.Scene}

Source:
  - viewer/Viewer.js, line 869

Get scene

##### Returns:

- Current scene which the viewer is built on

Type
  THREE.Scene

#### getScreenVector()

Source:
  - viewer/Viewer.js, line 1033

Screen Space Projection

#### hideInfospot()

Source:
  - viewer/Viewer.js, line 1680

Hide infospot

#### hideVideoWidget()

Source:
  - viewer/Viewer.js, line 779

Hide video widget

#### loadAsyncRequest(url, callbackopt)

Source:
  - viewer/Viewer.js, line 2024

Load ajax call

##### Parameters:

Name | Type | Attributes | Description
--- | --- | --- | ---
`url` | string |  | URL to be requested
`callback` | function | <optional> | Callback after request completes

#### onChange()

Source:
  - viewer/Viewer.js, line 1819

On change

#### onKeyDown(event)

Source:
  - viewer/Viewer.js, line 1721

On key down

##### Parameters:

Name | Type | Description
--- | --- | ---
`event` | KeyboardEvent |

#### onKeyUp(event)

Source:
  - viewer/Viewer.js, line 1737

On key up

##### Parameters:

Name | Type | Description
--- | --- | ---
`event` | KeyboardEvent |

#### onMouseDown(event)

Source:
  - viewer/Viewer.js, line 1338

On mouse down

##### Parameters:

Name | Type | Description
--- | --- | ---
`event` | MouseEvent |

#### onMouseMove(event)

Source:
  - viewer/Viewer.js, line 1355

On mouse move

##### Parameters:

Name | Type | Description
--- | --- | ---
`event` | MouseEvent |

#### onMouseUp(event)

Source:
  - viewer/Viewer.js, line 1369

On mouse up

##### Parameters:

Name | Type | Description
--- | --- | ---
`event` | MouseEvent |

#### onPanoramaDispose()

Source:
  - viewer/Viewer.js, line 2001

On panorama dispose

#### onTap(event, type)

Source:
  - viewer/Viewer.js, line 1436

On tap eveny frame

##### Parameters:

Name | Type | Description
--- | --- | ---
`event` | MouseEvent |
`type` | string |

#### onVideoUpdate(percentage)

Source:
  - viewer/Viewer.js, line 708

This will be called when video updates if an widget is present

##### Parameters:

Name | Type | Description
--- | --- | ---
`percentage` | number | Percentage of a video. Range from 0.0 to 1.0

##### Fires:

- Viewer#event:video-update

#### onWindowResize(windowWidthopt, windowHeightopt)

Source:
  - viewer/Viewer.js, line 1211

This is called when window size is changed

##### Parameters:

Name | Type | Attributes | Description
--- | --- | --- | ---
`windowWidth` | number | <optional> | Specify if custom element has changed width
`windowHeight` | number | <optional> | Specify if custom element has changed height

##### Fires:

- Viewer#event:window-resize

#### outputPosition()

Source:
  - viewer/Viewer.js, line 1298

Output position in developer console by holding down Ctrl button

#### registerEventListeners()

Source:
  - viewer/Viewer.js, line 1901

Register container and window listeners

#### registerMouseAndTouchEvents()

Source:
  - viewer/Viewer.js, line 1831

Register mouse and touch event on container

#### registerReticleEvent()

Source:
  - viewer/Viewer.js, line 1863

Register reticle event

#### remove(object)

Source:
  - viewer/Viewer.js, line 307

Remove an object from the scene

##### Parameters:

Name | Type | Description
--- | --- | ---
`object` | THREE.Object3D | Object to be removed

#### removeUpdateCallback(fn)

Source:
  - viewer/Viewer.js, line 744

Remove update callback

##### Parameters:

Name | Type | Description
--- | --- | ---
`fn` | function | The function to be removed

#### render()

Source:
  - viewer/Viewer.js, line 1781

Rendering function to be called on every animation frame Render reticle last

#### reverseDraggingDirection()

Source:
  - viewer/Viewer.js, line 1069

Reverse dragging direction

#### setCameraControl()

Source:
  - viewer/Viewer.js, line 844

Set camera control

#### setCameraFov(fov)

Source:
  - viewer/Viewer.js, line 957

Set field of view of camera

##### Parameters:

Name | Type | Description
--- | --- | ---
`fov` | number |

#### setPanorama(pano)

Source:
  - viewer/Viewer.js, line 353

Set a panorama to be the current one

##### Parameters:

Name | Type | Description
--- | --- | ---
`pano` | Panorama | Panorama to be set

#### setVideoCurrentTime(percentage)

Source:
  - viewer/Viewer.js, line 685

Set currentTime in a video

##### Parameters:

Name | Type | Description
--- | --- | ---
`percentage` | number | Percentage of a video. Range from 0.0 to 1.0

##### Fires:

- Viewer#event:video-time

#### showVideoWidget()

Source:
  - viewer/Viewer.js, line 761

Show video widget

#### toggleControlBar()

Source:
  - viewer/Viewer.js, line 1698

Toggle control bar

##### Fires:

- Viewer#event:control-bar-toggle

#### toggleNextControl()

Source:
  - viewer/Viewer.js, line 1022

Toggle next control

#### toggleVideoPlay(pause)

Source:
  - viewer/Viewer.js, line 663

Toggle video play or stop

##### Parameters:

Name | Type | Description
--- | --- | ---
`pause` | boolean |

##### Fires:

- Viewer#event:video-toggle

#### tweenControlCenter(vector, durationopt, easingopt)

Source:
  - viewer/Viewer.js, line 1098

Tween control looking center

##### Parameters:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`vector` | THREE.Vector3 |  |  | Vector to be looked at the center
`duration` | number | <optional> | `1000` | Duration to tween
`easing` | function | <optional> | `TWEEN.Easing.Exponential.Out` | Easing function

#### tweenControlCenterByObject(object, durationopt, easingopt)

Source:
  - viewer/Viewer.js, line 1176

Tween control looking center by object

##### Parameters:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`object` | THREE.Object3D |  |  | Object to be looked at the center
`duration` | number | <optional> | `1000` | Duration to tween
`easing` | function | <optional> | `TWEEN.Easing.Exponential.Out` | Easing function

#### unregisterEventListeners()

Source:
  - viewer/Viewer.js, line 1917

Unregister container and window listeners

#### unregisterMouseAndTouchEvents()

Source:
  - viewer/Viewer.js, line 1848

Unregister mouse and touch event on container

#### unregisterReticleEvent()

Source:
  - viewer/Viewer.js, line 1874

Unregister reticle event

#### update()

Source:
  - viewer/Viewer.js, line 1748

Update control and callbacks

#### updateReticleEvent()

Source:
  - viewer/Viewer.js, line 1885

Update reticle event

#### updateVideoPlayButton(paused)

Source:
  - viewer/Viewer.js, line 798

Update video play button

##### Parameters:

Name | Type | Description
--- | --- | ---
`paused` | boolean |

### Events

#### control-bar-toggle

Source:
  - viewer/Viewer.js, line 1702

Toggle control bar event

##### Type:

- object

#### mode-change

Source:
  - viewer/Viewer.js, line 544

##### Properties:

Name | Type | Description
--- | --- | ---
`mode` | MODES | Current display mode

Dispatch mode change event

##### Type:

- object

#### mode-change

Source:
  - viewer/Viewer.js, line 579

##### Properties:

Name | Type | Description
--- | --- | ---
`mode` | MODES | Current display mode

Dispatch mode change event

##### Type:

- object

#### video-control-hide

Source:
  - viewer/Viewer.js, line 783

Hide video widget

##### Type:

- object

#### video-control-show

Source:
  - viewer/Viewer.js, line 765

Show video widget event

##### Type:

- object

#### video-time

Source:
  - viewer/Viewer.js, line 689

##### Properties:

Name | Type | Description
--- | --- | ---
`percentage` | number | Percentage of a video. Range from 0.0 to 1.0

Setting video time event

##### Type:

- object

#### video-toggle

Source:
  - viewer/Viewer.js, line 667

Toggle video event

##### Type:

- object

#### video-update

Source:
  - viewer/Viewer.js, line 712

##### Properties:

Name | Type | Description
--- | --- | ---
`percentage` | number | Percentage of a video. Range from 0.0 to 1.0

Video update event

##### Type:

- object

#### window-resize

Source:
  - viewer/Viewer.js, line 1256

##### Properties:

Name | Type | Description
--- | --- | ---
`width` | number | Width of the window
`height` | number | Height of the window

Window resizing event

##### Type:

- object