Trying to create a 360-degree environment with informational buttons using THREE.js and Panolens.JS
However, I'm unable to resolve why the image is not appearing.
Continuously encountering the error: Uncaught ReferenceError: process is not defined.
Anyone know where this issue is originating from?
<body>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfcbd7cddadaff8f918e8d8d918f">[email protected]</a>/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6515040b0a09000b1625554b54554b">[email protected]</a>/build/panolens.min.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
body {
background-color: bisque;
}
#container {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
width: 700px;
height: 400px;
}
</style>
<div id="container"></div>
<script>
var panorama, viewer, container, infospot;
var containerBaseWidth = 700;
var containerBaseHeight = 400;
var deltaSize = 100;
container = document.querySelector('#container');
panorama = new PANOLENS.ImagePanorama('https://pannellum.org/images/alma.jpg');
infospot = new PANOLENS.Infospot(350, PANOLENS.DataImage.Info);
infospot.position.set(0, 0, -5000);
infospot.addHoverText('TEST PANOLENS', 30);
panorama.add(infospot);
viewer = new PANOLENS.Viewer({ container: container });
viewer.add(panorama);
function changeContainerSize(width, height) {
viewer.container.style.width = width + "px";
viewer.container.style.height = height + "px";
viewer.onWindowResize(width, height);
}
</script>
</body>