Как получить положение маркера (x, y) AR. js - PullRequest
0 голосов
/ 16 апреля 2020

Как я могу получить положение маркера в AR js?

Пример: когда маркер найден, я хочу знать, какова его позиция (X, Y) на экране.

Я пытался использовать getBoundingClientRect(), но он не работает с маркерами

Моя проблема: у меня есть 4 маркера, и они имеют последовательность, подобную (1,2,3,4), и если эта последовательность неверна как ( 1,3,2,4) система должна идентифицировать, где это неправильно. Поэтому, если маркер 1 имеет позицию X = 10, следующий маркер должен быть в позиции X = 11.

Мой HTML код:

<!DOCTYPE html>
<html lang="pt" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Project AR-JS</title>
        <link rel="stylesheet" type="text/css" href="index.css">
        <script src='index.js'></script>
        <link href="https://fonts.googleapis.com/css2?family=Baloo+Paaji+2:wght@500&display=swap" rel="stylesheet">
        <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
        <script src="https://raw.githack.com/AR-js-org/AR.js/3.0.2/aframe/build/aframe-ar-nft.js"></script>
    </head>
    <body>



        <a-scene arjs='debudUIEnabled: false;'>

            <a-marker id="letraU" preset="pattern" type="pattern" url="https://raw.githubusercontent.com/FelippeAlves/project-words-AR/master/pattern-marker_U.patt">

            </a-marker>
            <a-marker id="letraR" preset="pattern" type="pattern" url="https://raw.githubusercontent.com/FelippeAlves/project-words-AR/master/pattern-marker_R.patt">

            </a-marker>
            <a-marker id="letraS" preset="pattern" type="pattern" url="https://raw.githubusercontent.com/FelippeAlves/project-words-AR/master/pattern-marker_S.patt">

            </a-marker>
            <a-marker id="letraO" preset="pattern" type="pattern" url="https://raw.githubusercontent.com/FelippeAlves/project-words-AR/master/pattern-marker_O.patt">

            </a-marker>
        </a-scene>

    </body>
</html>

1 Ответ

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

Jsartoolkit5

AR. js основано на jsartoolkit5 . Если вы хотите получить позицию (центр маркера), вы можете легко это сделать с помощью прослушивателя событий. В jsartoolkit5 предполагается, что вы инициализировали ARController и у вас есть его экземпляр -> arController:

        arController.addEventListener('getMarker', function(ev) {
            console.log('marker pos: ', ev.data.marker.pos);
            });

это действительно для маркера шаблона.

AR . js

В случае AR. js после создания нового экземпляра ArToolkitSource :

    var arToolkitSource = new THREEx.ArToolkitSource({

            sourceType : 'webcam',
        })

прослушивание входящие данные для маркера Pattern (или Barcode ) в функции onReady () :

    arToolkitSource.init(function onReady(){

      console.log(arToolkitContext.arController);
        if( arToolkitContext.arController !== null ){
          arToolkitContext.arController.addEventListener('getMarker', function(ev) {
          console.log('marker pos: ', ev.data.marker.pos);
          });
        }
    })

вы будете прослушивать данные в console.

Дополнительная информация

Обратите внимание, если вы хотите получить данные для маркеров другого типа, используйте следующие прослушиватели:

getMultiMarker для нескольких маркеров

getMultiMarkersSub для подчиненных Multi Markers

getNFTMarkers для NFT-маркеров (внимание нет pos для этого типа маркера !!)

Working Пример

Взгляните на это gist

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...