CODEWITHSUNDEEP
aframe
schatzkin
schatzkin

Reputation: 329

A-frame link to url with logo

I want to use a logo to link to an external URL (regular website, not VR) from inside the scene. This is what I have: 

<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>

When I inspect the element, I see the image listed correctly under Link, and also as pano under Material. But in the actual portal, all I see is a solid magenta color.

Thanks for your help!

Upvotes: 0

Views: 2661

Answers (1)

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14645

1) Using the link component. Provided the image is accessible
a) the path is correct
b) there are no CORS issues

setting the image attribute should provide background for the portal which is part of the link component.

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

2) Making your own link. Any element can become a link with some js. You could create your own element, which will change the window.location on click:

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>

Check out both methods in my fiddle, or down below:

<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>

Upvotes: 4

Related Questions