How to get marker position (x,y) AR.js

Question

How can i get the marker position in ARjs ?

Example: when the marker found, i wanna know what is his position(X,Y) at screen.

I tried to use getBoundingClientRect() but it does not work with Markers

My issue: I have 4 markers and they have a sequence like (1,2,3,4) and if this sequence is wrong as (1,3,2,4) the system have to identity where is wrong. So if the marker 1 has positionX = 10 the next marker have to be in positionX = 11.

My HTML code:

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

kalwalt · Answer 1 · 2020-04-17T17:15:55.677

3

Jsartoolkit5

AR.js is based internally on jsartoolkit5. If you want to retrieve the position (the center of the marker) you can easily do with an event listener. In jsartoolkit5 supposed that you have initialized the ARController and you have an instance of it -> arController:

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

this is valid for a Pattern Marker.

AR.js

In case of AR.js after you create a new instance of ArToolkitSource:

    var arToolkitSource = new THREEx.ArToolkitSource({

            sourceType : 'webcam',
        })

listen the incoming data for the Pattern (or Barcode) Marker in the onReady() function:

    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);
          });
        }
    })

you will listen data in the console.

Additional informations

Note if you want retrieve the data for other type of markers use this listeners:

getMultiMarker for multi Markers

getMultiMarkersSub for subordinates Multi Markers

getNFTMarkers for NFT markers ( attention no pos for this type of marker !! )

Working Example

Take look at this gist

edited Apr 17 '20 at 17:15

answered Apr 16 '20 at 12:08

kalwalt

460
4
12

i tried it but did not work `var markerLetraU = document.getElementById('letraU'); var arToolkitSource = new THREEx.ArToolkitSource({ sourceType : 'webcam', }); arToolkitSource.init(function onReady(){ console.log(arToolkitContext.markerLetraU); if( arToolkitContext.markerLetraU !== null ){ arToolkitContext.markerLetraU.addEventListener('marketFound', function(ev) { console.log('marker pos: ', ev.data.marker.pos); }); } })` – thyago garcia Apr 16 '20 at 18:51
it doesn't work because markerLetraU is not an ARController. i will add a link to a gist, when i have a bit of time. – kalwalt Apr 16 '20 at 19:09
how can i create an ARController ? – thyago garcia Apr 16 '20 at 22:37
I added the gist, but i see that you changed your question, you didn't asked for the aframe part, you were generic, Anyway the codebase is Three.js based so it is possible to do the same for aframe-ar.js. If you have problems i can help on this too. – kalwalt Apr 17 '20 at 17:21
Thaks for u help, but i tried to use your code, but it does not work. I'll explain better my issue – thyago garcia Apr 20 '20 at 03:48
I will provdie an example with aframe, i understand that can be more difficult to get the same result. – kalwalt Apr 20 '20 at 08:43
Thank's for you help, i find out the answer – thyago garcia Apr 25 '20 at 02:44

score 0 · Accepted Answer · edited Mar 29 '22 at 00:01

Since your code is in A-Frame ( with AR.js):

We can write a separate component and attach it to an entity element in A-Frame scene: The .tick() handler will get the positions updated every frame and use Three.js get the marker positions values as Three.js Vector3 Object for A-Frame entities and find distance using .distanceTo() method.

Refer: https://threejs.org/docs/#api/en/math/Vector3.distanceTo

AFRAME.registerComponent("marker-distance", {
    tick: function () {
        this.markerDistance()
    },
    markerDistance: function () {
        var marker1Pos, marker2Pos

        var marker1 = document.querySelector("#letraU")
        var marker2 = document.querySelector("#letraR")

        marker1Pos = new THREE.Vector3();
        marker1.object3D.getWorldPosition(marker1Pos);

        marker2Pos = new THREE.Vector3();
        marker2.object3D.getWorldPosition(marker2Pos);

        //distance
        this.d = marker1Pos.distanceTo(marker2Pos);
        console.log("distance" + this.d)
    }
});

How to get marker position (x,y) AR.js

2 Answers2

Jsartoolkit5

AR.js

Additional informations

Working Example