Tengo 4 animaciones en un modelo que se ejecutan una tras otra y quiero que se reproduzcan en bucle cuando finalice el ciclo.

Aquí están las animaciones:

 <a-entity id="boat" gltf-model='#boat-model' position='41.127 -1.283 -17.508' scale='0.1 0.1 0.1' rotation='0.001 -86.510 0.009' castShadow='true' receiveShadow='true' animation-manager animation__first="property: position; to: 41.127 -1.283 -79.642; dur: 10000; easing: linear; loop: false; startEvents: first" animation__second="property: rotation; to: 0.001 87.541 0.009; dur: 5000; easing: linear; loop: false; startEvents: second" animation__third="property: position; to: 41.127 -1.283 -17.508; dur: 10000; easing: linear; loop: false; startEvents: third" animation__fourth="property: rotation; to: 0.001 -86.510 0.009; dur: 5000; easing: linear; loop: false; startEvents: fourth"> </a-entity>

Y aquí está la animación-managar:

 AFRAME.registerComponent("animation-manager", { init: function() { // wait for the first animation to finish this.el.addEventListener("animationcomplete__first", e => { // start the second animation this.el.emit("second") }); this.el.addEventListener("animationcomplete__second", e => { // start the second animation this.el.emit("third") }); this.el.addEventListener("animationcomplete__third", e => { // start the second animation this.el.emit("fourth") }); this.el.addEventListener("animationcomplete__fourth", e => { // start the second animation this.el.emit("first") }); } })