PANOLENS.Infospot - How to properly use show() hide()?

[zksteel]

Description

I'am working on project where I need to show InfoSpots at specific time in my 360 video (PANOLENS.VideoPanorama). The default behaviour of InfoSpot is that it is visible from start which I don't want to. I found in documentation two methods : show() and hide() which should show and hide InfoSpot when i want to. But it seems that they don't work as I expected and I need your help.

Here is my current code:

    var panorama_main_video, viewer_main;
    var infospot1;

    viewer_main = new PANOLENS.Viewer({
        enableReticle: false,
        output: 'console',
        viewIndicator: true,
        autoRotate: false,
        autoRotateSpeed: 2,
        autoRotateActivationDuration: 5000,
        dwellTime: 1000,
        controlBar: true,
        autoHideInfospot: false
    });

    panorama_main_video = new PANOLENS.VideoPanorama('asset/textures/video/ClashofClans.mp4',     {
        autoplay: true,
        muted: false
    });

    infospot1 = new PANOLENS.Infospot(350, PANOLENS.DataImage.Info);
    infospot1.position.set(-183.78, -300.93, -4978.55);
    infospot1.addHoverText('Mountain Tip');
    panorama_main_video.add(infospot1);
    viewer_main.add(panorama_main_video);

    infospot1.hide(); // hiding here don't work

    viewer_main.addUpdateCallback(Update);
    var infospot1Triggered = false;
    var infospot1TriggerTime = 15;
    function Update() {
        infospot1.hide(); // it works after some time, but when exactly?

        if (!infospot1Triggered && panorama_main_video.videoElement.currentTime > infospot1TriggerTime) {
            infospot1Triggered = true;
            infospot1.show(); // hide/show works here, after some time from page launch
        }
    }

So basicly I need to hide InfoSpot at page launch. Best I've get is hide() it when 'infospot-animation-complete' is called: panorama_main_video.addEventListener('infospot-animation-complete', function (e) { infospot1.hide(); }); but it flash for a second (it is visible about 1 sec at start);

I've tried also add infospot at time when i needed it, eg. after 15sec

    var infospot1Triggered = false;
    var infospot1TriggerTime = 15;
    viewer_main.addUpdateCallback(Update);
    function Update() {
        if (!infospot1Triggered && panorama_main_video.videoElement.currentTime > infospot1TriggerTime) {
            infospot1Triggered = true;
            panorama_main_video.add(infospot1);
        }
    }

but my custom InfoSpot image wasn't visible (even when I use new THREE.TextureLoader() at page launch).

Panolens version

• Latest release - v0.11.0

Browser

• [x] Chrome
• [ ] Firefox - Not tested
• [ ] Internet Explorer - Not tested

OS

• [x] Windows

[elircf]

I have the same problem. I tried calling the hide() inside the onEnter event but doesn't work

panorama.addEventListener( 'enter', function(){ console.log("onEnter Event Triggered"); infospot2.hide(); // Not working });

When the hide() in binded to an onClick event, it works:

infospot1.addEventListener('click', function(){ console.log("Click on 1 hide 2"); infospot2.hide(); // Working });

But I need to hide that specific infospot on the start. Any help?

--- Update 1 ---

The infospot-animation-complete event is the dispatcher from infospotAnimation.onComplete() and that infospotAnimation is a: this.infospotAnimation = new Tween.Tween( this ).to( {}, this.animationDuration / 2 ); and that animationDuration have the predefined value: this.animationDuration = 1000; So... you can edit that and reduce the infospot-animation-complete event delay to 0. Is a ugly fix but it works in my case.

[Xiphoseer]

There seems to be a bug in the postLoad function of the infospot here where ratio is calculated from values that are only guaranteed to be non-zero a few lines later, so the first infospot has NaNs all over their scale and transforms/matrices.