如何获取标记 position (x,y) AR.js
[英]How to get marker position (x,y) AR.js
问题描述
如何在 ARjs 中获得标记 position？
示例：找到标记后，我想知道他在屏幕上的位置（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>
2 个解决方案
解决方案1
3 2020-04-16 12:08:58
Jsartoolkit5
AR.js内部基于jsartoolkit5 。 如果您想检索 position（标记的中心），您可以使用事件侦听器轻松完成。 在 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() 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);
});
}
})
您将在控制台中收听数据。
附加信息
请注意，如果要检索其他类型标记的数据，请使用此侦听器：
用于多标记的getMultiMarker
getMultiMarkersSub为下属 Multi Markers
用于 NFT 标记的getNFTMarkers （注意这种类型的标记没有 pos ！！）
工作示例
看看这个要点
解决方案2
0 已采纳 2021-02-18 20:42:45
由于您的代码在 A-Frame 中（使用 AR.js）：
我们可以编写一个单独的组件并将其附加到 A-Frame 场景中的实体元素：The.tick() 处理程序将获取每帧更新的位置，并使用 Three.js 获取标记位置值作为 Three.js Vector3 Z497031794414A552435F90151 实体和 A52435F90151使用.distanceTo() 方法查找距离。
参考： https://threejs.org/docs/#api/en/math/Vector3.distanceTo
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)
}
});
如何在 Ar.js 中创建自定义标记？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.