Photo Sphere Viewer 4

# Getting Started

New version

This is the documentation for Photo Sphere Viewer 4, which won't receive any new development. Please migrate to Photo Sphere Viewer 5 (opens new window).

Playground

Test Photo Sphere Viewer with you own panorama in the Playground

# Install Photo Sphere Viewer

# With npm or yarn

npm install photo-sphere-viewer

yarn add photo-sphere-viewer

# Via CDN

Photo Sphere Viewer is available on jsDelivr (opens new window)

# Manually

You can also download the latest release (opens new window)

# Dependencies

# Your first viewer

Include all JS & CSS files in your page manually or with your favorite bundler and init the viewer.

<head>
  <!-- for optimal display on high DPI devices -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css"/>
</head>

<script src="https://cdn.jsdelivr.net/npm/three@0.147/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js"></script>

<!-- the viewer container must have a defined size -->
<div id="viewer" style="width: 100vw; height: 100vh;"></div>

<script>
  const viewer = new PhotoSphereViewer.Viewer({
    container: document.querySelector('#viewer'),
    panorama: 'path/to/panorama.jpg',
  });
</script>

Import photo-sphere-viewer/dist/photo-sphere-viewer.css with the prefered way depending on your tooling.

<head>
  <!-- for optimal display on high DPI devices -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<!-- the viewer container must have a defined size -->
<div id="viewer" style="width: 100vw; height: 100vh;"></div>

import { Viewer } from 'photo-sphere-viewer';

const viewer = new Viewer({
  container: document.querySelector('#viewer'),
  panorama: 'path/to/panorama.jpg',
});


title: PSV Basic Demo

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

const viewer = new PhotoSphereViewer.Viewer({
  container: 'viewer',
  panorama: baseUrl + 'sphere.jpg',
  caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
  loadingImg: baseUrl + 'loader.gif',
  touchmoveTwoFingers: true,
  mousewheelCtrlKey: true,
});

The panorama must be an equirectangular projection (opens new window) of your photo. Other modes are supported through adapters.

Cropped panoramas

If your image is not covering a full 360°×180° sphere, it will be deformed. You can fix it by providing cropping data.

Configuration →