How to link a html file from A-Frame entity?

Question

I'm trying to load a HTML file when clicked on the <a-entity> and it doesn't work with the traditional HTML methods.(using href) Please see the code below.

<a-scene>
    <a-assets>
      <a-asset-item id="mBot" src="../assets/robot1.glb"></a-asset-item>
      <img id="panorama" src="../assets/stock.jpg" />
    </a-assets>

    <!-- Robot -->
    <a-entity
      gltf-model="#mBot"
      scale="4 4 4"
      position="0 1 2"
      id="mBot-1"
    >
      <a-animation attribute="rotation" to="0 360 0" repeat="indefinite" >
      </a-animation>
    </a-entity>


    <!-- Robot -->
    <a-entity
      gltf-model="#mBot"
      scale="4 4 4"
      position="8 1 2"
      id="mBot-2"
    >
      <a-animation attribute="rotation" to="0 -360 0 " repeat="indefinite">
      </a-animation>
    </a-entity>



    <a-entity position="4 0 8">
      <a-camera></a-camera>
    </a-entity>

    <a-sky src="#panorama"></a-sky>
  </a-scene>

I want to load two separate html files when clicked on entity id=mBot-1 and mBot-2.
Highly appreciate any help to solve this.

1) Check out [this thread](https://stackoverflow.com/questions/51506363/a-frame-link-to-url-with-logo), there's an example with links. 2) To load "local" html files in most cases You'll need a local server, or use the file protocol: `file:///path_to_file.html` ([thread](https://stackoverflow.com/questions/18246053/how-can-i-create-a-link-to-a-local-file-on-a-locally-run-web-page)) — Piotr Adam Milewski, Jan 22 '22 at 11:44
Used JS as mentioned in the 1st thread, and it worked thanks for the tip ! — ArchieVon, Jan 22 '22 at 21:39

score 0 · Answer 1 · answered Jan 21 '22 at 19:34

In general, you can add a click handler to your element.

However, it is not clear what you mean by "load a HTML file". Do you mean follow a link to that page?

You also do not specify what is the URL of that file. Here is an example using stackoverflow.com as the "HTML file"

    var entities = document.querySelectorAll('A-ENTITY');
    var entity;
    for (var i = 1; i < entities.length; i++) {
        entity = entities[i];
        entity.addEventListener('click', function() {
            window.location.href = "https://stackoverflow.com";
        });
    }

score 0 · Accepted Answer · answered Jan 22 '22 at 22:15

The issue can be resolved by making an own link with js.

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>

Final Code

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

How to link a html file from A-Frame entity?

2 Answers2