Need help with animations for Image Target

🧑‍💻 Technical Support
1

I am creating a project wherein I want to start the animation when the image is detected. However, when the image is detected, the model does get displayed but the animation is played quite a few frames in. And it also loops all the time. Any help is appreciated.

physics-image-target.js
const physicsImageTargetComponent = {
schema: {
name: {type: ‘string’},
},
init() {
const {object3D} = this.el
const {name} = this.data
const scene = this.el.sceneEl
object3D.visible = false

const model = document.getElementById('model')
const sound = document.getElementById('sound')
const particle = document.getElementById('particle')
particle.setAttribute('visible', 'true')

// Function to play the animation
const playAnimation = () => {
  model.setAttribute('animation-mixer', {
    clip: '*',
    timeScale: 1,
    clampWhenFinished: true,
    loop: 'once',
  })
}

const showImage = ({detail}) => {
  if (name !== detail.name) {
    return
  }
  object3D.position.copy(detail.position)
  object3D.quaternion.copy(detail.rotation)

  const scaleFactor = 0.3
  object3D.scale.set(detail.scale * scaleFactor,
    detail.scale * scaleFactor,
    detail.scale * scaleFactor)

  object3D.visible = true
}

const imageFound = (e) => {
  showImage(e)
  if (model.hasLoaded) {
    // Call playAnimation function when the image is found
    setTimeout(() => {
      playAnimation()
    }, 1000)
  }
}

const imageLost = (e) => {
  object3D.visible = false
  model.setAttribute('animation-mixer', {
    clip: '*',
    timeScale: 0,
  })
  particle.setAttribute('animation-mixer', {
    clip: '*',
    timeScale: 0,
  })
}

scene.addEventListener('xrimagefound', imageFound)
scene.addEventListener('xrimageupdated', showImage)
scene.addEventListener('xrimagelost', imageLost)

},
}

export {physicsImageTargetComponent}

3

i cannot post the body.html for some reason so help would be appreciated for that too.
just 2 glb named model and particle and one sound entity.

4

You’ll need to edit the xrextras-named-image-target component to reset the animationClip time to 0 and disable looping. The source code for the component can be found here:

1 Like
5

This is my code as of now. I am quite new to this so if you could help me out a little bit more, it would be much appreciated.

> <a-scene
> landing-page
> xrextras-loading
> xrextras-runtime-error
> renderer=“colorManagement: true”
> xrweb>
>
>
>
>
*> *
>
>
*> *
> <a-entity
> light="
> type: directional;
> intensity: 1;
> castShadow: false;
> shadowMapHeight:2048;
> shadowMapWidth:2048;
> shadowCameraNear: -5;
> shadowCameraRight: 25;
> shadowCameraLeft: -25;
> shadowCameraTop: 25;
> shadowCameraBottom: -25;"
> position=“0.5 5 0”
> shadow>
>
*> *
>
*> *
>
> <a-entity
> id=“model”
> gltf-model=“#model”
> class=“cantap”
> scale=“0.5 0.5 0.5”
> rotation=“90 0 0”
> shadow=“receive: false”
> xrextras-two-finger-rotate
> xrextras-pinch-scale
> animation-mixer
> reflections=“type: realtime”>
> <a-entity
> id=“particle”
> gltf-model=“#particle”
> scale=“1 1 1”
> shadow=“receive: false”
> visible=“true”
> xrextras-two-finger-rotate
> xrextras-pinch-scale
> animation-mixer
> reflections=“type: realtime”>
>
>
>
*> *
> <a-box
> id=“floor”
> static-body
> position=“0 -0.5 0”
> rotation=“-90 0 0”
> height=“100”
> width=“100”
> material=“color: #000; transparent: true; opacity: 0.5; shader: shadow”
> shadow>
>
>

6

Sorry for the weird format, I cant seem to figure out how to paste the body without it being invisible!

7

you’ll want to remove the animation-mixer component from the entity in body.html and only add it to the entity in javascript once the image is found. timeScale should probably not be set to 0, instead you probably want to set loop: false. see the animation-mixer documentation here:

1 Like
8

image
image800×813 28.1 KB

this is what I assume you want me to do. However, once I remove the animation-mixer component from body.html, the model simply does not show up. I commented out the timescale: 0 part of the code for the time being.

9

image
image747×552 13.1 KB

these are my entity tags. particle model appears on image tracked but the main model does not.

10

I would suggest adding some logs to help debug - for example, add a log to see the value of model.hasLoaded. Based on the code provided, if this evaluated to false then playAnimation() is never called.

1 Like
11

This line is probably causing your problems:

<a-entity id="model" gltf-model="#model" ...>

You are assigning this entity the id="model" then trying to pass the same entity to the gltf-model component. You should be passing this either an id of a loaded 3D model or a URL to a 3D model to the gltf-model component.

I recommend loading the model using the asset management system and passing the id of the asset to gltf-model, as demonstrated in most of our A-Frame sample projects.

Example: A-Frame: Image Targets Flyer | 8th Wall | 8th Wall

Leveraging the asset management system also ensures your models are loaded before dismissing the loading screen, so you don’t need to check if the model is loaded in your custom component in this case.

2 Likes
12

Thank you so much. I finally got it to work! I had kept both id and gltf-model the same as “model”, just had to change gltf-model to “model-glb”!

2 Likes