Как добавить прослушиватель событий касания пальцем к тексту (без кругового курсора) в AR.js / AFrame? - PullRequest
Новая
       94

Как добавить прослушиватель событий касания пальцем к тексту (без кругового курсора) в AR.js / AFrame?

1 голос
/ 12 марта 2020

Я создаю приложение AR и хочу перейти к URL-адресу, как только пользователь прикоснется к тексту (текст Hello World) на дисплее телефона.

Как этого добиться?

Код здесь https://glitch.com/edit/#! / Tide-Jelly-Jackal

1 Ответ

0 голосов
/ 03 апреля 2020

Прежде всего, вам следует обновить a-frame версию. Это заняло у меня какое-то время, почему мой код не работает на вашем.

В любом случае, это рабочий код 

<!DOCTYPE html>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.2/aframe/build/aframe-ar.js"></script>
<script>
AFRAME.registerComponent('for_a_marker', {
    init: function () {
        var text = document.querySelector('#text');
        text.addEventListener("click", function (evt) { //or you could do "mouseenter" [event](https://aframe.io/docs/0.9.0/components/cursor.html#events)
            alert("do your stuff");
        });
    }
});
</script>
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
    <a-scene embedded arjs='debugUIEnabled: false; sourceType: webcam' vr-mode-ui='enabled: false'>
        <a-entity cursor="rayOrigin: mouse" raycaster="objects: .intersectable; useWorldCoordinates: true;"></a-entity>
        <a-marker id="marker" preset="hiro" emitevents="true" for_a_marker> 
            <a-text id="text" class="intersectable" scale="2 2 2" position="0 0 0" rotation="270 0 0" value="text" color="red"></a-text>   
        </a-marker>
        <a-entity camera></a-entity>
    </a-scene>
</body>
</html>

Я на самом деле не эксперт и все еще учусь. Вы тоже можете поэкспериментировать. Но обратите внимание:

  1. , если вы не используете AFRAME.registerComponent part, var text обнулится
  2. <a-entity cursor ... .intersectable ...> убедитесь, что .intersectable ваш <a-text class="intersectable">. Это тот, кто делает волхвы c, для более детальной проверки этой документации: a-frame 0.9.0 raycaster

Примечание: есть проблема с событие клика не в ожидаемом месте .

...