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 PhotoSphereViewerLensflarePlugin from 'photo-sphere-viewer-lensflare-plugin';

const viewer = new PhotoSphereViewer.Viewer({
    container: document.querySelector('#viewer'),
    panorama: 'pano.jpg',
    plugins: [
        [PhotoSphereViewerLensflarePlugin, {
            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

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