Issue: Image Target component not triggering, unable to access detection info via ECS

🧑‍💻 Technical Support
1

Hi,
I’m currently building an AR experience using image targets with ECS components, and I’m running into an issue with retrieving target data.

:bullseye: What I’m trying to do:
I want to detect which image target has been recognized and retrieve its name (or a consistent identifier), so I can store it in a Set and later send the results to a LINE Bot.

:test_tube: What I’ve implemented:

  • Each image target in Studio has a unique name assigned (e.g., Bat, Dog, etc.)
  • I attached a custom component to each image target like this:
export const seenTargets = new Set<string>();
(globalThis as any).seenTargets = seenTargets;

ecs.registerComponent({
  name: 'image_target_tracker',
  stateMachine: ({ world, eid }) => {
    ecs.defineState('default')
      .initial()
      .onEnter(() => {
        const entity = world.getEntity?.(eid) ?? world.entity?.(eid);
        const name = entity?.name;
        if (name) {
          seenTargets.add(name);
          console.log('[tracker] detected:', name);
        } else {
          console.warn('[tracker] no name:', eid);
        }
      });
  }
});

:warning: What’s not working:

  • The onEnter() state never appears to trigger when an image target is found
  • seenTargets is always empty
  • entity?.name returns undefined, even though name is set in Studio
  • entity?.rotation and other transform data are also undefined, as if the component was never properly attached or activated

:white_check_mark: Things I’ve tried:

  • Replacing eid with schema.trackedTarget (no difference)
  • Adding another component to confirm image readiness — it prints logs correctly
  • Listening to xrimagefound with document.addEventListener() — but event.detail.name returns empty or no event is triggered

:red_question_mark: My questions:

  1. What is the correct way to trigger a custom ECS component when an image target is recognized?
  2. Once a target is successfully detected, is there any way to access its physical tracking data, such as:
  • 3D position (x/y/z)
  • rotation or orientation
  • transformation matrix or anchor info?
  1. Would it be more reliable to implement this via external event listeners (xrimagefound etc.) instead of ECS bindings?

Any insight or working examples would be greatly appreciated. Thank you for your help! :folded_hands:

2

Hi, this is a lot easier than you might think. Here’s a custom component that can get added to an empty object in your scene and should start working right away.

import * as ecs from '@8thwall/ecs'

ecs.registerComponent({
  name: 'Image Tracker',
  // schema: {
  // },
  // schemaDefaults: {
  // },
  // data: {
  // },
  // add: (world, component) => {
  // },
  // tick: (world, component) => {
  // },
  // remove: (world, component) => {
  // },
  stateMachine: ({world, eid, schemaAttribute, dataAttribute}) => {
    const imageBank = new Set<string>()

    ecs.defineState('default')
      .initial()
      .listen(world.events.globalId, 'reality.imagefound', (e) => {
        // Find all values here: https://www.8thwall.com/docs/studio/api/events/xr/image-targets/#imagefound
        const {name} = e.data

        if (!imageBank.has(name)) {
          imageBank.add(name)
          console.log('New Image added to the imageBank set!')
        } else {
          console.log('We already have that image')
        }
      })
  },
})
4

Thank you. It’s works. :grinning_face: