时间戳

首页 > 解决方案 > 如何获取标记位置（x，y）AR.js

javascript - 如何获取标记位置（x，y）AR.js

问题描述

如何在 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>

标签： javascriptaframear.jsjsartoolkit

解决方案

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()函数中侦听Pattern（或Barcode）标记的传入数据：

    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为下属 Multi Markers

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

工作示例

看看这个要点

推荐阅读