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

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>

Solution

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