How do I start an animation clip on detection of an image target?

🧑‍💻 Technical Support
1

Hi all.

I have an animated .GLB file that plays fine on detection of the image target, but when the model instantiates the animation is already quite a way in and missing a critical part, presumably because it starts running as soon as the project loads? How can I delay the animation and trigger the start on detection of the target?

2

I would suggest creating your own custom image target component and listening on the xrimagefound event.

Here is an example project that has a custom image target component

3

something like this:

const imageTargetAnimationComponent = () => ({
  schema: {
    name: {type: 'string'},
  },
  init() {
    const {object3D} = this.el
    const {name} = this.data
    object3D.visible = false
    const model = document.getElementById('yourModel')

    const imageFound = ({detail}) => {
      if (name !== detail.name) {
        return
      }

      object3D.position.copy(detail.position)
      object3D.quaternion.copy(detail.rotation)
      object3D.scale.set(detail.scale, detail.scale, detail.scale)

      model.setAttribute('animation-mixer', {
            clip: 'yourAnimation',
          })

      object3D.visible = true
    }

    const imageUpdate = ({detail}) => {
      if (name !== detail.name) {
        return
      }
      object3D.position.copy(detail.position)
      object3D.quaternion.copy(detail.rotation)
      object3D.scale.set(detail.scale, detail.scale, detail.scale)
    }

    const imageLost = (e) => {
      object3D.visible = false
    }

    this.el.sceneEl.addEventListener('xrimagefound', imageFound)
    this.el.sceneEl.addEventListener('xrimageupdated', imageUpdate)
    this.el.sceneEl.addEventListener('xrimagelost', imageLost)
  },
})

export {imageTargetAnimationComponent}
4

Thank you. I shall try that!