Documentation

Class: Viewer

PANOLENS. Viewer

new Viewer( [options])

Viewer contains pre-defined scene, camera and renderer
Parameters:
Name Type Argument Description
options object <optional>
 Use custom or default config options
Properties
Name Type Argument 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
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'
Source:

Methods

activateWidgetItem(controlIndex, mode)

Set widget content
Parameters:
Name Type Description
controlIndex integer Control index
mode PANOLENS.Modes Modes for effects
Source:

add(object)

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

addDefaultControlBar(array)

Add default control bar
Parameters:
Name Type Description
array array The control buttons array
Source:

addPanoramaEventListener(pano)

Add default panorama event listeners
Parameters:
Name Type Description
pano PANOLENS.Panorama The panorama to be added with event listener
Source:

addReticle()

Add reticle
Source:

addUpdateCallback()

Add update callback to be called every animation frame
Source:

addViewIndicator()

View indicator in upper left
Source:

appendControlItem( [option])

Append custom control item to existing control bar
Parameters:
Name Type Argument Default Description
option object <optional>
 {} Style object to overwirte default element style. It takes 'style', 'onTap' and 'group' properties.
Source:

checkSpriteInViewport()

Check Sprite in Viewport
Source:

destory()

Destory viewer by disposing and stopping requestAnimationFrame
Source:

disableControl()

Disable current control
Source:

disableEffect()

Disable additional rendering effect
Source:

disableReticleControl()

Disable reticle control
Source:

dispatchEventToChildren(event)

Dispatch event to all descendants
Parameters:
Name Type Description
event object Event to be passed along
Source:

dispose()

Dispose all scene objects and clear cache
Source:

enableControl(index)

Enable control by index
Parameters:
Name Type Description
index PANOLENS.Controls Index of camera control
Source:

enableEffect(mode)

Enable rendering effect
Parameters:
Name Type Description
mode PANOLENS.Modes Modes for effects
Source:

enableReticleControl()

Enable reticle control
Source:

eventHandler(event)

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

getCamera()

Get camera
Source:
Returns:
- The scene camera
Type
THREE.Camera

getContainer()

Get container
Source:
Returns:
- The container holds rendererd canvas
Type
HTMLDOMElement

getControl()

Get current camera control
Source:
Returns:
- Current navigation control. THREE.OrbitControls or THREE.DeviceOrientationControls
Type
object

getControlName()

Get control name
Source:
Returns:
- Control name. 'orbit' or 'device-orientation'
Type
string

getNextControlIndex()

Get next navigation control index
Source:
Returns:
- Next control index
Type
number

getNextControlName()

Get next navigation control name
Source:
Returns:
- Next control name
Type
string

getRenderer()

Get renderer
Source:
Returns:
- The renderer using webgl
Type
THREE.WebGLRenderer

getScene()

Get scene
Source:
Returns:
- Current scene which the viewer is built on
Type
THREE.Scene

getScreenVector()

Screen Space Projection
Source:

hideVideoWidget()

Hide video widget
Source:

loadAsyncRequest(url [, callback])

Load ajax call
Parameters:
Name Type Argument Description
url string URL to be requested
callback function <optional>
 Callback after request completes
Source:

onPanoramaDispose()

On panorama dispose
Source:

onVideoUpdate(percentage)

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

onWindowResize( [windowWidth] [, windowHeight])

This is called when window size is changed
Parameters:
Name Type Argument Description
windowWidth number <optional>
 Specify if custom element has changed width
windowHeight number <optional>
 Specify if custom element has changed height
Source:
Fires:

outputInfospotPosition()

Output infospot attach position in developer console by holding down Ctrl button
Source:

registerEventListeners()

Register container and window listeners
Source:

registerMouseAndTouchEvents()

Register mouse and touch event on container
Source:

registerReticleEvent()

Register reticle event
Source:

remove(object)

Remove an object from the scene
Parameters:
Name Type Description
object THREE.Object3D Object to be removed
Source:

removeUpdateCallback(fn)

Remove update callback
Parameters:
Name Type Description
fn function The function to be removed
Source:

render()

Rendering function to be called on every animation frame
Source:

reverseDraggingDirection()

Reverse dragging direction
Source:

setCameraControl()

Set camera control
Source:

setCameraFov()

Set field of view of camera
Source:

setPanorama(pano)

Set a panorama to be the current one
Parameters:
Name Type Description
pano PANOLENS.Panorama Panorama to be set
Source:

setVideoCurrentTime(percentage)

Set currentTime in a video
Parameters:
Name Type Description
percentage number Percentage of a video. Range from 0.0 to 1.0
Source:
Fires:

showVideoWidget()

Show video widget
Source:

toggleControlBar()

Toggle control bar
Source:
Fires:
  • [PANOLENS.Viewer#event:control-bar-toggle]

toggleNextControl()

Toggle next control
Source:

toggleVideoPlay()

Toggle video play or stop
Source:
Fires:

tweenControlCenter(vector [, duration] [, easing])

Tween control looking center
Parameters:
Name Type Argument 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
Source:

tweenControlCenterByObject(object [, duration] [, easing])

Tween control looking center by object
Parameters:
Name Type Argument 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
Source:

unregisterEventListeners()

Unregister container and window listeners
Source:

unregisterMouseAndTouchEvents()

Unregister mouse and touch event on container
Source:

unregisterReticleEvent()

Unregister reticle event
Source:

update()

Update control and callbacks
Source:

updateReticleEvent()

Update reticle event
Source:

Events

control-bar-toggle

Toggle control bar event
Type: object
Source:

video-control-hide

Hide video widget
Type: object
Source:

video-control-show

Show video widget event
Type: object
Source:

video-time

Setting video time event
Type: object
Properties:
Name Type Description
percentage number Percentage of a video. Range from 0.0 to 1.0
Source:

video-toggle

Toggle video event
Type: object
Source:

video-update

Video update event
Type: object
Properties:
Name Type Description
percentage number Percentage of a video. Range from 0.0 to 1.0
Source:

window-resize

Window resizing event
Type: object
Properties:
Name Type Description
width number Width of the window
height number Height of the window
Source: