Question

我有一个360度的图像，我使用一帧来显示。

我的问题是，是否有任何交互性（如谷歌地图街景），我可以采取叠加箭头并将用户带到另一个360度图像？是否有可能做到这一点？如果有可能，我将如何添加此类功能？

是否可以在360图像上添加文字或html链接？

我意识到这不仅仅是一个问题，但希望有人可以帮助我。我真的很喜欢A-Frame。

Answer 1

有多种方法可以实现您想要实现的目标。

360画廊（如谷歌地图街景）：

最简单的方法是制作一个正在改变其源图像的球体/天空。示例here，教程here。
基本上，您使用<a-sky>或<a-sphere>的图片来源制作<a-sphere src="myImage.jpg">或<a-sphere material="src:myImage.jpg">。当然，您希望按钮遍布整个地方，而不是像示例中那样组织。

<强>链接
我不确定添加普通链接，当然你可以添加任何实体，这会通过这样的javascript将你重定向到另一个页面：
在现场：

<a-entity link><a-entity>

@js：

AFRAME.registerComponent('link', {
        init:function(){
           this.el.addEventListener('click',function(){
                 window.location.href = "http://stackoverflow.com";
           });
        }
      });

文字
记录添加文本here。如果您不喜欢它，您可以随时使用Alpha通道制作图像，并将其添加到您喜欢的任何位置。

老实说，尝试制作360度图像，然后制作2D图片，然后处理某些行为（链接，切换图像）。

A-Frame（aframe.io）360度图像（谷歌地图类似街景功能）

1 个答案: