Using multiple images to make up an image marker

Hi, I’m trying to make an experience using the London tube map as an image target for my experience. It works when the whole map is in focus however once I try to get a closer look at the map the experience loses tracking (as expected). I tried splitting the map up into six separate image targets and use them in the experience. However I am finding that the tracking jumps a lot when shifting between targets.

Does anyone know the best way to approach this issue?

Thanks,
Callum

Hey Callum!

Could you share your image target configuration? It could be that the cropping of the Image Targets results in them looking similar to the computer vision system.

Hi George, please find the trackers in this google drive.

I’ve taken a look at the images and they should be working as expected, however I can see some elements where the system might be confusing them. Can you show me how you have them cropped in the Image Target configurator? Or better yet land your changes and share the project with support.

Unfortunately I’m working into a private repo so can’t share the whole codebase. However I’ve dropped a screenshot of the cropped image target and a code snippet of where I’m attempting to dynamically place the experience to keep it aligned.

const positionOffsets = [
  new THREE.Vector3(0.9, -0.47, 0),
  new THREE.Vector3(-0.02, -0.34, 0),
]
const showTarget = ({ detail }) => {
    if (detail.name.includes('tfl')) {
      const posOffsetIdx = Number(detail.name.replace('tfl_', ''))
      imageTargetIdx = posOffsetIdx
      const posOffset = positionOffsets[posOffsetIdx].clone()
      // const posOffset = debugPosition.clone()
      posOffset.add(detail.position)
      sceneContent.position.copy(posOffset)
      sceneContent.quaternion.copy(detail.rotation)
      sceneContent.rotateX(1.57)
      const sclMult = debugScale.value
      sceneContent.scale.set(
        detail.scale * sclMult,
        detail.scale * sclMult,
        detail.scale * sclMult
      )
      sceneContent.visible = true
    }
  }