AR.JS在移动设备和角落点击事件的最终答案
AR.JS在移动设备和角落点击事件的最终答案
提问于 2021-08-11 08:25:48
在过去的几周里，我一直在为A帧/ AR.JS点击事件而苦苦挣扎，并将其带到移动web浏览器上。我尝试了每一个教程，并阅读了所有相关的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>
回答 1
Stack Overflow用户
发布于 2021-09-02 17:28:10
同样的问题，我的朋友。到目前为止，我发现问题在某种程度上与“嵌入式”属性有关。如果您删除它，它将工作很好，但它没有响应窗口的大小。如果我找到了解决办法，我肯定会分享。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68738475
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号