Animation in WebAR wont work with eventlistener

Questions
1

So im working on a webar project. My idea was to

  1. Load my gltf in on a tap/ select event which works.
  2. After placing it i want to play my ‘animation_0’ file after the model is placed with taping as well as many times i want. But i dont seem to get it right with the if’s or do i have to add another eventlistener? Removing the if conditions makes it play on its own but i want to have an interactive element in this AR project.
 let customModel;
  let placed=false;
  let dooropen=false;

session.addEventListener("select", () => {

  loader.load("https://raw.githubusercontent.com/Ham199/3dmodels/main/CUBE/AutoAR1.glb", function (gltf) {
      customModel = gltf.scene;
 
      customModel.scale.multiplyScalar(0.8);
      customModel.position.copy(marker.position);


     // customModel.rotation.y += 15;

      const animations = gltf.animations;
      const mixer = new THREE.AnimationMixer(customModel);
      
  
      const animation = THREE.AnimationClip.findByName(animations, 'animation_0');
      const action = mixer.clipAction(animation);
      action.loop = THREE.LoopOnce;

    if(placed==true){   
      action.play();
}
        mixers.push(mixer);
      if(placed==false){
        scene.add(customModel)
        placed = true;    
          }   
 });  
});
2

I think you’ll also need to store the clips somewhere after you create them, so that you can start them later when the user clicks again?

You’ll also want some guards to prevent every click from reloading the animation…
Can you do the loading at init time in your app, and wait for it to complete before starting your app?
Then your logic will simplify to just starting and stopping the actions…

1 Like