时间戳

首页 > 解决方案 > AR.JS 对移动设备和角落点击事件的最终答案

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

问题描述

在过去的几周里，我一直在努力解决 A-Frame / AR.JS 点击事件并将其带到移动网络浏览器中。我尝试了每个教程并阅读了所有相关的 github 问题，但仍然没有运气。

我只是想在可点击的标记上方显示一些 a 框（例如 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>

标签： javascripthtmlaugmented-realityaframear.js

解决方案

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

推荐阅读