Here is an example.
This will work using the Hype Preview or when placed on a server. and not as a local export due to cross domain security.
In this I have this function createPanoViewer that runs on scene load
window.viewer = pannellum.viewer('panorama', {
"panorama": '${resourcesFolderName}/lake.jpeg',
"autoLoad": true,
"showControls": false
});
This creates the viewer in a Rectangle that has the id of panorama.
The viewer can be controlled by the buttons using the pannellum API.
Each button is give an id which is used to determine which button is clicked and what action to then take.
The buttons all call the same function name buttons
switch (element.id) {
case 'pan-up':
window.viewer.setPitch(window.viewer.getPitch() + 10);
break;
case 'pan-down':
window.viewer.setPitch(window.viewer.getPitch() - 10);
break;
case 'pan-left':
window.viewer.setYaw(window.viewer.getYaw() - 10);
break;
case 'pan-right':
window.viewer.setYaw(window.viewer.getYaw() + 10);
break;
case 'zoom-in':
window.viewer.setHfov(window.viewer.getHfov() - 10);
break;
case 'zoom-out':
window.viewer.setHfov(window.viewer.getHfov() + 10);
break;
case 'autoRotate':
window.viewer.startAutoRotate();
break;
case 'FullScreen':
window.parent.viewer.toggleFullscreen();
break;
default:
return;
}
In the head file we link to the cdns like so.
<link rel="stylesheet" href="https://cdn.pannellum.org/2.3/pannellum.css"/>
<script type="text/javascript" src="https://cdn.pannellum.org/2.3/pannellum.js"></script>
pan.hype.zip (2.9 MB)