photo-sphere-viewer-lensflare-plugin
TypeScript icon, indicating that this package has built-in type declarations

2.1.2 • Public • Published

photo-sphere-viewer-lensflare-plugin

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

lensflare

NPM JavaScript Style Guide

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

multilens

CodeSandbox

Edit photo-sphere-viewer-lensflare-plugin

Package Sidebar

Install

npm i photo-sphere-viewer-lensflare-plugin

Weekly Downloads

1,948

Version

2.1.2

License

MIT

Unpacked Size

847 kB

Total Files

10

Last publish

Collaborators

  • elius94