var panorama1, panorama2, panorama3, viewer, container, infospot, infospotTwo, infospotThree, infospotFour, progress, progressElement;
panorama1 = new PANOLENS.ImagePanorama('images/1.jpg');
Positions Details:
var lookAtPositions = [
new THREE.Vector3(4871.39, 1088.07, -118.41),
new THREE.Vector3(1278.27, 732.65, 4769.19)
];
Function:
panorama1.addEventListener('enter-fade-start', function () {
viewer.tweenControlCenter(lookAtPositions[0], 0);
});
viewer = new PANOLENS.Viewer({
output: 'console', container: container, controlBar: true,
});
viewer.add(panorama1);
panorama1.link(panorama2, infospotPositions[0]);
panorama2.link(panorama3, infospotPositions[0]);
panorama3.link(panorama1, infospotPositions[1]);
viewer.add(panorama1, panorama2, panorama3);
Positions Details:
var infospotPositions = [
new THREE.Vector3(3136.06, 1216.30, -3690.14),
new THREE.Vector3(3258.81, -295.50, 3771.13)
];
Linking:
panorama1.link(panorama2, infospotPositions[0]);
Function:
infospot = new PANOLENS.Infospot(350, PANOLENS.DataImage.Info);
infospot.position.set(2000, 0000, -6000);
Add Hover Text:-
infospot.addHoverText( 'Blazer', 30 );
Showing Info Icon:
panorama1.add(infospot);
declaration:-
progressElement = document.getElementById("progress");
progressContainer = document.getElementById("progress_container");
Functions:-
function onEnter(event) {
progressContainer.classList.remove("hide");
progressContainer.classList.add("show");
progressElement.style.width = 0;
progressElement.classList.remove("finish");
console.log("entered");
}
function onProgress(event) {
progress = (event.progress.loaded / event.progress.total) * 100;
progressElement.style.width = progress + "%";
if (progress === 100) {
progressElement.classList.add("finish");
setTimeout(function () {
progressContainer.classList.remove("show");
progressContainer.classList.add("hide");
}, 500);
}
}
panorama1.addEventListener("progress", onProgress);
panorama1.addEventListener("enter", onEnter);
CSS Part:-
.show {
opacity: 1;
display: block;
}
.hide {
opacity: 0;
display: none;
}
#progress_container {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
background: #000;
}
#progress {
width: 0;
height: 5px;
position: fixed;
top: 50%;
background: #fff;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
#progress.finish {
opacity: 0;
}
Html part:-
<div id="progress_container">
<div id="progress" style="width: 0px" class=""></div>
</div>
var cube = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100), new THREE.MeshNormalMaterial());
cube.position.set(-300, 100, 100);
viewer.addUpdateCallback(function(){
cube.rotation.y += 0.05;
cube.rotation.x += 0.02;
});
panorama1.add( cube );
var controlItemCube = {
style: {
backgroundImage: 'url(http://i40.tinypic.com/1531w79.jpg)'
},
onTap: function(){
viewer.tweenControlCenterByObject( cube );
}
};
viewer.appendControlItem(controlItemCube);
var posterInfospot = new PANOLENS.Infospot(2000, 'https://images-na.ssl-images-amazon.com/images/I/91nELBuo3kL._RI_SX200_.jpg');
posterInfospot.position.set(-4774.9, 474.16, -1375.02);
panorama1.add(posterInfospot);
var controlItemPoster = {
style: {
backgroundImage: 'url(https://images-na.ssl-images-amazon.com/images/I/31DcBWmTrNL._CR0,25,201,201.jpg)',
float: 'left'
},
onTap: function(){
posterInfospot.focus();
}
};
viewer.appendControlItem(controlItemPoster);
var controlItemVideoGroup = {
style: {
backgroundImage: 'url(https://images-na.ssl-images-amazon.com/images/I/91ovrqFkzkL._RI_SX200_.jpg)',
float: 'left'
},
onTap: function(){
viewer.setPanorama(panorama);
},
group: 'video'
};
viewer.appendControlItem(controlItemVideoGroup);