I am looking for a more efficient method to sequentially execute animations one after the other, with each animation playing "X" number of times.
Due to the randomness of animations being selected from arrays, I cannot consolidate them into a single long GTLF/GLB animation.
The challenge I'm facing is how to repeat this code once it has completed its cycle.
Below is my current strategy:
// Counter (to determine when to play multiple animations sequentially)
var counter = 0;
// Number that counter needs to reach. Between 1 and 3 loops
function randomIntFromInterval(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
};
var countertrigger = randomIntFromInterval(1,3);
// Default animation for Character
character.setAttribute("animation-mixer", {clip: "animationA"});
character.addEventListener('animation-loop', function () {
if (character.getAttribute = character.getAttribute("animation-mixer", {clip: "animationA"})){
counter++;
if (counter === countertrigger){
character.setAttribute("animation-mixer", {clip: "animationB"});
character.addEventListener('animation-finished',function() {
if (character.getAttribute("animation-mixer").clip === "animationB"){
character.setAttribute("animation-mixer", {clip: "animationC"});
character.addEventListener('animation-finished',function() {
if (character.getAttribute("animation-mixer").clip === "animationC"){
character.setAttribute("animation-mixer", {clip: "animationA"});
// Resets idle counter
counter = 0;
// Resets/randomises the number of loops before next set of animations execute
countertrigger = randomIntFromInterval(1,3);
};
});
};
});
};
};
});