A-Frame & ar.js:多个标记和框
Posted
技术标签:
【中文标题】A-Frame & ar.js:多个标记和框【英文标题】:A-Frame & ar.js: Multiple markers & boxes 【发布时间】:2019-01-21 20:55:51 【问题描述】:是否有任何关于如何使用 A-Frame 实现多个 AR 标记的概念证明?
例如。像这样:https://www.youtube.com/watch?v=Y8WEGGbLWlA
Alexandra Etienne 在这篇博文中的第一个视频是我想要的效果(多个不同的 AR“标记”,内容不同):https://medium.com/arjs/area-learning-with-multi-markers-in-ar-js-1ff03a2f9fbe
我有点不清楚在使用多个标记时它们是否需要彼此靠近/存在于同一个相机视图中
来自 ar.js 存储库的这个示例使用了多个标记,但它们都是不同的类型(即一个是 Hiro 标记,一个是汉字标记等):https://github.com/jeromeetienne/AR.js/blob/master/aframe/examples/multiple-independent-markers.html
【问题讨论】:
您链接到的多个独立标记示例工作正常......所以您希望 Aframe 场景在同一标记图像的多个副本中的每一个上呈现? 应该更清楚——我想使用相同的标记类型(即某种类型的 qr 码),但每个标记类型中都有不同的内容(即带有数据 123456789 的 qr 标记和带有数据的 qr 标记 987654321) 在该示例中,唯一标签的数量似乎受到存在多少不同标签类型的限制 二维码示例(扫描后使用Hiro):medium.com/arjs/… 这也可以:您可以使用 example.com/ar.html?id=123 之类的链接创建二维码,这些链接在 Hiro 等同一个 AR 标记上创建不同的模型。明显的限制是用户需要重新扫描每个标记上的二维码。 【参考方案1】:正如@mnutsch 所说,AR.js 做你想做的事。
您可以在两个不同的标记上显示两个不同的模型。如果相机没有看到其中一个标记,则模型会消失(或停留在上次的位置,具体取决于您的实现。
相机不需要同时看到两者。
截图: https://www.dropbox.com/s/i21xt76ijrsv1jh/Screenshot%202018-08-20%2011.25.22.png?dl=0
项目: https://curious-electric.com/w/experiments/aframe/ar-generic/
此外,与 Vuforia 不同的是,它没有“扩展跟踪” - 一旦代码看不见,您将无法再跟踪。
【讨论】:
他想将多个标记合二为一。您应该能够使用“区域学习”创建“区域”。它应该比单个标记更稳定。【参考方案2】:tldr:工作故障here。了解该区域(图像在资产中),单击接受按钮,然后切换标记助手。
现在,一些细节:
1) 加载保存的区域数据
初始化时,当ar.js
检测到您要使用area
标记预设时,它会尝试获取本地存储引用:
localStorage.get("ARjsMultiMarkerFile")
最重要的数据是一组对 markerPreset, url.patt 将用于创建area
。 注意:默认情况下它只是 hiro 标记。
2) 创建区域数据文件
当您将 debugUIEnabled
设置为 true
时:
<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: true'>
出现一个按钮“Learn-new-marker-area”。 乍一看,它会将您重定向到可以保存区域文件的屏幕。 有一个但是:默认情况下,加载的学习者站点位于另一个域中。
严格来说:ARjs.Context.baseURL = 'https://jeromeetienne.github.io/AR.js/three.js/
保存在那里的任何数据都不会加载到我们的网站上,local storage is isolated per origin。
要保存和使用标记区域,您必须创建自己的learner.html
。它可以与original 相同,但请记住您必须将其保留在同一个域中。
要使 debugUI 按钮将用户重定向到您的学习者 html 文件,您需要设置
ARjs.AnchorDebugUI.MarkersAreaLearnerURL = "myLearnerUrl.html"
在<a-marker>
s 初始化之前。只需在<head>
中进行操作即可。
在学习者网站上,确保摄像头看到所有标记,并批准学习。
应该是这样的:
一旦获得批准,您将被重定向回您的网站,区域文件将被加载,数据将被使用。
【讨论】:
我的简单故障here 标记学习器再次工作。签出:github.com/jeromeetienne/AR.js/issues/… @droid001 感谢您的信息,我将重试我的步骤并发布结果! @droid001 虽然该解决方案似乎比 SO 答案更适合中等教程,但我已经更新了我的答案:P 能否更新第一个链接 (tldr: working glitch here.
),它只指向一个 .png 文件?以上是关于A-Frame & ar.js:多个标记和框的主要内容,如果未能解决你的问题,请参考以下文章