带拇指旋转木马的 A 框全景画廊答案

【问题标题】：A-frame panoramic gallery with Thumb carousel带拇指旋转木马的 A 框全景画廊
【发布时间】：2017-11-20 19:59:58
【问题描述】：

如何向我的 aframe 全景查看器添加缩略图轮播？你有示例代码吗？谢谢！下面的图片显示了我想做的whatsapp。

enter image description here

【问题讨论】：

标签： aframe

【解决方案1】：

我会这样做：

1) 您需要查看w3schools 或wherever 如何制作一个合适的缩略图轮播。

2) 将其 z-index 设置为 1，因此它将位于 a-frame 画布上方。

3) 让它的位置固定，这样它就不会飘走

4) 让轮播上的点击事件改变a-sky或a-sphere的来源：

document.querySelector("#beachThumbnail").addEventListener("click",()=>{
    document.querySelector("a-sky").setAttribute("material","src","beach");
});

为了使其更加自定义，您可以将缩略图 ID 与图像名称相关联，或者创建一个全新的属性，并将侦听器放在天空中：

document.querySelector(".carouselItem").addEventListener("click",(e)=>{
    this.el.setAttribute("material","src",e.srcElement.attributes[1]);
});

5)..
6) 利润

使用切换颜色here 的“缩略图”选项进行现场演奏。

【讨论】：