OverlaysPlugin

Display additional images on top of the panorama.

This plugin is available in the @photo-sphere-viewer/overlays-plugin package.

Usage

Overlays are images "glued" to the panorama. Contrary to markers they are part of the 3D scene and not drawn on top of the viewer. The images must have the same proportions of the base panorama and must be transparent. Both equirectangular (full or cropped) and cubemaps are supported.

import { OverlaysPlugin } from '@photo-sphere-viewer/overlays-plugin';

const viewer = new Viewer({
    plugins: [
        [OverlaysPlugin, {
            overlays: [
                {
                    id: 'overlay',
                    path: 'path/to/overlay.png',
                },
            ],
        }],
    ],
});

Example

Configuration

overlays

• type: OverlayConfig[]
• updatable: no

The list of overlays, see below. Can be updated with various methods.

autoclear

• type: boolean
• default: true
• updatable: yes

Automatically remove all overlays when the panorama changes.

Overlays

Overlays can be a single image/video for a spherical gerometry or six images for a cube geometry (no videos).

id (recommended)

• type: string
• default: random value

Used to remove the overlay with removeOverlay() method.

opacity

• type: number
• default: 1

zIndex

• type: number
• default: 0

Spherical overlays

path (required)

• type: string

Path to the image.

Cube overlays

path (required)

• type: CubemapPanorama

Check the cubemap adapter page for the possible syntaxes. All six faces are required but some can be null.

Methods

addOverlay(config)

Adds a new overlay.

removeOverlay(id)

Removes an overlay.

clearOverlays()

Removes all overlays.

Events

overlay-click(overlayId)

Triggered when an overlay is clicked.

overlaysPlugin.addEventListener('overlay-click', ({ overlayId }) => {
    console.log(`Clicked on overlay ${overlayId}`);
});