new PhotoSphereViewer( options )

Main class

Parameters
Name Type Description
options PhotoSphereViewer.Options
Details

Members


<readonly> config :PhotoSphereViewer.Options

Configuration holder


<readonly> container :HTMLElement

Main container

Details
HTMLElement

<readonly> dataHelper :module:services.PSVDataHelper

Utilities to help converting data


<readonly> eventsHandler :module:services.PSVEventsHandler

Main event handler


<readonly> hud :module:components.PSVHUD


<readonly> icons :Object.<string, string>

Icons holder

Details
Object.<string, string>

<readonly> loader :module:components.PSVLoader



<readonly> notification :module:components.PSVNotification


<readonly> overlay :module:components.PSVOverlay


<readonly> panel :module:components.PSVPanel


<readonly> parent :HTMLElement

Top most parent

Details
HTMLElement

<protected> prop :Object

Internal properties

Properties
Name Type Description
ready boolean

when all components are loaded

needsUpdate boolean

if the view needs to be renderer

isCubemap boolean

if the panorama is a cubemap

position PhotoSphereViewer.Position

current direction of the camera

direction external:THREE.Vector3

direction of the camera

zoomLvl number

current zoom level

vFov number

vertical FOV

hFov number

horizontal FOV

aspect number

viewer aspect ratio

moveSpeed number

move speed (computed with pixel ratio and configuration moveSpeed)

gyroAlphaOffset number

current alpha offset for gyroscope controls

orientationCb function

update callback of the device orientation

autorotateCb function

update callback of the automatic rotation

animationPromise PSVAnimation

promise of the current animation (either go to position or image transition)

loadingPromise Promise

promise of the setPanorama method

startTimeout

timeout id of the automatic rotation delay

size PhotoSphereViewer.Size

size of the container

panoData PhotoSphereViewer.PanoData

panorama metadata

noSleep external:NoSleep

NoSleep.js instance

Details
Object

<readonly> renderer :module:services.PSVRenderer

Main render controller


<readonly> templates :Object.<string, function()>

Templates holder

Details
Object.<string, function()>

<readonly> textureLoader :module:services.PSVTextureLoader

Textures loader


<readonly> tooltip :module:components.PSVTooltip

Methods


animate( options, speed ) → {PSVAnimation}

Rotates the view to specific longitude and latitude with a smooth animation

Parameters
Name Type Description
options PhotoSphereViewer.AnimateOptions

position and/or zoom level

speed string | number

animation speed or duration (in milliseconds)

Returns

autoSize()

Resizes the canvas when the window is resized

Fires

Triggered when the viewer size changes


change( name, value [, ...arguments ] ) → {*}

Triggers an event on the viewer and returns the modified value

Parameters
Name Type Attributes Description
name string
value *
arguments * <optional>
<repeatable>
Returns
Details

destroy()

Destroys the viewer

Description

The memory used by the ThreeJS context is not totally cleared. This will be fixed as soon as possible.


enterFullscreen()

Enters the fullscreen mode


exitFullscreen()

Exits the fullscreen mode


getPosition() → {PhotoSphereViewer.Position}

Returns the current position of the camera


getSize() → {PhotoSphereViewer.Size}

Returns the current viewer size


getZoomLevel() → {number}

Returns the current zoom level

Returns

hideError()

Hides the error message


hideMarkersList()

Closes side panel if it contains the list of markers


isAutorotateEnabled() → {boolean}

Checks if the automatic rotation is enabled

Returns

isFullscreenEnabled() → {boolean}

Checks if the viewer is in fullscreen

Returns

isGyroscopeEnabled() → {boolean}

Checks if the gyroscope is enabled

Returns

isStereoEnabled() → {boolean}

Checks if the stereo viewx is enabled

Returns

lockOrientation()

Tries to lock the device in landscape or display a message


needsUpdate()

Flags the view has changed for the next render


off( name [, callback ] ) → {PhotoSphereViewer}

Removes an event listener from the viewer

Parameters
Name Type Attributes Description
name string | Object.<string, function()>

event name or events map

callback function <optional>
Details

on( name [, callback ] ) → {PhotoSphereViewer}

Attaches an event listener on the viewer

Parameters
Name Type Attributes Description
name string | Object.<string, function()>

event name or events map

callback function <optional>
Details

once( name [, callback ] ) → {PhotoSphereViewer}

Attaches an event listener called once on the viewer

Parameters
Name Type Attributes Description
name string | Object.<string, function()>

event name or events map

callback function <optional>
Details

resize( size )

Resizes the viewer

Parameters
Name Type Description
size PhotoSphereViewer.CssSize

rotate( position [, ignoreRange ] )

Rotates the view to specific longitude and latitude

Parameters
Name Type Attributes Default Description
position PhotoSphereViewer.ExtendedPosition
ignoreRange boolean <optional>
false

ignore longitudeRange and latitudeRange

Fires

Triggered when the view longitude and/or latitude changes


setPanorama( path [, options [, transition ] ] ) → {Promise}

Loads a new panorama file

Description

Loads a new panorama file, optionally changing the camera position/zoom and activating the transition animation.
If the "options" parameter is not defined, the camera will not move and the ongoing animation will continue

Parameters
Name Type Attributes Default Description
path string | Array.<string>

URL of the new panorama file

options PhotoSphereViewer.AnimateOptions <optional>

target position and/or zoom level

transition boolean <optional>
true
Returns
Throws

when another panorama is already loading


showError( message )

Displays an error message

Parameters
Name Type Description
message string

showMarkersList()

Opens side panel with list of markers

Fires

Used to alter the list of markers displayed on the side-panel


startAutorotate()

Starts the automatic rotation

Fires

Triggered when the automatic rotation is enabled/disabled


startGyroscopeControl()

Enables the gyroscope navigation if available

Fires

Triggered when the gyroscope mode is enabled/disabled

Throws

if DeviceOrientationControls.js is missing


startKeyboardControl()

Enables the keyboard controls (done automatically when entering fullscreen)


startNoSleep()

Enables NoSleep.js


startStereoView()

Enables the stereo view

Description
  • enables NoSleep.js
    • enables full screen
    • starts gyroscope controle
    • hides hud, navbar and panel
    • instanciate StereoEffect
Throws

if StereoEffect.js is not available


stopAnimation() → {Promise}

Stops the ongoing animation

Description

The return value is a Promise because the is no guaranty the animation can be stopped synchronously.

Returns

Resolved when the animation has ben cancelled


stopAutorotate()

Stops the automatic rotation

Fires

Triggered when the automatic rotation is enabled/disabled


stopGyroscopeControl()

Disables the gyroscope navigation

Fires

Triggered when the gyroscope mode is enabled/disabled


stopKeyboardControl()

Disables the keyboard controls (done automatically when exiting fullscreen)


stopNoSleep()

Disables NoSleep.js


stopStereoView()

Disables the stereo view


toggleAutorotate()

Starts or stops the automatic rotation


toggleFullscreen()

Enters or exits the fullscreen mode


toggleGyroscopeControl()

Enables or disables the gyroscope navigation


toggleMarkersList()

Toggles the visibility of markers list


toggleStereoView()

Enables or disables the stereo view


trigger( name [, ...arguments ] ) → {external:uEvent.Event}

Triggers an event on the viewer

Parameters
Name Type Attributes Description
name string
arguments * <optional>
<repeatable>
Details

unlockOrientation()

Unlock the device orientation


zoom( level )

Zooms to a specific level between max_fov and min_fov

Parameters
Name Type Description
level number

new zoom level from 0 to 100

Fires

Triggered when the zoom level changes


zoomIn()

Increases the zoom level by 1


zoomOut()

Decreases the zoom level by 1

Type Definitions


AnimateOptions

Object defining animation options

Properties
Name Type Description
zoom number

target zoom level between 0 and 100


CacheItem

An entry in the memory cache

Properties
Name Type Description
panorama string
image external:THREE.Texture
panoData PhotoSphereViewer.PanoData
Details
Object

ClickData

Data of the click event

Properties
Name Type Attributes Description
clientX number

position in the browser window

clientY number

position in the browser window

viewerX number

position in the viewer

viewerY number

position in the viewer

longitude number

position in spherical coordinates

latitude number

position in spherical coordinates

textureX number

position on the texture

textureY number

position on the texture

marker PSVMarker <optional>

clicked marker

Details
Object

CssSize

Object defining a size in CSS (px, % or auto)

Properties
Name Type Attributes Description
width string <optional>
height string <optional>
Details
Object

ExtendedPosition

Object defining a spherical or texture position

Description

A position that can be expressed either in spherical coordinates (radians or degrees) or in texture coordinates (pixels)

Properties
Name Type Attributes Description
longitude number
latitude number
x number <optional>
y number <optional>

Options

Details
Object

PanoData

Crop information of the panorama

Properties
Name Type Description
fullWidth number
fullHeight number
croppedWidth number
croppedHeight number
croppedX number
croppedX number
Details
Object

Point

Object defining a point

Properties
Name Type Description
x number
y number
Details
Object

Position

Object defining a spherical position

Properties
Name Type Description
longitude number
latitude number
Details
Object

Size

Object defining a size

Properties
Name Type Description
width number
height number
Details
Object

TextureData

Result of the PSVTextureLoader#loadTexture method

Properties
Name Type Attributes Description
texture external:THREE.Texture | Array.<external:THREE.Texture>
panoData PhotoSphereViewer.PanoData <optional>
Details
Object

Events


autorotate

Triggered when the automatic rotation is enabled/disabled

Parameters
Name Type Description
enabled boolean

click

Triggered when the user clicks on the viewer (everywhere excluding the navbar and the side panel)

Parameters
Name Type Description
data PhotoSphereViewer.ClickData

dblclick

Triggered when the user double clicks on the viewer. The simple click event is always fired before dblclick

Parameters
Name Type Description
data PhotoSphereViewer.ClickData

fullscreen-updated

Triggered when the fullscreen mode is enabled/disabled

Parameters
Name Type Description
enabled boolean

gyroscope-updated

Triggered when the gyroscope mode is enabled/disabled

Parameters
Name Type Description
enabled boolean

position-updated

Triggered when the view longitude and/or latitude changes

Parameters
Name Type Description
position PhotoSphereViewer.Position

ready

Triggered when the panorama image has been loaded and the viewer is ready to perform the first render


size-updated

Triggered when the viewer size changes

Parameters
Name Type Description
size PhotoSphereViewer.Size

stereo-updated

Triggered when the stereo view is enabled/disabled

Parameters
Name Type Description
enabled boolean

zoom-updated

Triggered when the zoom level changes

Parameters
Name Type Description
zoomLevel number