I'm trying for some time now to set initial viewer position for panolens.js.
The set-up looks like this:
const panoPhoto1 = 'https://conceptcityiasi.ro/assets/images/tours/tip1/apartamente-noi-de-vanzare-iasi-dacia-1_camera-tip_1_360_living.jpg';
const panoPhoto2 = 'https://conceptcityiasi.ro/assets/images/tours/tip1/apartamente-noi-de-vanzare-iasi-dacia-1_camera-tip_1_360_hol.jpg';
const panoPhoto3 = 'https://conceptcityiasi.ro/assets/images/tours/tip1/apartamente-noi-de-vanzare-iasi-dacia-1_camera-tip_1_360_baie.jpg';
const panoPhoto4 = 'https://conceptcityiasi.ro/assets/images/tours/tip1/apartamente-noi-de-vanzare-iasi-dacia-1_camera-tip_1_360_bucatarie.jpg';
const panorama1 = new PANOLENS.ImagePanorama(panoPhoto1);
const panorama2 = new PANOLENS.ImagePanorama(panoPhoto2);
const panorama3 = new PANOLENS.ImagePanorama(panoPhoto3);
const panorama4 = new PANOLENS.ImagePanorama(panoPhoto4);
panorama1.link( panorama2, new THREE.Vector3( -900, -530, -4800 ) );
panorama2.link( panorama1, new THREE.Vector3( -490, -1200, -4800 ) );
panorama2.link( panorama3, new THREE.Vector3( -4700, -1030, 1100 ) );
panorama1.link( panorama4, new THREE.Vector3( -4100, -690, 2600 ) );
panorama3.link( panorama2, new THREE.Vector3( -1750, -870, -4500 ) );
panorama4.link( panorama1, new THREE.Vector3( -4100, -2400, 1300 ) );
const viewer = new PANOLENS.Viewer({
container: panoImage,
autoRotate: true,
autoRotateSpeed: 0.5,
autoHideInfospot: false,
clickTolerance: 100,
cameraFov: 100,
viewIndicator: true,
indicatorSize: 100,
output: 'console'
});
viewer.add(panorama1, panorama2, panorama3, panorama4);
I feel like I'm doing something wrong, but I can't figure it out what. I've seen some examples with initialLookPosition() but none of them seem to work.
Got it, so you need an array of positions and an event listener which calls a viewer method. It was in some example on Panolens's page.
var lookAtPositions = [
new THREE.Vector3(-306, -2070, 4530 ),
new THREE.Vector3(-2360, -1390, -4180 ),
new THREE.Vector3(-4350, -2460, -26 ),
new THREE.Vector3(3609, -2921, -1830 )
];
const panorama1 = new PANOLENS.ImagePanorama(panoPhoto1);
panorama1.addEventListener( 'enter-fade-start', function(){
viewer.tweenControlCenter( lookAtPositions[0], 12000 );
} );
const panorama2 = new PANOLENS.ImagePanorama(panoPhoto2);
panorama2.addEventListener( 'enter-fade-start', function(){
viewer.tweenControlCenter( lookAtPositions[1], 0);
} );
const panorama3 = new PANOLENS.ImagePanorama(panoPhoto3);
panorama3.addEventListener( 'enter-fade-start', function(){
viewer.tweenControlCenter( lookAtPositions[3], 0 );
} );
const panorama4 = new PANOLENS.ImagePanorama(panoPhoto4);
panorama4.addEventListener( 'enter-fade-start', function(){
viewer.tweenControlCenter( lookAtPositions[2], 0 );
} );