A-Frame &ar.js:多个标记 &盒子 [英] A-Frame & ar.js: Multiple markers & boxes
问题描述
是否有任何关于如何使用 A-Frame 实现多个 AR 标记的概念证明?
例如.像这样:
这篇来自 Alexandra Etienne 的帖子中的第一个视频是我想要达到的效果(具有不同内容的多个不同 AR标记"):
一旦获得批准，您将被重定向回您的网站，区域文件将被加载，数据将被使用.
Is there any proof of concept of how to implement multiple AR markers w/ A-Frame?
Ex. Something like this: https://www.youtube.com/watch?v=Y8WEGGbLWlA
The first video in this post from Alexandra Etienne is the effect I’m aiming for (multiple distinct AR "markers" with distinct content): https://medium.com/arjs/area-learning-with-multi-markers-in-ar-js-1ff03a2f9fbe
I’m a bit unclear if when using multiple markers they need to be close to each-other/exist in the same camera view
This example from the ar.js repo uses multiple markers but they're all of different types (ie one is a Hiro marker, one is a Kanji marker, etc): https://github.com/jeromeetienne/AR.js/blob/master/aframe/examples/multiple-independent-markers.html
tldr: working glitch here.
Learn the area (the image is in the assets), click the accept button, and toggle the marker helpers.
Now, a bit of details:
1) Loading saved area data
Upon initialisation, when ar.js detects, that you want to use the area marker preset, it tries to grab a localStorage reference:
localStorage.get("ARjsMultiMarkerFile")
The most important data there is an array of pairs {markerPreset, url.patt} which will be used to create the area.
Note: By default it's just the hiro marker.
2) Creating an area data file
When you have debugUIEnabled set to true:
<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: true'>
There shows up a button "Learn-new-marker-area". At first glance it redirects you to a screen where you can save the area file. There is one but: by default the loaded learner site is on another domain.
Strictly speaking: ARjs.Context.baseURL = 'https://jeromeetienne.github.io/AR.js/three.js/
Any data saved there won't be loaded on our website, for local storage is isolated per origin.
To save and use the marker area, you have to create your own learner.html. It can be identical to the original, just keep in mind you have to keep it on the same domain.
To make the debugUI button redirect the user to your learner html file, you need to set
ARjs.AnchorDebugUI.MarkersAreaLearnerURL = "myLearnerUrl.html"
before the <a-marker>s are initialized. Just do it in the <head>.
Once on the learner site, make sure the camera sees all the markers, and approve the learning.
It should look like this:
Once approved, you will be redirected back to your website, the area file will be loaded, and the data will be used.
这篇关于A-Frame &ar.js:多个标记 &盒子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
