带有徽标的 A 型框架 link 到 url

Question

我想使用徽标从场景内部 link 到外部 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>

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

感谢您的帮助！

Answer 1

1) 使用 link 组件。如果图像可访问
a) 路径正确
b) 没有 CORS 问题

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

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

2) 制作你自己的 link。任何元素都可以通过一些js变成link。您可以创建自己的元素，这将在单击时更改 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>

带有徽标的 A 型框架 link 到 url

A-frame link to url with logo

aframe