触摸 Ar.js 中的 ar 对象

Question

我有一个关于 ar 对象触摸检测的问题。我使用 A-Frame 和 Ar.js

在我的项目中，我有一个可以旋转的地球仪。现在我想添加国家特定 "markers"，它也应该是对象。

我试过：

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 中的 raycaster，但也没有检测到:(

有没有更好的idea/reference项目？

Answer 1

使用a-frame 1.0.0之前的版本就可以了

<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.

根据我的观察，raycaster direction 在使用框架 0.9.2 和 1.0.0 时有所不同。奇怪的是，当使用 vanilla a-frame（没有 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

中查看

触摸 Ar.js 中的 ar 对象

Touch on ar Object in Ar.js

javascript

model

augmented-reality

aframe

ar.js