如何获取标记 position (x,y) AR.js
[英]How to get marker position (x,y) AR.js
问题描述
How can i get the marker position in ARjs?
如何在 ARjs 中获得标记 position？
Example: when the marker found, i wanna know what is his position(X,Y) at screen.示例：找到标记后，我想知道他在屏幕上的位置（X，Y）是什么。
I tried to use getBoundingClientRect() but it does not work with Markers我尝试使用getBoundingClientRect()但它不适用于标记
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.我的问题：我有 4 个标记，它们有一个像 (1,2,3,4) 这样的序列，如果这个序列是错误的 (1,3,2,4)，系统必须识别哪里出错了。 So if the marker 1 has positionX = 10 the next marker have to be in positionX = 11.因此，如果标记 1 的位置 X = 10，则下一个标记必须位于位置 X = 11。
My HTML code:我的 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>
2 个解决方案
解决方案1
3 2020-04-16 12:08:58
Jsartoolkit5 Jsartoolkit5
AR.js is based internally on jsartoolkit5 . AR.js内部基于jsartoolkit5 。 If you want to retrieve the position (the center of the marker) you can easily do with an event listener.如果您想检索 position（标记的中心），您可以使用事件侦听器轻松完成。 In jsartoolkit5 supposed that you have initialized the ARController and you have an instance of it -> arController:在 jsartoolkit5 中假设你已经初始化了ARController并且你有一个它的实例 -> arController：
arController.addEventListener('getMarker', function(ev) {
console.log('marker pos: ', ev.data.marker.pos);
});
this is valid for a Pattern Marker.这对模式标记有效。
AR.js AR.js
In case of AR.js after you create a new instance of ArToolkitSource :在您创建ArToolkitSource的新实例之后，如果是AR.js ：
var arToolkitSource = new THREEx.ArToolkitSource({
sourceType : 'webcam',
})
listen the incoming data for the Pattern (or Barcode ) Marker in the onReady() function:在onReady() function 中侦听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);
});
}
})
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用于多标记的getMultiMarker
getMultiMarkersSub for subordinates Multi Markers getMultiMarkersSub为下属 Multi Markers
getNFTMarkers for NFT markers ( attention no pos for this type of marker !! )用于 NFT 标记的getNFTMarkers （注意这种类型的标记没有 pos ！！）
Working Example工作示例
解决方案2
0 已采纳 2021-02-18 20:42:45
Since your code is in A-Frame ( with AR.js):由于您的代码在 A-Frame 中（使用 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.我们可以编写一个单独的组件并将其附加到 A-Frame 场景中的实体元素：The.tick() 处理程序将获取每帧更新的位置，并使用 Three.js 获取标记位置值作为 Three.js Vector3 Z497031794414A552435F90151 实体和 A52435F90151使用.distanceTo() 方法查找距离。
Refer: https://threejs.org/docs/#api/en/math/Vector3.distanceTo参考： https://threejs.org/docs/#api/en/math/Vector3.distanceTo
AFRAME.registerComponent("marker-distance", { AFRAME.registerComponent("标记距离", {
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)
}
}); });
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.