在Ar.js中触摸AR对象

Question

我有一个关于AR物体触摸检测的问题。我使用A-Frame和Ar.js。

在我的项目中，我有一个可以旋转的地球仪。现在我想添加特定国家的“标记”，这些标记也应该是物体。

我尝试了：

AFRAME.registerComponent（'markerhandler'，{

init: function() {
    const animatedMarker = document.querySelector("#hiro");
    const aEntity = document.querySelector("#globe");

    animatedMarker.addEventListener('click', function(ev, target){
        console.log("hi")

    });

但我刚刚发现屏幕上的任何地方都可以触发点击事件...

我尝试使用 a-frame 中的射线投射器，但也没有检测到 :(

有人有更好的想法或参考项目吗？

- Lukas Metzger

Answer 1

如果您使用的是早于1.0.0版本的a-frame，则只需执行以下操作：

<a-marker cursor="rayOrigin: mouse">
     <a-box click-listener-component></a-box>
</a-marker>
<a-entity camera></a-camera>

---

但自从1.0.0版本以来，它就不起作用了，至少对于文档中的示例是这样。

据我观察，在使用a-frame 0.9.2和1.0.0时，射线投射方向是不同的。奇怪的是，当不使用ar.js时，它似乎运行良好。看起来像是一个ar.js的问题。

无论如何，如果你用旧版的THREE.Vector3的unproject替换光标方向计算，则可以解决问题:

// instead of this:
applyMatrix4( camera.projectionMatrixInverse ).applyMatrix4( camera.matrixWorld );

// use this
let matrix = new THREE.Matrix4()
applyMatrix4( matrix.getInverse( camera.projectionMatrix ) ).applyMatrix4( camera.matrixWorld );

光标组件已经重新开始工作了。您可以在这个 glitch中查看它。

- Piotr Adam Milewski

---

这个非常好用，真的应该在可在线获取的AR.js版本中集成。 - Steve Harding

我想我可以将其制作成一个组件 - Piotr Adam Milewski