new PhotoSphereViewer( options )

Description

Viewer class

Parameters
Name Type Description
options Object

see http://photo-sphere-viewer.js.org/#options

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

when the configuration is incorrect

Details

Members


<static, readonly> DEFAULTS :Object

Details
Object

<static, readonly> Error

exposes PSVError

Details

<static, readonly> ICONS :Object.<string, string>

SVG icons sources

Details
Object.<string, string>

<static, readonly> TEMPLATES :Object.<string, string>

doT.js templates

Details
Object.<string, string>

<static, readonly> Utils :object

exposes PSVUtils

Details
object

<readonly> config :Object

Configuration object

Details
Object

<readonly> container :HTMLElement

Main container

Details
HTMLElement

<readonly> hud :module:components.PSVHUD


<readonly> loader :module:components.PSVLoader



<readonly> panel :module:components.PSVPanel


<readonly> parent :HTMLElement

Top most parent

Details
HTMLElement

<readonly> prop :Object

Internal properties

Properties
Name Type Description
isCubemap boolean

if the panorama is a cubemap

longitude float

current longitude of the center

longitude float

current latitude of the center

direction THREE.Vector3

direction of the camera

anim_speed float

parsed animation speed (rad/sec)

zoom_lvl int

current zoom level

vFov float

vertical FOV

hFov float

horizontal FOV

aspect float

viewer aspect ratio

move_speed float

move speed (computed with pixel ratio and configuration move_speed)

moving boolean

is the user moving

zooming boolean

is the user zooming

start_mouse_x int

start x position of the click/touch

start_mouse_y int

start y position of the click/touch

mouse_x int

current x position of the cursor

mouse_y int

current y position of the cursor

mouse_history Array.<Array>

list of latest positions of the cursor, [time, x, y]

pinch_dist int

distance between fingers when zooming

orientation_reqid

animationRequest id of the device orientation

autorotate_reqid

animationRequest id of the automatic rotation

animation_promise Promise

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

loading_promise Promise

promise of the setPanorama method

start_timeout

timeout id of the automatic rotation delay

dblclick_data PhotoSphereViewer.ClickData

temporary storage of click data between two clicks

dblclick_timeout

timeout id for double click

cache Array.<PhotoSphereViewer.CacheItem>

cached panoramas

size Size

size of the container

pano_data PhotoSphereViewer.PanoData

panorama metadata

Details
Object

<readonly> tooltip :module:components.PSVTooltip

Methods


animate( position, duration ) → {Promise}

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

Parameters
Name Type Description
position PhotoSphereViewer.ExtendedPosition
duration string | int

animation speed or duration (in milliseconds)

Returns

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

clearPanoramaCache( [ panorama ] )

Removes a panorama from the cache or clears the entire cache

Parameters
Name Type Attributes Description
panorama string <optional>
Throws

when the cache is disabled


destroy()

Destroys the viewer

Description

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


getPanoramaCache( panorama ) → {PhotoSphereViewer.CacheItem}

Retrieves the cache for a panorama

Parameters
Name Type Description
panorama string
Throws

when the cache is disabled


getPosition() → {PhotoSphereViewer.Position}

Returns the current position of the camera


getSize() → {PhotoSphereViewer.Size}

Returns the current viewer size


getZoomLevel() → {int}

Returns the current zoom level

Returns

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

load() → {Promise}

Starts to load the panorama

Returns
Throws

when the panorama is not configured


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>

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>

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>

preloadPanorama( panorama ) → {Promise}

Preload a panorama file without displaying it

Parameters
Name Type Description
panorama string
Returns
Throws

when the cache is disabled


render( [ updateDirection ] )

Performs a render

Parameters
Name Type Attributes Default Description
updateDirection boolean <optional>
true

should update camera direction

Fires

Triggered on each viewer render, this event is triggered very often


rotate( position [, render ] )

Rotates the view to specific longitude and latitude

Parameters
Name Type Attributes Default Description
position PhotoSphereViewer.ExtendedPosition
render boolean <optional>
true
Fires

Triggered when the view longitude and/or latitude changes


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

Loads a new panorama file

Description

Loads a new panorama file, optionally changing the camera position and activating the transition animation.
If the "position" is not defined, the camera will not move and the ongoing animation will continue
"config.transition" must be configured for "transition" to be taken in account

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

URL of the new panorama file

position PhotoSphereViewer.ExtendedPosition <optional>
transition boolean <optional>
false
Returns
Throws

when another panorama is already loading


sphericalCoordsToTextureCoords( position ) → {PhotoSphereViewer.Point}

Converts spherical radians coordinates to pixel texture coordinates

Parameters
Name Type Description
position PhotoSphereViewer.Position

sphericalCoordsToVector3( position ) → {THREE.Vector3}

Converts spherical radians coordinates to a THREE.Vector3

Parameters
Name Type Description
position PhotoSphereViewer.Position
Returns

startAutorotate()

Starts the automatic rotation

Fires

Triggered when the automatic rotation is enabled/disabled


startGyroscopeControl()

Enables the gyroscope navigation

Fires

Triggered when the gyroscope mode is enabled/disabled


startKeyboardControl()

Enables the keyboard controls (done automatically when entering fullscreen)


stopAnimation()

Stops the ongoing animation


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)


textureCoordsToSphericalCoords( point ) → {PhotoSphereViewer.Position}

Converts pixel texture coordinates to spherical radians coordinates

Parameters
Name Type Description
point PhotoSphereViewer.Point

toggleAutorotate()

Starts or stops the automatic rotation


toggleFullscreen()

Enters or exits the fullscreen mode


toggleGyroscopeControl()

Enables or disables the gyroscope navigation


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

Triggers an event on the viewer

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

vector3ToSphericalCoords( vector ) → {PhotoSphereViewer.Position}

Converts a THREE.Vector3 to spherical radians coordinates

Parameters
Name Type Description
vector THREE.Vector3

vector3ToViewerCoords( vector ) → {PhotoSphereViewer.Point}

Converts a THREE.Vector3 to position on the viewer

Parameters
Name Type Description
vector THREE.Vector3

viewerCoordsToVector3( viewerPoint ) → {THREE.Vector3}

Converts position on the viewer to a THREE.Vector3

Parameters
Name Type Description
viewerPoint PhotoSphereViewer.Point
Returns

zoom( level [, render ] )

Zooms to a specific level between max_fov and min_fov

Parameters
Name Type Attributes Default Description
level int

new zoom level from 0 to 100

render boolean <optional>
true
Fires

Triggered when the zoom level changes


zoomIn()

Increases the zoom level by 1


zoomOut()

Decreases the zoom level by 1

Type Definitions


CacheItem

An entry in the memory cache

Properties
Name Type Description
panorama string
image THREE.Texture
pano_data PhotoSphereViewer.PanoData
Details
Object

ClickData

Data of the click event

Properties
Name Type Attributes Description
client_x int

position in the browser window

client_y int

position in the browser window

viewer_x int

position in the viewer

viewer_y int

position in the viewer

longitude float

position in spherical coordinates

latitude float

position in spherical coordinates

texture_x int

position on the texture

texture_y int

position on the texture

marker PSVMarker <optional>

clicked marker

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 Description
longitude float
latitude float
x int
y int
Details
Object

PanoData

Crop information of the panorama

Properties
Name Type Description
full_width int
full_height int
cropped_width int
cropped_height int
cropped_x int
cropped_y int
Details
Object

Point

Object defining a point

Properties
Name Type Description
x int
y int
Details
Object

Position

Object defining a spherical position

Properties
Name Type Description
longitude float
latitude float
Details
Object

Size

Object defining a size

Properties
Name Type Description
width int
height int
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

panorama-cached

Triggered when a panorama is stored in the cache

Parameters
Name Type Description
panorama string

panorama-load-progress

Triggered while a panorama image is loading

Parameters
Name Type Description
panorama string
progress int

panorama-loaded

Triggered when a panorama image has been loaded


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


render

Triggered on each viewer render, this event is triggered very often


size-updated

Triggered when the viewer size changes

Parameters
Name Type Description
size PhotoSphereViewer.Size

zoom-updated

Triggered when the zoom level changes

Parameters
Name Type Description
zoomLevel int