我正在构建一个AR应用程序,并且一旦用户在电话显示屏上触摸'a-text'(Hello World文本),我就想导航到URL。
我该如何实现?
首先,您应该更新您的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"
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
将为空<a-entity cursor ... .intersectable ...>
确保将.intersectable
放到<a-text class="intersectable">
中。这是做魔术的人,有关更多详细信息,请查看此文档:a-frame 0.9.0 raycaster