CODEWITHSUNDEEP
javascripthtmlaframe
the_answer_is_xyz
the_answer_is_xyz

Reputation: 521

Multiple solutions to link a-text or other components entities in aframe still have error

This has been an issue with me on place links in aframe components. So far, nothing has worked. These are the three solutions I try to do:

  1. Use aframe-href-component where I can just place an href="www.sample.com" in any entity. Great, the problem is when I go to this cdn to get the aframe-href-component.min.js, I got a 404 error. Maybe the author pulled it off. So this is a dead end.

  2. Reported aframe issue #403, last closed in 2016, when the author Kevin Ngo which takes me to git pull #1575, where there is a new link.js component added. This means I can just use link attribute in my component. For example:

    <a-text link="https://www.washingtonpost.com/archive/local/1998/01/08/labor-leader-jack-t-conway-dies" id="chrysler-caption" position="-5.40 6.70 -0.30" rotation="0 0 0" scale="1 1 1" value="JACK T. CONWAY"></a-text>

  3. Somebody mentioned in another Stack Overflow post to just add my own component, so here, I created this one:

    AFRAME.registerComponent('link-url', {
          schema: {default: ''},

          init: function () {
            var url = this.data;
            this.el.addEventListener('click', function () {
              window.location.href = url;
            });
          }
        });

So I try to implement this in my aframe picture gallery here. I tried all the two options, but for some reason, by text file on the top-left most image cannot be linked to an outside article (regular post in a news site, not AFRAME site).

I suspect something is going on with my custom registered AFRAME component, but it will be great to know how to link to an on-click.

Upvotes: 0

Views: 454

Answers (1)

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14665

2) You need to add href: link to the link component:

<a-text link="href:https://www.washingtonpost.com/archive/local/1998/01/08/labor-leader-jack-t-conway-dies"></a-text>

3) According to the docs, the schema works like this: declare a variable, and access it in the data object:

AFRAME.registerComponent("foo", {
  schema: {
    {myvalue: {default: ""}
  },
  init: function() {
    var myvalue = this.data.myvalue
  }
})

<a-box foo="myvalue: 10">

so, you can't just try to access some imaginary variable in data, you need to "declare" it in the schema, and then you can access the value.

Check out both 2) and 3) here (glitch), or here (fiddle, but won't allow redirecting)

Upvotes: 1

Related Questions