Infinite target images

Hi, I’m doing a project that uses more than 32 target images. I tried everything. I even tried using the project: A-Frame: Unlimited Image Targets. But it wasn’t what I wanted. And I’m asking chat GPT to see if it helps me. Can someone help me?

Hello, can you specify further as to why this project doesn’t work for you?

More information would be helpful.

I’m doing a project for a catalog and I need the person using it to be able to scan any page they want. but A-Frame: Unlimited Image Targets does not allow this. I need to scan 32 pages but I can’t.

To clarify the Ulimited Image Targets project shared above should be able to do this. Can you specify why it isn’t working?

This example uses the image target API to continually update the set of active image targets, allowing more than 10 image targets to be detected in a session.

Now, you may be getting confused with our other image target proejct which looks very similar called " Endless Image Targets"

This one doesn’t allow for the ability to scan any image instead, it dynamically loads a new set of image targets when the final one on a list is scanned. So in this case this specic project won’t work but the “Unlimited Image Targets” should work

yes. But 10 image targets is good. But if it is possible with some plugin or some code. Or not at all.

Hi Miguel, You can use the project for scanning any 32 image targets at any time or any page so I’m not quite sure what the problem is? Can you elaborate?

let me start again. the “Endless Image Targets” project shows me how to configure more than 10 images, using an anchor. It shows the “AR” to the rooster (birds that fly). After arriving at the rooster, “AR” is only displayed on birds that do not fly.

I would like to eliminate this checkpoint. Make “AR” available on all my 32 image targets without checkpoints, allowing me to scan all of them regardless of order or classification. it’s possible?

You can switch image targets at runtime, but I never got that to work in a flawless way. Talked more about it in this thread:

Hello @Miguel_Paula

We have TWO endless image target proejcts. One of which It shows the “AR” to the rooster (birds that fly). After arriving at the rooster, “AR” is only displayed on birds that do not fly. Which I understand won’t work for your use case.

However, this project below is DIFFERENT and uses the image target API to continually update the set of active image targets, allowing more than 10 image targets to be detected in a session. So you don’t need the rooster to load the new set, it updates continually so you can scan any image at any time.

I am trying to show that these projects are seperate and allow you to do different things. Please read the thread.

thanks. I was not describing my problem properly.

Hello! all good? I placed all my target images (23) but things after 17 don’t appear. Follow the code to see if I did something wrong, any help is welcome! :white_small_square:

JS:

AFRAME.registerComponent('config-targets', {
  schema: {
    targets: {type: 'array', default: ['']},
  },
  ensureImageTargetsConfigured() {
    if (this.configured || !this.configOk) {
      return
    }
    // console.log(`Scanning for targets: ${JSON.stringify(this.data.targets)}`)
    XR8.XrController.configure({imageTargets: this.data.targets})
    this.configured = true
  },
  init() {
    this.configured = false
    this.configOk = false
    this.el.sceneEl.addEventListener('realityready', () => {
      this.configOk = true
      this.ensureImageTargetsConfigured()
    })
  },
  update() {
    this.configured = false
    this.ensureImageTargetsConfigured()
  },
})

AFRAME.registerComponent('panic-mode', {
  init() {
    const targets = ['Tesla', 'palermo', 'versato', 'milano', 'Hope', 'Valentina', 'buriti', 'antores', 'udine', 'soft', 'copenhagem', 'italia', 'arrezo_c', 'madri', 'veneza', 'oregon', 'lorenzo', 'grecia', 'sevilha']
    const found = []
    let active

    const remainder = targets.length % 10

    let i = 0
    const updateImageTargets = () => {
      const notFound = targets.filter(target => !found.includes(target))

      if (i + 10 + remainder === targets.length) {
        notFound.splice(i, remainder)
      } else {
        notFound.splice(i, 10)
      }

      notFound.splice(10 - found.length)

      active = [...found, ...notFound]

      this.el.sceneEl.setAttribute('config-targets', `targets: ${active}`)

      if (i + remainder === targets.length) {
        i = 0
      } else {
        i += 10
      }
    }

    this.el.addEventListener('xrimagefound', ({detail}) => {
      found.push(detail.name)
    })

    this.el.addEventListener('xrimagelost', ({detail}) => {
      found.splice(found.indexOf(detail.name), 1)
    })

    // update active image targets every second
    setInterval(updateImageTargets, 1000)
  },
})

HTML:

<a-scene
  xrextras-gesture-detector
  landing-page
  xrextras-loading
  xrextras-runtime-error
  renderer="colorManagement:true; webgl2: true;"
  xrextras-pwa-installer
  panic-mode
  config-targets="targets: Tesla, palermo, versato, milano, Hope, Valentina, buriti, antores, udine, soft"
  xrweb="disableWorldTracking: true">
  .
  .
  .

Hi again. I found the solution with my friend Chat GPT. And now you can be sure that you read as many image targets as you have.

this is the code:
JS:

// Component for configuring image targets
AFRAME.registerComponent('config-targets', {
  schema: {
    targets: { type: 'array', default: [] },
  },

  init() {
    this.configured = false;
    this.configOk = false;

    this.el.sceneEl.addEventListener('realityready', () => {
      this.configOk = true;
      this.ensureImageTargetsConfigured();
    });
  },

  update() {
    this.configured = false;
    this.ensureImageTargetsConfigured();
  },

  ensureImageTargetsConfigured() {
    if (this.configured || !this.configOk) {
      return;
    }

    XR8.XrController.configure({ imageTargets: this.data.targets });
    this.configured = true;
  },
});

// Component to manage panic mode
AFRAME.registerComponent('panic-mode', {
  init() {
    // Defining image target groups
    const targetGroups = [
      ['image1', 'image2', 'image3', 'image4', 'image5', 'image6'],
      ['image7', 'image8', 'image9', 'image10', 'image11', 'image12']  // Add more targets here
    ];

    const foundTargets = new Set();
    let currentGroupIndex = 0;
    let activeTargets = [];

    const updateImageTargets = () => {
      const notFoundTargets = targetGroups[currentGroupIndex].filter(target => !foundTargets.has(target));
      activeTargets = Array.from(new Set([...foundTargets, ...notFoundTargets]));

      this.el.sceneEl.setAttribute('config-targets', `targets: ${activeTargets.join(', ')}`);

      // Switch to the next group
      currentGroupIndex = (currentGroupIndex + 1) % targetGroups.length;
    };

    this.el.addEventListener('xrimagefound', ({ detail }) => {
      foundTargets.add(detail.name);
      updateImageTargets();
    });

    this.el.addEventListener('xrimagelost', ({ detail }) => {
      foundTargets.delete(detail.name);
      updateImageTargets();
    });

    // Updates active image targets every second
    setInterval(updateImageTargets, 1000);
  },
});

HTML:

<a-scene
  xrextras-gesture-detector
  landing-page
  xrextras-loading
  xrextras-runtime-error
  renderer="colorManagement:true; webgl2: true;"
  xrextras-pwa-installer
  panic-mode
  config-targets="targets: Tesla, palermo, versato, milano, Hope, Valentina, buriti, antores, udine, soft"
  xrweb="disableWorldTracking: true">
  ...

  <a-entity xrextras-named-image-target="name: Tesla">
    // put here, what you want to put.
  </a-entity>

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.