Skip to main content
The Autorotate plugin adds automatic rotation to the panorama. In standard mode the panorama slowly spins; in keypoints mode it visits a defined list of positions, pausing and displaying tooltips along the way.

​
Installation

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

​
Usage

In standard mode the panorama rotates continuously. Configure autorotatePitch to lock the vertical angle.
import { Viewer } from '@photo-sphere-viewer/core';
import { AutorotatePlugin } from '@photo-sphere-viewer/autorotate-plugin';

const viewer = new Viewer({
    panorama: 'path/to/panorama.jpg',
    plugins: [
        AutorotatePlugin.withConfig({
            autorotatePitch: '5deg',
        }),
    ],
});

​
Configuration

​
autostartDelay
integer
default:"2000"
Delay in milliseconds after which the automatic rotation begins. Updatable.
​
autostartOnIdle
boolean
default:"true"
Restart the automatic rotation when the user has been idle for autostartDelay milliseconds. Updatable.
The rotation will not restart if the user explicitly clicked the navbar autorotate button to stop it.
​
autorotateSpeed
string
default:"'2rpm'"
Speed of the automatic rotation. Accepts any speed string (e.g. '2rpm', '10deg/s'). Use a negative value to reverse the direction. Updatable.
​
autorotatePitch
number | string
default:"viewer defaultPitch"
Vertical angle at which the automatic rotation is performed. When null the current pitch is kept. Updatable.
​
autorotateZoomLvl
number
default:"null"
Zoom level at which the automatic rotation is performed. When null the current zoom level is kept. Updatable.
​
keypoints
AutorotateKeypoint[]
Initial keypoints. Not updatable after init — use setKeypoints() instead.Each keypoint is one of:
  • A position object with yaw/pitch or textureX/textureY
  • A marker ID string (requires the Markers plugin)
  • A configuration object:
{
    position?: ExtendedPosition;
    markerId?: string;  // use position and tooltip of a marker
    pause?: number;     // pause in ms; shows tooltip if available
    tooltip?: string | { content: string; position?: string };
}
​
startFromClosest
boolean
default:"true"
Start from the closest keypoint instead of the first keypoint in the array. Updatable.
​
lang
object
Localization strings merged with the main viewer lang object.
lang: {
    autorotate: 'Automatic rotation',
}

​
Methods

​
setKeypoints(keypoints)

Replaces the current keypoints. Pass null or an empty array to remove all keypoints.

​
start() / stop() / toggle()

Start, stop, or toggle the automatic rotation.

​
Events

​
autorotate

Triggered when the automatic rotation is enabled or disabled. 
autorotatePlugin.addEventListener('autorotate', ({ autorotateEnabled }) => {
    console.log('Autorotate:', autorotateEnabled);
});
This plugin adds one button to the default navbar:
  • autorotate — toggles the automatic rotation on and off
If you use a custom navbar, add 'autorotate' to your navbar configuration manually.

Build docs developers (and LLMs) love

Get started for freeTalk to us