Skip to main content
Cube mapping maps the environment onto the six faces of a cube around the viewer. The cubemap adapter supports three input formats: separate files, a horizontal stripe, and a polyhedron net.

​
Installation

npm install @photo-sphere-viewer/cubemap-adapter

​
Usage

import { CubemapAdapter } from '@photo-sphere-viewer/cubemap-adapter';

const viewer = new Viewer({
    adapter: 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',
    },
});
Pixel positions with this adapter require an additional textureFace attribute. For example: { textureFace: 'front', textureX: 200, textureY: 800 }.

​
Panorama options

The panorama option and the setPanorama() method accept three input formats.

​
Separate files

Each face is provided as a separate file. All files are loaded before the panorama is shown. 
// Order: left, front, right, back, top, bottom
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',
]
You can skip loading one or more faces by providing null as the URL for that face.

​
Stripe

All six faces are in a single file arranged in a horizontal stripe. The default order is left, front, right, back, top, bottom, but you can change it with the order field. 
panorama: {
  type: 'stripe',
  path: 'path/to/panorama.jpg',
  // optional: set to true if top and bottom faces are not correctly oriented
  flipTopBottom: false,
  // optional: change the order of faces in the stripe
  order: ['left', 'right', 'top', 'bottom', 'back', 'front'],
}

​
Polyhedron net

All six faces are in a single file arranged as a horizontal “T” unfolded cube. 
panorama: {
  type: 'net',
  path: 'path/to/panorama.jpg',
}

Build docs developers (and LLMs) love

Get started for freeTalk to us