# Migration from v3
Photo Sphere Viewer 4 is a complete rewrite of the internals of the library using ES6 modules and a modular plugin system. The library is still compatible with less modern browsers and any build systems (or no build system at all) but many methods and options have been moved and renamed.
# Plugins
The following features have been moved into separated plugins :
- markers : MarkersPlugin
- gyroscope support : GyroscopePlugin
- stereo view : StereoPlugin
- longitude and latitude ranges : VisibleRangePlugin
# Options
# 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.
# Other renamed options :
usexmpdata
→useXmpData
anim_speed
→autorotateSpeed
anim_lat
→autorotateLat
time_anim
→autorotateDelay
default_fov
→defaultZoomLvl
mousemove_hover
→ removed
# Deleted options
transition
→ usetransition
andshowLoader
options ofsetPanorama()
tooltip
→ the properties of the tooltip are now extracted from the stylesheetwebgl
→ WebGL is now always enabled since three.js deprecated the CanvasRendererpanorama_roll
→ usesphereCorrection
with theroll
propertymousewheel_factor
# 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) orrenderer.render()
preloadPanorama()
→textureLoader.preloadPanorama()
clearPanoramaCache()
→ removed, useTHREE.Cache.clear()
getPanoramaCache()
→ removed, useTHREE.Cache.get()
# Navbar
showNavbar()
→navbar.show()
hideNavbar()
→navbar.hide()
toggleNavbar()
→navbar.toggle()
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()
hidePanel()
→panel.hide()
# Tooltip
showTooltip()
→tooltip.show()
hideTooltip()
→tooltip.hide()
isTooltipVisible()
→tooltip.isVisible()
# 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 Marker
object anymore but in its config
attribute. You should only use markersPlugin.updateMarker()
to update these properties.