I am trying to create a repeated animation sequence involving a sphere moving and then a rectangle, followed by displaying the number of times it has been repeated in a div called expected_output. However, I'm encountering an issue where the animation does not start as expected.
Here is the code snippet:
var j = 1
var fieldNameElement = document.getElementById("expected_output");
function animator_repeat(){
const animationClip = new THREE.AnimationClip(null, 3, [track1]);
const animationClip1 = new THREE.AnimationClip(null, 3, [track]);
const animationAction = mesh.userData.mixer.clipAction(animationClip);
const animationAction1 = cube.userData.mixer.clipAction(animationClip1);
animationAction.setLoop(THREE.LoopRepeat, 1);
animationAction.play();
mesh.userData.mixer.addEventListener('finished', () => {
animationAction1.setLoop(THREE.LoopRepeat, 1);
animationAction1.play();
cube.userData.mixer.addEventListener('finished', () => {
if(j < 6){
fieldNameElement.textContent = "Number: " + (j+1).toString();
animator_repeat()
j = j+1
}
});
})
}
View the jsfiddle for reference: https://jsfiddle.net/xgnj4fbh/6/
The issue can be observed with skipping steps 3 and 4 during the animation sequence.
Could someone please help me understand what's causing this problem?
Thank you!