panorama.link(otherpanorama) not working about panolens.js

[pchen66]

Here's a live example of static container using dev branch. To dynamically changing the container dimension, you can hookup camera and renderer explicitly whenever detecting size changes.

viewer.getCamera().aspect = width / height;
viewer.getCamera().updateProjectionMatrix();
viewer.getRenderer().setSize( width, height );

Maybe you can provide an example of how it's not working?

[pchen66]

Here's a basic example for panorama linking: Panorama Linking
When setting panorama.link( another_panorama ) It assumes another_panorama is a derived from PANOLENS.Panorama and will add infospot automatically based on the direction of the two panoramas.

I don' have access to the test.json in the codepen. It looks like you're trying to set infospot position manually. Although infospots are added automatically, you can reset their positions after panorama linking and have access to panorama.linkedSpots array to determine which one you would like to change. So removing newly created infospots and reset their positions in panorama.linkedSpots should do the trick.

To set a one-way infospot, simply add panorama.link( another_panorama, true )

[smitshah81]

Thanks for the replay... Let me try in this way..

One more question...

How can i set focus on infospot manually like i have list of infospot if i click on infospot name then it shoud focus on infospot.

[smitshah81]

See I have uploaded What i had done till now.
http://smitshah81.github.io/panoplayer/player.html

and i always get "Panoramas should be at different position " error

please help.

[pchen66]

I'll work on a method to focus infospot. As for Panoramas should be at different position warning, it means linked panoramas are exactly at the same spot (x, y, z) or geometry has been changed to prevent infospots from attaching to panoramas.

[smitshah81]

Thanks :)
BTW If i use below syntax for viewer

viewer = new PANOLENS.Viewer({container : document.getElementById("panoramacontainer")});

then infospot is clicked on different location then they appear (click trigger on different location then appeared hotspot )

if you want to regenerate this issue then use 2 div 1 with 30% of width and second with 70% of width. then render panorama in 70% screen
now try to click on infospot.

[smitshah81]

Hi I got the solution.
please check below function
PANOLENS.Viewer.prototype.onTap

Don't know why but "this.renderer.domElement.offsetLeft" is not wokring so i have used jquery's offset and it is working fine now.

this is not pure javascript fix but it is working fine now. you can try this in your infospot example with window resize.

May be this help you in your development.

[pchen66]

Thanks for reporting this. The bug is reproducible and should be fixed in #23. It was due to mouse event not considering container.offsetLeft so it was off on the 70% container. I've created another example infospot_focus specifically for this scenario and added a UI controller for tweening infospots to camera center (manually or iteratively with custom duration / easing function).
In short, to focus an infospot

// duration and easing function
infospot.focus( 1000, TWEEN.Easing.Exponential.Out );

or arbitrary vector to be centered

var vector = new THREE.Vector3( 50, 50, 50 );
viewer.tweenControlCenter( vector, 1000, TWEEN.Easing.Elastic.Out )

[smitshah81]

Hi,
Thanks for the Solution but it is not working if i have container is 500px x 400px .

I am developing one website in with user will select height and width and container position.
Yes your example is working if i have full height."Just like you have shared example of infospot".

Thanks Again!!!

[smitshah81]

Just Perfect!!! Thanks mate. :)

[smitshah81]

I have another question.

I am loading Panorama via Ajax
sequence is 1.image panorama 2.video panorama 3.image panorama
When I switch image panorama to video then all things went well except video seeking. not sure why it is happening .
N.B: Video Seek works well but code written in below function

PANOLENS.VideoPanorama.prototype.setVideoCurrentTime = function ( event ) {

not updating

this.videoElement.currentTime

Below is piece of code which is used for switching panorama

if(panorama!="undefined" && typeof viewer !="undefined")
        {
            viewer.dispose();
            panorama.dispose();
            delete panorama;
            delete viewer;
            jQuery(".panoramacontainer canvas").remove();
            jQuery(".panoramacontainer").removeClass("panoramacontainer").attr("id","");
        }

            var div=document.createElement("div");
            div.id=panocurrentContainerid+Math.floor((Math.random() * 100000) + 1);
            div.setAttribute("class","panoramacontainer");
            document.getElementById("edtor360").appendChild(div);
            viewer = new PANOLENS.Viewer({container:div});
        if(typeof data != "undefined"  && typeof data.video !="undefined" )
        {
             panorama = new PANOLENS.VideoPanorama( data.video );
             isvideopano=1;
             console.info("Panorama type Detected: Video");
             viewer.add(panorama);
        }
        else if(typeof data != "undefined"  && typeof data.image !="undefined" )
        {
            panorama = new PANOLENS.ImagePanorama( data.image );
            isvideopano=0;
            console.info("Panorama type Detected: Image");
            viewer.add(panorama);

        }
        else
        {
            panorama = new PANOLENS.EmptyPanorama(  );
            isvideopano=-1;
            console.warn("No Type Detected!! Empty panorama Loaded.");
        }

Just Like your previous answer is there any solution for this issue? I am not three js Geek so I am not sure what to do.

[smitshah81]

My Guess is there is problem with control loading.

When I have tried with panorama.videoElement.seekable.start() in your video i got start position but when i have tried same in my project then i got

TypeError: Failed to execute 'start' on 'TimeRanges': 1 argument required, but only 0 present.

and I have google this and some says this is google chrome issue. they have suggested to set header in htaccess but that is also not working.

Don't know what i had did wrong.Can you please Help?

[pchen66]

When you switch panorama manually (not by linking the panorama), you have to specify viewer.setPanorama( another_panorama ) explicitly so that the viewer knows which panorama is currently showing. So in the last section of your code block, you can add something like

if (panorama && viewer) {
  viewer.setPanorama( panorama );
}

so it will actually Enter the new panorama and Leave the current one. Hope this help!
If not, it'd be easier to understand the problem if you can create a codepen example to demonstrate the issue.