I have been struggeling the past weeks with A-Frame / AR.JS click events and bringing it to mobile web browsers. I tried every tutorial and read all related github issues but still no luck.
I simply want to display a number of a-boxes (e.g. 6) above a marker that are clickable. And clicking on one of the box brings you to another webpage. But I encounter the following issues:
- The click event is only correctly triggered if the box is very close to the center. At the border of the view the clicks are not recognized. Trying it in browser shows that at hovering the "click-hand" sometimes pops up displaced to the box.
- In some mobile phone browsers the view is extremely zoomed. I think it is not only the wrong camera, it is also zoomed / or only a part of the whole camera feed is shown.
My code looks like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<script>
AFRAME.registerComponent("navclick", {
schema: {
url: {
default: ""
}
},
init: function() {
var data = this.data;
var el = this.el;
el.addEventListener("click", () => {
window.open(data.url, "_blank");
});
}
});
</script>
</head>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs='debugUIEnabled: false; trackingMethod: best; sourceWidth:640; sourceHeight:360; displayWidth: 1920; displayHeight: 1080;'>
<a-marker-camera preset='hiro' cursor="rayOrigin: mouse;">
<a-box src="/1.png" scale = "0.25 0.25 0.25" position="0 0.3 -0.9" navclick="url: https://www.google.com/a"></a-box>
<a-box src="/2.png" scale = "0.25 0.25 0.25" position="0 0.3 -0.6" navclick="url: https://www.google.com/b"></a-box>
<a-box src="/3.png" scale = "0.25 0.25 0.25" position="0 0.3 -0.3" navclick="url: https://www.google.com/c"></a-box>
<a-box src="/4.png" scale = "0.25 0.25 0.25" position="0 0.3 0" navclick="url: https://www.google.com/d"></a-box>
<a-box src="/5.png" scale = "0.25 0.25 0.25" position="0 0.3 0.3" navclick="url: https://www.google.com/e"></a-box>
<a-box src="/6.png" scale = "0.25 0.25 0.25" position="0 0.3 0.6" navclick="url: https://www.google.com/f"></a-box>
</a-marker-camera fov="40">
</a-marker>
</a-scene>
</body>
</html>