触摸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帧的raycaster，但是也没有检测到：（

有人有更好的主意/参考项目吗？

Answer 1

使用早于1.0.0的A框架版本，您可以这样做

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

---

但是从1.0.0版本开始，它至少在the example from the docs下不起作用。

根据我所注意到的，使用a帧raycaster direction和0.9.2时1.0.0不同。奇怪的是，当使用香草a框架（不带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 );
光标组件再次工作。您可以在this glitch

中检出