Question

如何获得ARjs中的标记位置？

示例：当找到标记时，我想知道他在屏幕上的位置（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>

Answer 1

Jsartoolkit5

AR.js 内部基于 jsartoolkit5 。如果要检索位置（标记的中心），可以使用事件侦听器轻松进行。在jsartoolkit5中，假设您已初始化 ARController 并具有它的实例-> arController：

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

这对图案标记有效。

AR.js

在创建 ArToolkitSource 的新实例后，使用 AR.js ：

    var arToolkitSource = new THREEx.ArToolkitSource({

            sourceType : 'webcam',
        })

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

您将在控制台中监听数据。

其他信息

请注意，如果要检索其他类型标记的数据，请使用以下侦听器：

getMultiMarker （用于多个标记）

getMultiMarkersSub （对于下属多个标记）

getNFTMarkers （用于NFT标记）（注意，这种类型的标记没有位置！）

工作示例

看看这个gist

Answer 2

由于您的代码在 A-Frame 中（使用 AR.js）：

我们可以编写一个单独的组件并将其附加到 A-Frame 场景中的实体元素：.tick() 处理程序将获取每帧更新的位置并使用 Three.js 获取标记位置值作为 Three.js Vector3 A-Frame 实体的对象并使用 .distanceTo() 方法查找距离。

参考：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)


}

});

如何获得标记位置（x，y）AR.js

2 个答案:

Jsartoolkit5

AR.js

其他信息

工作示例