photo-sphere-viewer-lensflare-plugin

photo-sphere-viewer-lensflare-plugin

Plugin to add lens flares to a Photo Sphere Viewer (Library: PhotoSphereViewer) by mistic100

Installation

NPM

npm install photo-sphere-viewer-lensflare-plugin

Yarn

yarn add photo-sphere-viewer-lensflare-plugin

Usage

HTML

<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer-lensflare-plugin/dist/index.min.js"></script>

JavaScript

import { LensflarePlugin } from 'photo-sphere-viewer-lensflare-plugin';

const viewer = new PhotoSphereViewer.Viewer({
    container: document.querySelector('#viewer'),
    panorama: 'pano.jpg',
    plugins: [
        [LensflarePlugin, {
            lensflares: [
                {
                    id: 'sun',
                    position: { yaw: '145deg', pitch: '2deg' },
                    type: 0,
                }
            ]
        }]
    ]
});

Options

Option	Type	Default	Description
lensflares	Array	[]	Array of lens flares

Lens Flare Options

Option	Type	Default	Description
id	String	''	ID of the lens flare
position	Object	{ yaw: '0deg', pitch: '0deg' }	Position of the lens flare
type	Number	0	Type of the lens flare (available: 0)
color	HSL	{ h: 0.08, s: 0.2, l: 0.5 }	Color of the lens flare

Methods

To call methods you need to get the plugin instance.

const lensflaresPlugin = viewer.getPlugin(LensflarePlugin);

and then you can call the methods.

toggleAllLensflares

Toggle all lens flares.

lensflaresPlugin.toggleAllLensflares();

showAllLensflares

Show all lens flares.

lensflaresPlugin.showAllLensflares();

hideAllLensflares

Hide all lens flares.

lensflaresPlugin.hideAllLensflares();

getNbLensflares

Get the number of lens flares.

const nb = lensflaresPlugin.getNbLensflares();

getLensflares

Get all the lens flares.

const lensflares: LensflareObject[] = lensflaresPlugin.getLensflares();

getLensflare

Get a lens flare.

const lensflare: LensflareObject = lensflaresPlugin.getLensflare('sun');

addLensflare

Add a lens flare.

lensflaresPlugin.addLensflare({
    id: 'sun',
    position: { yaw: '145deg', pitch: '2deg' },
    type: 0,
});

updateLensflare

Update a lens flare.

lensflaresPlugin.updateLensflare({
    id: 'sun',
    position: { yaw: '145deg', pitch: '2deg' },
    type: 0,
});

removeLensflare

Remove a lens flare.

lensflaresPlugin.removeLensflare('sun');

removeLensflares

Remove multiple lens flares.

lensflaresPlugin.removeLensflares(['sun', 'moon']);

setLensflares

Clear all lens flares and add new ones.

lensflaresPlugin.setLensflares([
    {
        id: 'sun',
        position: { yaw: '145deg', pitch: '2deg' },
        type: 0,
    },
    {
        id: 'moon',
        position: { yaw: '30.6deg', pitch: '41.2deg' },
        type: 0,
    }
]);

clearLensflares

Clear all lens flares.

lensflaresPlugin.clearLensflares();

Examples

Run the provided example

npm run test

Add multiple lens flares

const viewer = new PhotoSphereViewer.Viewer({
    container: document.querySelector('#viewer'),
    panorama: 'pano.jpg',
    defaultYaw: 20.75,
    defaultPitch: 0.17,
    plugins: [
        [PhotoSphereViewerLensflarePlugin, {
            lensflares: [
                {
                    id: 'sun',
                    position: { yaw: '145deg', pitch: '2deg' },
                },
                {
                    id: 'moon',
                    position: { yaw: '30.6deg', pitch: '41.2deg' },
                    color: { h: 0.6, s: 0.5, l: 0.2 },
                }
            ]
        }]
    ]
});

Result of the example

CodeSandbox