javascript - 触摸 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 中的光线转换器，但也没有检测到:(

有人有更好的想法/引用项目吗？

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 开始，它不起作用，至少对于 the example from the docs 来说是这样。 .

据我所知，raycaster direction使用 a 帧 0.9.2 和 1.0.0 时有所不同。奇怪的是，当使用普通的 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查看