Panolens example

panolens_example.htm

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    html, body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
    }

    #viewer {
        width: 100%;
        height: 100%;
    }

    #new_infospot2 {
        max-width: 500px;
        max-height: 500px;
        min-width: 200px;
        min-height: 250px;
        background: #fff;
        color: #000;
        border-radius: 3px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding: 20px;
    }
</style>

<div id="viewer"></div>

<div id="new_infospot2" class="infospot" style="display:none">
    <div class="title">China's Forgotten War</div>
    <div class="text">WWII came to the small town of Tai’erzhuang in central China – and it was never the same again.
        The town was strategically placed, on the north-south transport railway corridor and the ancient Grand Canal,
        and so was a focus of the Japanese Imperial army as it advanced. Li Jing Shan was only a child when his family
        fled the fighting. They returned to find their home, and most of the town, in ruins.
    </div>
</div>

<script src="https://pchen66.github.io/js/three/three.min.js"></script>
<script src="https://rawgit.com/pchen66/panolens.js/dev/build/panolens.min.js"></script>
<script>
  const viewer = new PANOLENS.Viewer({
    container: document.querySelector('#viewer'),
  });

  let panorama = new PANOLENS.ImagePanorama('https://images.unsplash.com/photo-1552288092-76e7d732366c');
  viewer.add(panorama);

  let new_panorama = new PANOLENS.ImagePanorama('https://images.unsplash.com/photo-1509225770129-fbcf8a696c0b');
  let new_infospot1 = new PANOLENS.Infospot(200, PANOLENS.DataImage.Info);
  new_infospot1.position.set(1500, -800, -2000);
  new_infospot1.addEventListener('click', function () {
    alert('clicked')
  });
  new_panorama.add(new_infospot1);
  let new_infospot2 = new PANOLENS.Infospot(200, PANOLENS.DataImage.Info);
  new_infospot2.position.set(2000, -800, -2000);
  new_infospot2.addHoverElement(document.querySelector('#new_infospot2'), 200);
  new_panorama.addEventListener('leave', function () {
    document.querySelectorAll('.infospot').forEach(function (infospot) {
      infospot.style.display = 'none';
    });
  });
  new_panorama.add(new_infospot2);
  viewer.add(new_panorama);

  panorama.link(new_panorama, new THREE.Vector3(200, -800, -2000), 200, 'https://images.unsplash.com/photo-1509225770129-fbcf8a696c0b');
  new_panorama.link(panorama, new THREE.Vector3(200, -800, -2000));
  
  if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
    viewer.enableControl(PANOLENS.CONTROLS.DEVICEORIENTATION);
</script>