Photo Sphere Viewer 4 is a complete rewrite of the internals of the library using ES6 modules. The library is still compatible with less modern browsers and any build systems (or no build system at all) but many methods have been moved and renamed.

Compat. wrapper

The module photo-sphere-viewer.compat.js provides a basic compatibility wrapper for PhotoSphereViewer 3.
To use it, load it after the main module and use PhotoSphereViewerCompat constructor instead of PhotoSphereViewer.

Please note this wrapper is not fully tested and only addresses renamed options and moved methods.

Configuration

Renamed options

The viewer configuration is globally the same as version 3 but every snake_case properties are now in camelCase, for example default_lat is now named defaultLat.
Be sure to rename your configuration properties, the old naming is not supported at all.

Deleted options

  • transition transitionDuration and transitionLoader
  • usexmpdata useXmpData
  • anim_speed autorotateSpeed
  • anim_lat autorotateLat
  • time_anim autorotateDelay
  • default_fov defaultZoomLvl
  • tooltip : the properties of the tooltip are now extracted from the stylesheet

New options

  • icons allows to overwrite default icons (SVG only)

Methods

Moved methods

In version 3, all methods where on the main PhotoSphereViewer object. Now in version 4, many methods have been moved to sub-objects for the renderer, hud, left-panel, etc.
Bellow is the mapping of the most common methods, please check the API documentation for a complete list of methods.

General

  • render() needsUpdate() (prefered) or renderer.render()
  • preloadPanorama() textureLoader.preloadPanorama()
  • clearPanoramaCache() textureLoader.clearPanoramaCache()
  • getPanoramaCache() textureLoader.getPanoramaCache()

Markers

  • addMarker() hud.addMarker()
  • getMarker() hud.getMarker()
  • updateMarker() hud.updateMarker()
  • removeMarker() hud.removeMarker()
  • gotoMarker() hud.gotoMarker()
  • hideMarker() hud.hideMarker()
  • showMarker() hud.showMarker()
  • toggleMarker() hud.toggleMarker()
  • clearMarkers() hud.clearMarkers()
  • getCurrentMarker() hud.getCurrentMarker()

Navbar

  • showNavbar() navbar.show()
  • hideNavbar() navbar.hide()
  • toggleNavbar() deleted test for navbar.isVisible() instead
  • getNavbarButton() navbar.getButton()
  • setCaption() navbar.setCaption()

Notification

  • showNotification() notification.show()
  • hideNotification() notification.hide()
  • isNotificationVisible () notification.isVisible()

Overlay

  • showOverlay() overlay.show()
  • hideOverlay() overlay.hide()
  • isOverlayVisible() overlay.isVisible()

Panel

  • showPanel() panel.show()
  • hidePabel() panel.hide()

Tooltip

  • showTooltip() tooltip.show()
  • hideTooltip() tooltip.hide()
  • isTooltipVisible() tooltip.isVisible()

New methods

  • autoSize() Updates the renderer to fit the new container size (automatically called on window resize)
  • showError() / hideError() Replaces the viewer by a message and an optional image
  • hud.setMarkers() Replaces all markers
  • navbar.setButtons() Replaces all navbar buttons

Events

Although the events are now triggered by the new sub-objects, you only have to use on() and off() on the main object, for the sake of simplicity.

Markers

Markers' properties are not directly stored in the PSVMarker object anymore but in its config attribute. You should only use hud.updateMarker() to update these properties.