Прикосновение к объекту Ar в Ar. js

Question

У меня есть вопрос, касающийся обнаружения касания на объектах. Я использую A-Frame с Ar. js

В моем проекте у меня есть глобус, который можно вращать. Теперь я хочу добавить "маркеры" для страны c, которые также должны быть объектами.

Я пытался:

AFRAME.registerComponent ('markerhandler', {

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

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

    });

Но я просто распознал событие щелчка в любом месте на дисплее ...

Я также пытался использовать raycaster из a-frame, но также без обнаружения: (

У кого-нибудь есть идеи или справочные проекты?

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 это не работает, по крайней мере с примером из документации .

Из того, что я заметил, направление raycaster отличается при использовании a-frame 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 );

Курсор снова работает. Вы можете проверить это в этот глюк