AR.JS 对移动设备和角落点击事件的最终回答答案

【问题标题】：AR.JS Final Answer to Click Events on Mobile Devices and in CornersAR.JS 对移动设备和角落点击事件的最终回答
【发布时间】：2021-10-14 16:57:10
【问题描述】：

在过去的几周里，我一直在努力解决 A-Frame / AR.JS 点击事件并将其引入移动网络浏览器。我尝试了每个教程并阅读了所有相关的 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>

【问题讨论】：

标签： javascript html augmented-reality aframe ar.js

【解决方案1】：

同样的问题，我的朋友。到目前为止，我发现问题与“嵌入式”属性有关。如果你删除它，它会工作得很好，但它不响应窗口大小。如果我找到解决方案，我一定会分享。

【讨论】：