使用 Panolen.js 单击按钮时更改 360 度图像

Question

我对 html、css 和 javascript 很陌生。所以基本上我有一个页面来显示 360 全景图像，并且我希望当我单击按钮时图片会发生变化。例如，我有按钮 1 显示图像 1，按钮 2 显示图像 2。

我尝试的是在 html 文件上创建一个按钮：

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

并调用js文件上的函数：

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);
}

但这似乎不起作用，我是否误解了什么，因为我很新。任何帮助和解释都会有很大帮助，谢谢！

Answer 1

由于从未使用过 Panlolens，因此花了一些时间来找出更改加载的全景图像的方法，即使现在我也不知道这是否是最好的方法。

由于您只有两个已知名称的图像，我的方法是将两个图像的路径加载到一个数组中，以便可以使用简单的 1 或 0 通过按钮本身分配的

dataset

属性来选择图像。还有其他方法可以做到这一点。

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;
  margin: 1px;
  display: inline-block;
  padding: 0.5rem 0;
  z-index: 2
}

.image-container {
  width: 100%;
  height: 100vh;
  z-index: -1;
}

.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>