Search code examples
htmlaframevirtual-realitybox

A-frame box is a link

I was wondering how it would be possible in A-frame (aframe.io) turn a box into a link. I have the link structure and the box structure but I want the box to turn into a link. Any ideas on how I could accomplish this?

Solution

  • a-frames link component uses window.location to change websites, you can do the same within a custom component:

    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  // component declaration
  AFRAME.registerComponent("mylink", {
    // define a url in the schema
    schema: {
      href: {}
    },
    init: function() {
      // when clicked - change the location:
      this.el.addEventListener("click", (e) => {
        window.location = this.data.href;
      })
    }
  })
</script>

<a-scene cursor="rayOrigin: mouse">
  <a-box position="0 1 -2" color="blue" mylink="href: https://aframe.io/;"></a-box>
</a-scene>

    You could also grab the anchor (a) element and do `anchorElement.click();` instead of changing the `window.location` if you prefer.