过去几周，我一直在努力将A-Frame/AR.JS点击事件带到移动web浏览器中。我尝试了每一个教程，并阅读了所有相关的github问题，但仍然没有运气。
我只是想在可点击的标记上方显示一些a-box(例如6)。点击其中一个方框会把你带到另一个网页。但是我遇到了以下问题:
- 点击事件只有在盒子非常靠近中心时才会被正确触发。在视图的边界，无法识别单击。在浏览器中尝试显示，在鼠标悬停时"点击-手"有时会弹出移位到盒子。
- 在一些手机浏览器中，视图被极度放大。我认为这不仅是错误的相机，它也变焦/或只显示整个相机饲料的一部分。
我的代码是这样的:
<!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>同样的问题，我的朋友。到目前为止，我发现这个问题在某种程度上与"嵌入"属性有关。如果你删除它，它会工作得很好，但它对窗口大小没有响应。如果我找到了解决办法，我一定会和大家分享的。