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

title: PSV Cubemap Demo
resources:
  - path: adapters/cubemap.js
    imports: CubemapAdapter

const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';

const viewer = new PhotoSphereViewer.Viewer({
  container: 'viewer',
  adapter: PhotoSphereViewer.CubemapAdapter,
  panorama:  {
    left  : baseUrl + 'cubemap/px.jpg',
    front : baseUrl + 'cubemap/nz.jpg',
    right : baseUrl + 'cubemap/nx.jpg',
    back  : baseUrl + 'cubemap/pz.jpg',
    top   : baseUrl + 'cubemap/py.jpg',
    bottom: baseUrl + 'cubemap/ny.jpg'
  },
  caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
  loadingImg: baseUrl + 'loader.gif',
  defaultLat: 0.2,
  touchmoveTwoFingers: true,
  mousewheelCtrlKey: true,
});

# Configuration

# flipTopBottom

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 →