VisibleRangePlugin is doing nothing with npm install

[calvinalkan]

Versions, all installed with npm:

Photo-Sphere-Viewer: "4.3.0"
three": "^0.133.1",

I have read the documentation on the VisibleRangePlugin and have tried everything but cant seem to produce any visual difference at all. No matter what I do Im still always able to rotate a 360 x 180 sphere.

Im using cropped images with values suggested from the playgroud.

This is what I have so far:

import { Viewer } from 'photo-sphere-viewer';
import VisibleRangePlugin from 'photo-sphere-viewer/dist/plugins/visible-range';

const languageConfig = {
    autorotate: 'Automatische Drehung',
    zoom      : 'Zoom',
    zoomOut   : 'Ranzoomen',
    zoomIn    : 'Wegzoomen',
    move      : 'Bewegen',
    fullscreen: 'Vollbild',
    twoFingers: 'Nutze zwei Finger zum bewegen',
    loadError : 'Das Panorama konnte nicht geladen werden.',
    loadingTxt: 'Lädt...',
}

const navbar = [
    'zoom',
    'move',
    'fullscreen'
]


var ranges = {
    usePanoData: true
};

const dampfbad = new Viewer({
    container: document.querySelector('#dampfbad'),
    panorama: '/wp-content/mu-plugins/hamam-mu-plugin/dist/panorama/dampfbad.jpg',
    touchmoveTwoFingers: true,
    defaultZoomLvl: 30,
    panoData: {
        fullWidth: 15114,
        fullHeight: 7557,
        croppedWidth: 15113,
        croppedHeight: 5023,
        croppedX: 0,
        croppedY: 1267,
        poseHeading: 69, // 0 to 360
        posePitch: 0, // -90 to 90
        poseRoll: 0, // -180 to 180
    },
    lang: languageConfig,
    loadingTxt: 'Lädt...',
    plugins: [
        [
           VisibleRangePlugin, ranges
        ],
    ],
});

I have also tried setting the ranges object to:

var ranges = {
    longitudeRange: [-Math.PI / 2, Math.PI / 2],
    latitudeRange : [-Math.PI / 3, Math.PI / 3],
}

as suggested in the documentation. This also has no effect at all.

What am I missing here?

[mistic100]

Is there any error in the console ?

---

Also you should upgrade to

import { VisibleRangePlugin } from 'photo-sphere-viewer/dist/plugins/visible-range';

the other form is still compatible be this one is more modern

[calvinalkan]

It looks like adding the brackets fixes the issues.. That is weird.

And no, there were no errors in the console, it just looked like nothing was being run at all.

[mistic100]

Can you share you builder configuration ? I made a test yesterday with rollup.js to bundle an app and it was working with both syntaxes.

[mistic100]

I tried with webpack and the problem seems to be with the default interop, because plugins don't have a default export anymore. There is some compatibility code in the Viewer itself but it cannot handle this case.

When doing a default import, Rollup returns the "default" property if it exists or the whole module, so it works. Webpack on the other and always returns "default", and it is undefined in this case.

One solution is for me is to rebuild the lib with esModule: false Rollup option. Though I am not sure it is worth the hasle.

[github-actions]

This feature/bug fix has been released in version 4.4.0.