如何使图像成为框架中的链接？

Question

I'm trying to make an augmented reality clickable icon to go to google.com. Following the docs, I'm unable to get the link to work. I've tried so many other sites but none seem to work. Here, I have the cleanest, non-convoluted version of what I tried.

(I did this in 8th Wall, if that makes any difference)

Here is what I have so far:

head.html

<meta name="8thwall:renderer" content="aframe:1.3.0">
<meta name="8thwall:package" content="@8thwall.xrextras">
<meta name="8thwall:package" content="@8thwall.landing-page">
<meta name="8thwall:package" content="@8thwall.coaching-overlay">

body.html

<a-scene 
landing-page
xrextras-loading
xrextras-runtime-error
xrextras-gesture-detector
xrweb>

  <a-assets>
    <img id="email" src="assets/email_icon_red.png">
  </a-assets>
  
  <a-entity 
    light="
      type: directional; 
      castShadow: true; 
      color: white; 
      intensity: 0.5" 
    position="5 10 7">
  </a-entity>
  
  <a-camera position="0 2 2"></a-camera>

  
  <a-entity link="href: https://aframe.io/; image: #email"></a-entity>
<!--image does not appear when I used this, as shown on A-frame doc--> 

 <!-- <a-image src="#email"></a-image>
 --> 
  
  <a-plane 
    height="2000" 
    width="2000" 
    rotation="-90 0 0" 
    material="shader: shadow; opacity: 0.67" 
    shadow>
  </a-plane>  
</a-scene>

Answer 1

I think there may be a bug in A-Frame currently for the property 'visualAspectEnabled' which controls if the link should display as a Portal or other design. It seems you can omit the property only when you have specified the geometry and material for the other design, but when you want to use the Portal you must include it inside of link as true. A-Frame Link Docs ( https://aframe.io/docs/1.3.0/components/link.html )

These should work in your example, but you will want to adjust their position/rotation and geometry size to match your scene/camera as well.

<!-- Portal link w/ 360 image -->
<a-entity id="portalLink"
position="0 0 0" rotation="0 0 0" scale="1 1 1"
link="href: https://aframe.io/; image: #email; visualAspectEnabled: true;"
></a-entity>

<!-- Plane link w/ flat image -->
<a-entity id="planeLink"
position="0 0 0" rotation="0 0 0" scale="1 1 1"
geometry="primitive: plane; height: 1; width: 1;"
material="shader: flat; src: #email; side: front;"
link="href: https://aframe.io/;"
></a-entity>