10

是否有任何关于如何使用 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

4

2 回答 2

4

tldr:这里的工作故障。
了解该区域(图像在资产中),单击接受按钮,然后切换标记助手。

现在,一些细节:

1) 加载保存的区域数据

在初始化时,当ar.js检测到您想要使用area标记预设时,它会尝试获取 localStorage 引用:

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/

保存在那里的任何数据都不会加载到我们的网站上,因为本地存储是按来源隔离的

要保存和使用标记区域,您必须创建自己的learner.html. 它可以与原版相同,但请记住,您必须将其保留在同一个域中。

要使 debugUI 按钮将用户重定向到您的学习者 html 文件,您需要设置

ARjs.AnchorDebugUI.MarkersAreaLearnerURL = "myLearnerUrl.html"

<a-marker>初始化 s 之前。只需在<head>.


进入学习者网站后,确保摄像头看到所有标记,并批准学习。

它应该如下所示:
在此处输入图像描述

一旦获得批准,您将被重定向回您的网站,将加载区域文件并使用数据。

于 2018-08-25T12:48:11.563 回答
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 不同的是,它没有“扩展跟踪”——一旦代码看不见,您将无法再进行跟踪。

于 2018-08-20T09:26:57.490 回答