A-frame全景画廊与拇指旋转木马

Question

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

enter image description here

Answer 1

以下是我的表现：

1）您需要查看w3schools或wherever如何制作精美的缩略图轮播。

2）将它的z-index设置为1，因此它将位于a-frame画布之上。

3）使其位置固定，以免它飘走

4）使轮播上的点击事件更改a-sphere或document.querySelector("#beachThumbnail").addEventListener("click",()=>{ document.querySelector("a-sky").setAttribute("material","src","beach"); }); 的来源：

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

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

$ docker inspect foo/bar
[
    {
        # …
        "Config": {
            # …
            "Cmd": [
                "/usr/local/bin/script.sh"
            ],
            # …
        }
    }
]

5）..
6）利润

现场小提琴＆＃34;缩略图＆＃34;切换颜色here的选项。