A 帧 (aframe.io) 360 度图像（Google 类似地图街景的功能）

Question

我有一个 360 度图像，我正在使用一个框架来显示。

我的问题是，是否有任何交互功能（如 Google 地图街景视图）可以让我使用叠加箭头并将用户带到另一个 360 度图像？是否有可能做到这一点？如果可能的话，我将如何添加这种类型的功能？

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

我知道这不仅仅是一个问题，但希望有人能帮助我。我真的很喜欢A-Frame。

Answer 1

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

360 度图库（如 google 地图街景）：

最简单的方法是制作一个 sphere/sky 来更改其源图像。示例 here, tutorial here。
基本上，您使用 <a-sphere src="myImage.jpg"> 或 <a-sphere material="src:myImage.jpg"> 等图像来源制作 <a-sky> 或 <a-sphere>。当然，您希望按钮遍布各处，而不是像示例中那样井井有条。

链接
我不确定添加普通链接，当然你可以添加任何实体，这将通过 javascript 将你重定向到另一个页面，如下所示：
在场景中：

<a-entity link><a-entity>

@js:

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

文字
添加文本记录在案 here。如果您不喜欢它，您可以随时制作带有 alpha 通道的图像，然后将其添加到您喜欢的任何位置。

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