带有徽标的网址的 A 帧链接

Question

我想使用徽标从场景内部链接到外部 URL（常规网站，而不是 VR）。这就是我所拥有的：

<a-entity link="highlighted: true; highlightedColor:#000000; portal:#ec1e1e; href: https://schatzkin.com; title: Back to website; image: assets/logo-lockup-black.png"></a-entity>

当我检查元素时，我看到链接下正确列出的图像，以及材料下的全景。但在实际的门户中，我看到的只是纯洋红色。

感谢您的帮助！

Answer 1

1) 使用链接组件。只要图像是可访问的
a) 路径正确
b) 没有 CORS 问题

设置image 属性应该为portal 提供背景，它是link 组件的一部分。

link="highlighted: true; highlightedColor:#000000; href: https://schatzkin.com;
      titleColor: black; title: Back to website;image: https://i.imgur.com/wjobVTN.jpg"

---

2) 制作您自己的链接。任何元素都可以成为一些js的链接。 您可以创建自己的元素，这将在点击时更改 window.location：

AFRAME.registerComponent("mylink", {
  init: function() {
    this.el.addEventListener("click", (e)=> {
       window.location = this.data.href;
    })
  }
})

HTML

<a-text color="black" position="1 1 -2" value="goToSchatzkin" 
        mylink="href: https://schatzkin.com;"></a-text>

---

在我的fiddle 或下方查看这两种方法：

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("mylink", {
    init: function() {
      this.el.addEventListener("click", (e) => {
        window.location = this.data.href;
      })
    }
  })
</script>

<a-scene cursor="rayOrigin: mouse">
  <a-text color="black" position="1 1.6 -2" value="Click the text"
          mylink="href: https://schatzkin.com;"></a-text>
  <a-entity position="-1 1.6 -2" 
            link="highlighted: true; 
                  highlightedColor:#000000; backgroundColor: red; 
                  href: https://schatzkin.com; titleColor: black; 
                  title: click the image below.;
                  image: https://i.imgur.com/wjobVTN.jpg;
                  visualAspectEnabled: true"></a-entity>
</a-scene>