A-Frame multiple tracking images

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:
screenshot

1 Like

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:

2 Likes

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

Definitely having a great day now :grin:

2 Likes

Hi @fran.sarlija!

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

Have an awesome day!
Francesca :blush:

Hey @fran.sarlija
Can you share me your source code as I am looking to have the tracking of 2 images side by side in my project. It would be very helpful.

Hey, unfortunately I no longer have this code, this was two years ago and no source control was used for this particular project as it was more of a test…

Hopefully this thread can help you though:

I’m currently working on a project that involves scanning two separate tracking images and displaying different videos for each of them. While creating the initial experience was relatively straightforward, I’m facing a challenge with managing the visibility of the elements. Currently, when I track one image, the other element remains visible and obstructs the view. I’ve experimented with the ‘zappar-visible’ and ‘zappar-notvisible’ properties, but they completely hide the entire experience, which is not the desired outcome.

Heads up, we’re moving our community support over to Discord - you can join via this link: https://discord.gg/fK86bjE9XE