The Visible Range plugin constrains the camera to a defined horizontal and/or vertical range. It affects both manual navigation and automatic rotation.
Installation
npm install @photo-sphere-viewer/visible-range-plugin
Usage
import { Viewer } from '@photo-sphere-viewer/core';
import { VisibleRangePlugin } from '@photo-sphere-viewer/visible-range-plugin';
const viewer = new Viewer({
panorama: 'path/to/panorama.jpg',
plugins: [
VisibleRangePlugin.withConfig({
horizontalRange: [-Math.PI / 2, Math.PI / 2],
verticalRange: [-Math.PI / 3, Math.PI / 3],
}),
],
});
const visibleRangePlugin = viewer.getPlugin(VisibleRangePlugin);
// Update ranges at runtime
visibleRangePlugin.setHorizontalRange(['0deg', '180deg']);
visibleRangePlugin.setVerticalRange(null); // remove restriction
usePanoData to true to derive the visible range from cropped panorama data.
Configuration
horizontalRange
number[] | string[]
default:"null"
Visible horizontal range as a two-element array of angles (radians or degree strings). Not updatable after init — use setHorizontalRange() instead.
verticalRange
number[] | string[]
default:"null"
Visible vertical range as a two-element array of angles (radians or degree strings). Not updatable after init — use setVerticalRange() instead.
Immediately apply the cropped panorama data as the visible range after each panorama load. Updatable.
Methods
setHorizontalRange(range) / setVerticalRange(range)
Update or remove a range at runtime. Pass null to remove the restriction.
visibleRangePlugin.setHorizontalRange([-Math.PI / 4, Math.PI / 4]);
visibleRangePlugin.setVerticalRange(null);
setRangesFromPanoData()
Derive and apply both ranges from the current panorama’s crop data. Equivalent to calling usePanoData: true after a panorama load. 