Toggling Between Image Tracking and World Tracking in a Single A-Frame Scene?

🧑‍💻 Technical Support
,
1

Thought for a couple of seconds

Below is a sample post you can adapt for the 8th Wall forum to summarize your scenario, show what you’ve tried, and ask for help on toggling between image tracking and world tracking in a single A-Frame scene. Feel free to adjust the details to match your exact project setup.

Title

Toggling Between Image Tracking and World Tracking in a Single A-Frame Scene?

Body

Hi everyone,

I’m working on a project using 8th Wall, A-Frame, and <xrextras-named-image-target>. My goal is to:

  1. Start with image tracking (so a user scans an image target).
  2. Once the image-based animation finishes, switch to world tracking (plane detection), letting the user place another model in the environment.

I’ve tried using the xrweb component attributes to switch from:

<a-scene
xrweb=“disableWorldTracking: true; disableImageTargets: false;”
…

<a-scene
xrweb=“disableWorldTracking: true; disableImageTargets: false;”
xrextras-loading
xrextras-runtime-error
xrextras-gesture-detector

AFRAME.registerComponent(‘dresstheglass’, {
init() {
const {sceneEl} = this.el // Because you’re attaching this component to
const dressBtn = document.getElementById(‘dressBtn’)

if (!dressBtn) {
  console.warn('dressBtn not found in DOM')
  return
}

dressBtn.addEventListener('click', () => {
  console.log('Dress Button clicked!')

  // a) Switch to world tracking & disable image tracking
  //    If your 8th Wall project is configured for both image + world tracking,
  //    you can explicitly set imageTargets: false to ensure image tracking stops.
  //    Example:
  sceneEl.setAttribute('xrweb', 'disableWorldTracking: false;')

  // b) Hide the button
  dressBtn.style.display = 'none'

  // c) Play/Show the targetIndicatorAnimRed entity
  const indicator = document.getElementById('targetIndicatorAnimRed')
  if (indicator) {
    indicator.setAttribute('visible', 'true')

    // If your 'targetindicatoranim' component or model requires an animation clip,
    // you can set it here if needed, e.g.:
    // indicator.setAttribute('animation-mixer', {
    //   clip: 'IndicatorClip',
    //   loop: 'repeat'
    // });
  }

  console.log('World tracking enabled, image tracking disabled, indicator shown.')

  // d) Wait for a single screen tap to place / animate the beer glass
  const onSceneTap = (evt) => {
    console.log('Screen tapped in world tracking mode.')

    // 1) Hide the indicator
    if (indicator) {
      indicator.setAttribute('visible', 'false')
    }

    // 2) Show and animate the beer glass
    const glass = document.getElementById('modelGlass')
    if (glass) {
      glass.setAttribute('visible', 'true')  // Make sure it's visible
      // If "beer-glass-anim" is already on the entity, it should auto-play.
      // Otherwise, to attach it dynamically:
      // glass.setAttribute('beer-glass-anim', '');
      console.log('Beer glass is now visible and anim component triggered.')
    }

    // 3) Remove this event listener so it triggers only once
    sceneEl.removeEventListener('click', onSceneTap)
  }

  // Attach the tap listener to the scene
  sceneEl.addEventListener('click', onSceneTap)
})

},
})

2

Hi @Vasudev_Kulkarni – welcome to the forums! Check out this sample project:

3

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