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.
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";
});
}
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>