Consider taking the Color Cycle Survey

API

Renderer

Creates a new panorama renderer.

Parameters

  • container HTMLElement The container element for the renderer.

init

Initialize renderer.

Parameters

  • image (Image | Array | Object) Input image; format varies based on imageType. For equirectangular, this is an image; for cubemap, this is an array of images for the cube faces in the order [+z, +x, -z, -x, +y, -y]; for multires, this is a configuration object.
  • imageType string The type of the image: equirectangular, cubemap, or multires.
  • dynamic boolean Whether or not the image is dynamic (e.g. video).
  • haov number Initial horizontal angle of view.
  • vaov number Initial vertical angle of view.
  • voffset number Initial vertical offset angle.
  • callback function Load callback function.
  • params [Object] Other configuration parameters (horizonPitch, horizonRoll, backgroundColor).
  • _image
  • _imageType
  • _dynamic

destroy

Destroy renderer.

resize

Resize renderer (call after resizing container).

setPose

Set renderer horizon pitch and roll.

Parameters

  • horizonPitch
  • horizonRoll

render

Render new view of panorama.

Parameters

  • pitch number Pitch to render at (in radians).
  • yaw number Yaw to render at (in radians).
  • hfov number Horizontal field of view to render with (in radians).
  • params [Object] Extra configuration parameters.
    • params.roll [number] Camera roll (in radians).
    • params.returnImage [boolean] Return rendered image?

isLoading

Check if images are loading.

Returns boolean Whether or not images are loading.

getCanvas

Retrieve renderer’s canvas.

Returns HTMLElement Renderer’s canvas.

Viewer

Creates a new panorama viewer.

Parameters

  • container (HTMLElement | string) The container (div) element for the viewer, or its ID.
  • initialConfig Object Inital configuration for viewer.

isLoaded

Checks whether or not a panorama is loaded.

Returns boolean true if a panorama is loaded, else false

isLoaded

Check if a panorama is loaded.

Returns boolean True if a panorama is loaded, else false

getPitch

Returns the pitch of the center of the view.

Returns number Pitch in degrees

setPitch

Sets the pitch of the center of the view.

Parameters

  • pitch number Pitch in degrees
  • animated [(boolean | number)] Animation duration in milliseconds or false for no animation (optional, default 1000)
  • callback [function] Function to call when animation finishes
  • callbackArgs [object] Arguments to pass to callback function

Returns Viewer this

getPitchBounds

Returns the minimum and maximum allowed pitches (in degrees).

Returns Array<number> [minimum pitch, maximum pitch]

setPitchBounds

Set the minimum and maximum allowed pitches (in degrees).

Parameters

Returns Viewer this

getYaw

Returns the yaw of the center of the view.

Returns number Yaw in degrees

setYaw

Sets the yaw of the center of the view.

Parameters

  • yaw number Yaw in degrees [-180, 180]
  • animated [(boolean | number)] Animation duration in milliseconds or false for no animation (optional, default 1000)
  • callback [function] Function to call when animation finishes
  • callbackArgs [object] Arguments to pass to callback function

Returns Viewer this

getYawBounds

Returns the minimum and maximum allowed pitches (in degrees).

Returns Array<number> [yaw pitch, maximum yaw]

setYawBounds

Set the minimum and maximum allowed yaws (in degrees [-180, 180]).

Parameters

Returns Viewer this

getHfov

Returns the horizontal field of view.

Returns number Horizontal field of view in degrees

setHfov

Sets the horizontal field of view.

Parameters

  • hfov number Horizontal field of view in degrees
  • animated [(boolean | number)] Animation duration in milliseconds or false for no animation (optional, default 1000)
  • callback [function] Function to call when animation finishes
  • callbackArgs [object] Arguments to pass to callback function

Returns Viewer this

getHfovBounds

Returns the minimum and maximum allowed horizontal fields of view (in degrees).

Returns Array<number> [minimum hfov, maximum hfov]

setHfovBounds

Set the minimum and maximum allowed horizontal fields of view (in degrees).

Parameters

Returns Viewer this

lookAt

Set a new view. Any parameters not specified remain the same.

Parameters

  • pitch [number] Target pitch
  • yaw [number] Target yaw
  • hfov [number] Target hfov
  • animated [(boolean | number)] Animation duration in milliseconds or false for no animation (optional, default 1000)
  • callback [function] Function to call when animation finishes
  • callbackArgs [object] Arguments to pass to callback function

Returns Viewer this

getNorthOffset

Returns the panorama’s north offset.

Returns number North offset in degrees

setNorthOffset

Sets the panorama’s north offset.

Parameters

  • heading number North offset in degrees

Returns Viewer this

getHorizonRoll

Returns the panorama’s horizon roll.

Returns number Horizon roll in degrees

setHorizonRoll

Sets the panorama’s horizon roll.

Parameters

  • roll number Horizon roll in degrees [-90, 90]

Returns Viewer this

getHorizonPitch

Returns the panorama’s horizon pitch.

Returns number Horizon pitch in degrees

setHorizonPitch

Sets the panorama’s horizon pitch.

Parameters

  • pitch number Horizon pitch in degrees [-90, 90]

Returns Viewer this

startAutoRotate

Start auto rotation.

Parameters

  • speed [number] Auto rotation speed / direction. If not specified, previous value is used.

Returns Viewer this

stopAutoRotate

Stop auto rotation.

Returns Viewer this

getRenderer

Returns the panorama renderer.

Returns Renderer

setUpdate

Sets update flag for dynamic content.

Parameters

  • bool boolean Whether or not viewer should update even when still

Returns Viewer this

mouseEventToCoords

Calculate panorama pitch and yaw from location of mouse event.

Parameters

Returns Array<number> [pitch, yaw]

loadScene

Change scene being viewed.

Parameters

  • sceneId string Identifier of scene to switch to.
  • pitch [number] Pitch to use with new scene
  • yaw [number] Yaw to use with new scene
  • hfov [number] HFOV to use with new scene

Returns Viewer this

getScene

Get ID of current scene.

Returns string ID of current scene

addScene

Add a new scene.

Parameters

  • sceneId string The ID of the new scene
  • config string The configuration of the new scene

Returns Viewer this

removeScene

Remove a scene.

Parameters

  • sceneId string The ID of the scene

Returns boolean False if the scene is the current scene or if the scene doesn’t exists, else true

toggleFullscreen

Toggle fullscreen.

Returns Viewer this

getConfig

Get configuration of current scene.

Returns Object Configuration of current scene

getContainer

Get viewer’s container element.

Returns HTMLElement Container div element

addHotSpot

Add a new hot spot.

Parameters

  • hs Object The configuration for the hot spot
  • sceneId [string] Adds hot spot to specified scene if provided, else to current scene

  • Throws any Throws an error if the scene ID is provided but invalid

Returns Viewer this

removeHotSpot

Remove a hot spot.

Parameters

  • hotSpotId string The ID of the hot spot

Returns boolean True if deletion is successful, else false

resize

This method should be called if the viewer’s container is resized.

isOrientationSupported

Check if device orientation control is supported.

Returns boolean True if supported, else false

stopOrientation

Stop using device orientation.

startOrientation

Start using device orientation (does nothing if not supported).

isOrientationActive

Check if device orientation control is currently activated.

Returns boolean True if active, else false

on

Subscribe listener to specified event.

Parameters

  • type string Type of event to subscribe to.
  • listener Function Listener function to subscribe to event.

Returns Viewer this

destroy

Destructor.

off

Remove an event listener (or listeners).

Parameters

  • type [string] Type of event to remove listeners from. If not specified, all listeners are removed.
  • listener [Function] Listener function to remove. If not specified, all listeners of specified type are removed.

Returns Viewer this

Pannellum is developed on GitHub by Matthew Petroff.
CDN via KeyCDN.