Skip to content

guide

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History
 
 

guide

README.md

Getting Started

[[toc]]

::: tip 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/core

yarn add @photo-sphere-viewer/core

Via CDN

Photo Sphere Viewer is available on jsDelivr

Manually

You can also download the latest release

Dependencies

Your first viewer

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

::::: tabs

:::: tab Import from a CDN

Importing the library from a CDN (or static files) requires the use of an import map and declare your script tag with type="module".

<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/core/index.min.css" />
</head>

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

<script type="importmap">
    {
        "imports": {
            "three": "https://cdn.jsdelivr.net/npm/three/build/three.module.js",
            "@photo-sphere-viewer/core": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.module.js"
        }
    }
</script>

<script type="module">
    import { Viewer } from '@photo-sphere-viewer/core';

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

::::

:::: tab Install with NPM and a build tool

We will not detail more this section as it is highly dependent on which build tool you use.

<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/core';

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

::: tip Stylesheet Import @photo-sphere-viewer/core/index.css with the prefered way depending on your tooling. :::

::::

:::::


::: code-demo

autoload: true
title: PSV Basic Demo
const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';

const viewer = new 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 of your photo. Other modes are supported through adapters.

::: tip 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. :::