Viewer

Viewer

Viewer contains pre-defined scene, camera and renderer

Constructor

new Viewer(optionsopt)

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

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
initialLookAt THREE.Vector3 <optional>
 new THREE.Vector3( 0, 0, -Number.MAX_SAFE_INTEGER )

Initial looking at vector
momentum boolean <optional>
 true

Use momentum even during mouse/touch move
rotateSpeed number <optional>
 -1.0

Drag Rotation Speed
dampingFactor number <optional>
 .9

Damping factor
speedLimit number <optional>
 Number.MAX_VALUE

Speed limit for rotation, defaults to unlimited

Methods

activateWidgetItem(controlIndex, mode)

Source:

Set widget content

Parameters:
Name Type Description
controlIndex integer

Control index
mode integer

Modes for effects

add(object)

Source:

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:

Add default control bar

Parameters:
Name Type Description
array array

The control buttons array

addOutputElement()

Source:

Add output element

addPanoramaEventListener(pano)

Source:

Add default panorama event listeners

Parameters:
Name Type Description
pano Panorama

The panorama to be added with event listener

addReticle()

Source:

Add reticle

addUpdateCallback(callback)

Source:

Add update callback to be called every animation frame

Parameters:
Name Type Description
callback function

addViewIndicator()

Source:

View indicator in upper left

animate()

Source:

Animate

appendControlItem(optionopt)

Source:

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:

Check Sprite in Viewport

clearAllCache()

Source:

Clear all cached files

destroy()

Source:

Destroy viewer by disposing and stopping requestAnimationFrame

disableAutoRate()

Source:

Disable auto rotation

disableControl()

Source:

Disable current control

disableEffect()

Source:

Disable additional rendering effect

disableReticleControl()

Source:

Disable reticle control

dispatchEventToChildren(event)

Source:

Dispatch event to all descendants

Parameters:
Name Type Description
event object

Event to be passed along

dispose()

Source:

Dispose all scene objects and clear cache

enableAutoRate()

Source:

Enable auto rotation

enableControl(index)

Source:

Enable control by index

Parameters:
Name Type Description
index CONTROLS

Index of camera control

enableEffect(mode)

Source:

Enable rendering effect

Parameters:
Name Type Description
mode MODES

Modes for effects

enableReticleControl()

Source:

Enable reticle control

eventHandler(event)

Source:

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:

Get camera

Returns:
  • The scene camera
Type
THREE.Camera

getContainer() → {HTMLElement}

Source:

Get container

Returns:
  • The container holds rendererd canvas
Type
HTMLElement

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

Source:

Get current camera control

Returns:
    • Current navigation control
    Type
    object
  • Type
    THREE.OrbitControls | THREE.DeviceOrientationControls

getControlId() → {string}

Source:

Get control id

Returns:
  • Control id. 'orbit' or 'device-orientation'
Type
string

getConvertedIntersect(intersects)

Source:

Get converted intersect

Parameters:
Name Type Description
intersects array

getNextControlId() → {string}

Source:

Get next navigation control id

Returns:
  • Next control id
Type
string

getNextControlIndex() → {number}

Source:

Get next navigation control index

Returns:
  • Next control index
Type
number

getRaycastViewCenter() → {THREE.Vector3}

Source:

Get raycasted point of current panorama

Returns:
Type
THREE.Vector3

getRenderer() → {THREE.WebGLRenderer}

Source:

Get renderer

Returns:
  • The renderer using webgl
Type
THREE.WebGLRenderer

getScene() → {THREE.Scene}

Source:

Get scene

Returns:
  • Current scene which the viewer is built on
Type
THREE.Scene

getScreenVector()

Source:

Screen Space Projection

hideInfospot()

Source:

Hide infospot

hideVideoWidget()

Source:

Hide video widget

loadAsyncRequest(url, callbackopt)

Source:

Load ajax call

Parameters:
Name Type Attributes Description
url string

URL to be requested
callback function <optional>

Callback after request completes

onChange()

Source:

On change

onKeyDown(event)

Source:

On key down

Parameters:
Name Type Description
event KeyboardEvent

onKeyUp(event)

Source:

On key up

Parameters:
Name Type Description
event KeyboardEvent

onMouseDown(event)

Source:

On mouse down

Parameters:
Name Type Description
event MouseEvent

onMouseMove(event)

Source:

On mouse move

Parameters:
Name Type Description
event MouseEvent

onMouseUp(event)

Source:

On mouse up

Parameters:
Name Type Description
event MouseEvent

onPanoramaDispose()

Source:

On panorama dispose

onTap(event, type)

Source:

On tap eveny frame

Parameters:
Name Type Description
event MouseEvent
type string

onVideoUpdate(percentage)

Source:

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:

onWindowResize(windowWidthopt, windowHeightopt)

Source:

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:

outputPosition()

Source:

Output position in developer console by holding down Ctrl button

registerEventListeners()

Source:

Register container and window listeners

registerMouseAndTouchEvents()

Source:

Register mouse and touch event on container

registerReticleEvent()

Source:

Register reticle event

remove(object)

Source:

Remove an object from the scene

Parameters:
Name Type Description
object THREE.Object3D

Object to be removed

removeUpdateCallback(fn)

Source:

Remove update callback

Parameters:
Name Type Description
fn function

The function to be removed

render()

Source:

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

reverseDraggingDirection()

Source:

Reverse dragging direction

setCameraControl()

Source:

Set camera control

setCameraFov(fov)

Source:

Set field of view of camera

Parameters:
Name Type Description
fov number

setPanorama(pano)

Source:

Set a panorama to be the current one

Parameters:
Name Type Description
pano Panorama

Panorama to be set

setVideoCurrentTime(percentage)

Source:

Set currentTime in a video

Parameters:
Name Type Description
percentage number

Percentage of a video. Range from 0.0 to 1.0
Fires:

showVideoWidget()

Source:

Show video widget

toggleControlBar()

Source:

Toggle control bar

Fires:

toggleNextControl()

Source:

Toggle next control

toggleVideoPlay(pause)

Source:

Toggle video play or stop

Parameters:
Name Type Description
pause boolean
Fires:

tweenControlCenter(vector, durationopt, easingopt)

Source:

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:

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:

Unregister container and window listeners

unregisterMouseAndTouchEvents()

Source:

Unregister mouse and touch event on container

unregisterReticleEvent()

Source:

Unregister reticle event

update()

Source:

Update control and callbacks

updateReticleEvent()

Source:

Update reticle event

updateVideoPlayButton(paused)

Source:

Update video play button

Parameters:
Name Type Description
paused boolean

Events

control-bar-toggle

Source:

Toggle control bar event

Type:
  • object

mode-change

Source:
Properties:
Name Type Description
mode MODES

Current display mode

Dispatch mode change event

Type:
  • object

mode-change

Source:
Properties:
Name Type Description
mode MODES

Current display mode

Dispatch mode change event

Type:
  • object

video-control-hide

Source:

Hide video widget

Type:
  • object

video-control-show

Source:

Show video widget event

Type:
  • object

video-time

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

Toggle video event

Type:
  • object

video-update

Source:
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:
Properties:
Name Type Description
width number

Width of the window
height number

Height of the window

Window resizing event

Type:
  • object