时间戳

首页 > 解决方案 > 带有徽标的网址的 A 帧链接

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

问题描述

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

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

谢谢你的帮助！

标签： aframe

解决方案

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>

推荐阅读