如何在 AR.js/AFrame 中为文本（没有圆形光标）添加手指触摸事件侦听器？

Question

我正在构建一个 AR 应用程序，我想在用户触摸手机显示屏上的“a-text”（Hello World 文本）后导航到一个 URL。

我怎样才能做到这一点？

代码在这里https://glitch.com/edit/#!/tide-jelly-jackal

Answer 1

首先，您应该更新您的a-frame版本。 花了我一段时间，为什么我的代码对你的不起作用。

无论如何，这是工作代码

<!DOCTYPE html>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.2/aframe/build/aframe-ar.js"></script>
<script>
AFRAME.registerComponent('for_a_marker', {
    init: function () {
        var text = document.querySelector('#text');
        text.addEventListener("click", function (evt) { //or you could do "mouseenter" [event](https://aframe.io/docs/0.9.0/components/cursor.html#events)
            alert("do your stuff");
        });
    }
});
</script>
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
    <a-scene embedded arjs='debugUIEnabled: false; sourceType: webcam' vr-mode-ui='enabled: false'>
        <a-entity cursor="rayOrigin: mouse" raycaster="objects: .intersectable; useWorldCoordinates: true;"></a-entity>
        <a-marker id="marker" preset="hiro" emitevents="true" for_a_marker> 
            <a-text id="text" class="intersectable" scale="2 2 2" position="0 0 0" rotation="270 0 0" value="text" color="red"></a-text>   
        </a-marker>
        <a-entity camera></a-entity>
    </a-scene>
</body>
</html>

我不是真正的专家，而且还在学习。 你也可以自己试验一下。 但请注意这一点：

如果不使用AFRAME.registerComponent部分， var text将为 null
<a-entity cursor ... .intersectable ...>确保将.intersectable放入您的<a-text class="intersectable"> 。 这就是魔术师，有关更多详细信息，请查看此文档： a-frame 0.9.0 raycaster

注意：存在点击事件不在预期位置的问题。

如何在 AR.js/AFrame 中为文本（没有圆形光标）添加手指触摸事件侦听器？

问题描述

1 个解决方案

解决方案1
0 2020-04-03 14:08:44

如何在 AR.js/AFrame 中为文本（没有圆形光标）添加手指触摸事件侦听器？

问题描述

1 个解决方案

解决方案1 0 2020-04-03 14:08:44

解决方案1
0 2020-04-03 14:08:44