Html - Change 360 images when click button with Panolen.js

harry
December 5, 2023
124 views
1 vote
2 Answers

I’m very new to html, css and javascript. So basically I have a page to display 360 panorama images, and I want the picture to change when I click on a button. For example I have button 1 to display image1, and button 2 to display image2.

What I’ve tried is to create a button on html file:

<button onclick="functionName(insertedName.value)">Image1</button>

and call the function on js file:

function functionName(){
    const panoramaImage = new PANOLENS.ImagePanorama("images/image3.jpg");
        const imageContainer = document.querySelector(".image-container");
        const viewer = new PANOLENS.Viewer({
        container: imageContainer,
});
viewer.add(panoramaImage);
}

But this doesn’t seem to work, do I misunderstand anything because I’m very new. Any help and explanation would help a lot, thanks!

Answers

Chosen as BEST ANSWER

document.addEventListener('DOMContentLoaded', () => {
  const viewer = new PANOLENS.Viewer({
    'container': document.querySelector('.image-container')
  });


  viewer.add(new PANOLENS.ImagePanorama("//pchen66.github.io/Panolens/examples/asset/textures/equirectangular/field.jpg"));

  document.querySelector('#button1').addEventListener('click', e => {
    viewer.dispose();
    viewer.add(new PANOLENS.ImagePanorama("//pchen66.github.io/Panolens/examples/asset/textures/equirectangular/field.jpg"));
  })

  document.querySelector('#button2').addEventListener('click', e => {
    viewer.dispose();
    viewer.add(new PANOLENS.ImagePanorama("//l13.alamy.com/360/2CWBB80/the-albert-memorial-in-kensington-gardens-london-picture-credit-mark-pain-alamy-stock-photo-2CWBB80.jpg"));
  })

  document.querySelector('#button3').addEventListener('click', e => {
    viewer.dispose();
    viewer.add(new PANOLENS.ImagePanorama("//l13.alamy.com/360/RB2CA4/bucheon-south-korea-december-13-2018-panorama-360-degrees-angle-view-of-snow-covered-park-on-a-sunny-day-RB2CA4.jpg"));
  })

})

.image-container{
    height: 30rem;

    position: relative;
    width: 55%;
    display: block;
    margin: 0 auto;
    margin-left: 25%;
    overflow: hidden;
    
  border: 2px solid #ebb47a;
  border-radius: 10px;
}

   <script src='//pchen66.github.io/js/three/three.min.js'></script>
   <script src='//pchen66.github.io/js/panolens/panolens.min.js'></script>
   
   <button id="button1">Image1</button>
   <button id="button2">Image2</button>
   <button id="button3">Image3</button>

   <div class="image-container">3d image display</div>

(Edit)

Having never used Panlolens it took a bit of time to figure out a method of changing the loaded panorama image and even now I don’t know if it is the best approach.

As you have only two images of known names my approach was to load the paths of both images into an array so that a simple 1 or 0 could be used to select an image via the assigned dataset attribute on the button itself. There are other ways to do this.

const d = document;
d.addEventListener('DOMContentLoaded', () => {
  const viewer = new PANOLENS.Viewer({
    'container': d.querySelector('.image-container')
  });


  const images = [
    '//pchen66.github.io/Panolens/examples/asset/textures/equirectangular/field.jpg',
    '//static.wixstatic.com/media/28cb8a_02e9916ab748463bab3a0241d249231a~mv2.jpg'
  ];

  viewer.add(new PANOLENS.ImagePanorama(images[1]));


  d.querySelector('button').addEventListener('click', e => {
    /* toggle a dataset attribute to select correct image from array */
    e.target.dataset.index = 1 - e.target.dataset.index;
    /* select the new image from array */
    let imgpath = images[Number(e.target.dataset.index)];
    
    /* dispose of previous image and load new */
    viewer.dispose();
    viewer.add(new PANOLENS.ImagePanorama(imgpath));
  })
})

body,
body * {
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}

button {
  width: 100px;
  position:absolute;
  top:1rem;
  left:1rem;
  padding: 0.5rem 0;
}

.image-container {
  height: 100vh;
}

.image-container:before {
  content: attr(data-image);
}

<script src='//pchen66.github.io/js/three/three.min.js'></script>
<script src='//pchen66.github.io/js/panolens/panolens.min.js'></script>


<button data-index=1>Change image</button>
<div class='image-container'></div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Change 360 images when click button with Panolen.js

Answers