Photo Sphere Viewer 4

# Cubemap

Cube mapping (opens new window) is a kind of projection where the environment is mapped to the six faces of a cube around the viewer.

This adapter is available in the core photo-sphere-viewer package in dist/adapters/cubemap.js.

Photo Sphere Viewer supports cubemaps as six distinct image files. The files can be provided as an object or an array.

const viewer = new PhotoSphereViewer.Viewer({
  adapter: PhotoSphereViewer.CubemapAdapter,
  panorama: {
    left:   'path/to/left.jpg',
    front:  'path/to/front.jpg',
    right:  'path/to/right.jpg',
    back:   'path/to/back.jpg',
    top:    'path/to/top.jpg',
    bottom: 'path/to/bottom.jpg',
  },
});

# Example

# Configuration

# flipTopBottom

  • type: boolean
  • default: false

Set to true if the top and bottom faces are not correctly oriented.

# Panorama options

When using this adapter the panorama option and the setPanorama() method accept an array or an object of six URLs.

// Cubemap as array (order is important) :
panorama: [
  'path/to/left.jpg',
  'path/to/front.jpg',
  'path/to/right.jpg',
  'path/to/back.jpg',
  'path/to/top.jpg',
  'path/to/bottom.jpg',
]

// Cubemap as object :
panorama: {
  left:   'path/to/left.jpg',
  front:  'path/to/front.jpg',
  right:  'path/to/right.jpg',
  back:   'path/to/back.jpg',
  top:    'path/to/top.jpg',
  bottom: 'path/to/bottom.jpg',
}

← Cubemap tiles →