Skip to main content
The Gyroscope plugin adds gyroscope controls for mobile devices. When enabled, the viewer follows the physical orientation of the device. A navbar button is shown only when the gyroscope API is available.

​
Installation

npm install @photo-sphere-viewer/gyroscope-plugin

​
Usage

import { Viewer } from '@photo-sphere-viewer/core';
import { GyroscopePlugin } from '@photo-sphere-viewer/gyroscope-plugin';

const viewer = new Viewer({
    panorama: 'path/to/panorama.jpg',
    plugins: [
        GyroscopePlugin,
    ],
});
The gyroscope API requires an HTTPS connection.
There are known inconsistencies in orientation data across devices. If the panorama appears in an unexpected orientation, this is a device-level issue and not a bug in the plugin.

​
Configuration

​
touchmove
boolean
default:"true"
Allow horizontal panning while the gyroscope is active. Requires the global mousemove viewer option to be true. Updatable.
​
roll
boolean
default:"true"
Apply camera roll (rotation on the Z axis) based on device orientation. Updatable.
​
absolutePosition
boolean
default:"false"
Use the absolute device orientation rather than keeping the current horizontal position when the gyroscope activates. Not updatable after init.
​
moveMode
'smooth' | 'fast'
default:"'smooth'"
How gyroscope data is applied to the camera rotation. smooth interpolates between frames; fast applies data immediately. Updatable.
​
lang
object
Localization strings merged with the main viewer lang object.
lang: {
    gyroscope: 'Gyroscope',
}
This plugin adds one button to the default navbar:
  • gyroscope — toggles gyroscope control
If you use a custom navbar, add 'gyroscope' to your navbar configuration manually. The button is only shown when the device exposes the gyroscope API.

Build docs developers (and LLMs) love

Get started for freeTalk to us