CODEWITHSUNDEEP
javascriptthree.js
trainoasis
trainoasis

Reputation: 6720

ThreeJS/Panolens: direction of the camera when panorama entered?

I'm trying to throw an equirectangular image into Panolens and simply 1st get the same panorama viewer as can be visible below:

Since Panolens.js is a wrapper of Three.js I expected the same result as when I throw my image into the 1st link above. (drag & drop it) - camera looks into the center of the image.

What I get instead is : camera looks into the left most area of the panorama image.

I solve this using

panorama.addEventListener( 'enter-fade-start', function() {
        viewer.getControl().target.set(10, -2, 0);
        viewer.getControl().update();
        //viewer.tweenControlCenter( new THREE.Vector3(2, -1, 1), 2000 );
});

But when I move to another panorama and come back, this code does not seem to have any effect (althought event is properly triggered).

How can I make the camera look into the same direction each time I come back to my panorama? (I'm switching between multiple panoramas).

Basically I don't seem to understand vectors properly and where 0,0,0 is each time I come back to panorama, since It seems to be working differently based on where the camera is facing.

Any tips/links/explanations very much welcome.

Upvotes: 0

Views: 3015

Answers (1)

trainoasis
trainoasis

Reputation: 6720

I over complicated things it seems. The solution is to only use:

viewer.tweenControlCenter( new THREE.Vector3(10, -2, 0), 0 );

inside "enter-fade-start". And that's it.

Much of docs is a bit misleading with saying you have to call .update() on control and setting .target properly etc, but that does not seem to work as I expected.

Relevant example also here: https://codepen.io/pchen66/pen/LLgxME

Upvotes: 1

Related Questions