A-Frame multiple tracking images


#1

Hello everyone! I’m currently working on a project where the user needs to be able to scan two separate tracking images and get a different video showing for each of them.

Now, creating the experience was fairly easy, I just generated two .zpt tracking images and put them both inside as separate elements, each of them showing the corresponding video.

What I can’t wrap my head around is how can I make it so that, when I track one of the images, the other element disappears. As it currently is the previous video just kinda stays floating around obstructing my view. I’ve tried using the ‘zappar-visible’ and ‘zappar-notvisible’ properties but they completely hide the experience and that is not what I’m looking for.

If anyone, who has worked with A-Frame and UAR-SDK has any similar solutions/projects they worked on or even just ideas of how to go about it, they would be greatly appreciated.

Screenshot:


#2

Hi @fran.sarlija,

I may have a basic solution for the sort of thing you’re looking for here!

I believe this comes down to making sure that everything is kept separate, as you have done here. For example, I had a go at an implementation like this using two target images. When ‘found’, one shows an <a-box> and the other an <a-sphere>.

In the index.html, I start this process by adding both of my target images to the assets library:

<a-assets>
    <a-asset-item id="target-file-one" src="example-tracking-image.zpt"/>
    <a-asset-item id="target-file-two" src="targetImage_01.zpt"/>
</a-assets>

I’ve made sure to give my a-asset-item target file and image-group different ids, and to include them as such.

<!-- Target File One -->
 <a-entity zappar-image="target: #target-file-one" id="image-group-one">
    <!-- PLACE 3D OBJECTS HERE TO TRACK FROM THE CENTER OF THE IMAGE -->
    <a-box position="0 0 0.5"></a-box>
</a-entity>

<!-- Target File Two -->
<a-entity zappar-image="target: #target-file-two" id="image-group-two">
  <!-- PLACE 3D OBJECTS HERE TO TRACK FROM THE CENTER OF THE IMAGE -->
   <a-sphere position="0 0 0.5"></a-sphere>
</a-entity>

From here, our script should be pretty straightforward. Because we have made two separate targets, we can target them as such without effecting each other. So for example, in index.js:

let ImageGroupOne = document.getElementById("image-group-one");
let ImageGroupTwo = document.getElementById("image-group-two");

let imageOneVisible = false;
let imageTwoVisible = false;

We can then separately use the same event listeners, making sure to use the correct variables:

ImageGroupOne.addEventListener("zappar-visible", () => {
    // The image has appeared so show the group
    ImageGroupOne.setAttribute("visible", "true");
    imageOneVisible = true;
});

ImageGroupTwo.addEventListener("zappar-visible", () => {
   // The image has appeared so show the group
   ImageGroupTwo.setAttribute("visible", "true");
   imageTwoVisible = true;
});

You could then do the same thing for the zappar-notvisible event.

Hopefully that makes sense! The example I worked on uses webpack, but it should be translatable for standalone builds too! :smile:

Have a great day!
Francesca :blush:


#3

Thanks @Francesca , modified this approach a little bit and got exactly what I needed.

Definitely having a great day now :grin:


#4

Hi @fran.sarlija!

That’s so great to hear, happy developing :grin:

Have an awesome day!
Francesca :blush: