The viewer renders inside a DOM element. Give it explicit dimensions — the viewer will fill the container completely.
<!-- for optimal display on high DPI devices --><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- the viewer container must have a defined size --><div id="viewer" style="width: 100vw; height: 100vh;"></div>
3
Initialize the viewer
Import the Viewer class and point it at your container and panorama image.
CDN (import map)
npm / bundler
Importing from a CDN requires an import map and a type="module" script tag.
<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>
When using a bundler (Vite, webpack, Rollup, etc.), import the CSS alongside the JS.
<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';import '@photo-sphere-viewer/core/index.css';const viewer = new Viewer({ container: document.querySelector('#viewer'), panorama: 'path/to/panorama.jpg',});
Import @photo-sphere-viewer/core/index.css using whichever method your tooling supports (CSS import, PostCSS, etc.).
The panorama option expects an equirectangular projection image by default. This is the standard output format from 360° cameras.
If your image does not cover a full 360°×180° sphere, it will appear deformed. Fix this by providing cropping data via the equirectangular adapter options.
Other panorama formats are supported through adapters:
