带有Thumb旋转木马的A型全景美术馆

Question

如何将缩略图旋转木马添加到我的AFrame全景浏览器中？你有一个示例代码。谢谢！ 下面的图片显示了我想要做的whatsapp。

enter image description here

Answer 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一个“缩略图”选项。