CODEWITHSUNDEEP
htmlaframevirtual-realitybox
Aidan Young
Aidan Young

Reputation: 102

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?

Upvotes: 2

Views: 481

Answers (2)

Protocol Alpha
Protocol Alpha

Reputation: 17

I have a website that makes Icosahedrons links to the other sections of the site (Ignore the absurd amount of components, I'm copying and pasting from the site code)

<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/aframe-text-geometry-component.min.js"></script>
    <script src="https://unpkg.com/aframe-event-set-component@^4.0.0/dist/aframe-event-set-component.min.js"></script>
    <script src="https://unpkg.com/aframe-debug-cursor-component/dist/aframe-debug-cursor-component.min.js"></script>
    <script src="https://cdn.rawgit.com/donmccurdy/aframe-physics-system/v4.0.1/dist/aframe-physics-system.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-extras.min.js"></script>

<a-scene>
<a-entity
          link="href: personal.html; title: Personal Projects"
          geometry="primitive: icosahedron; depth: 0.5; height: 0.5; width: 0.5; skipCache: false; segmentsHeight: 1; segmentsWidth: 1; segmentsDepth: 1"
          material="color: #ff6600"
          animation__mouseenter="property: components.material.material.color; type: color; to: blue; startEvents: mouseenter; dur: 500"
          animation__mouseleave="property: components.material.material.color; type: color; to: #ff6600; startEvents: mouseleave; dur: 500"
        ></a-entity>
</a-scene>

This is A-Frame 1.0.3 so I'm not sure if it works in the new version.

Upvotes: 0

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14645

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.

Upvotes: 1

Related Questions