Могу ли я изменить атрибут компонента A-Frame (l oop с false на true) в консоли?

Question

Я пытаюсь построить простую сцену с A-Frame в JS, чтобы изучить основы ( codepen ). Пока все хорошо, я получил геометрию так, как хочу, не идеально, но все в порядке.

<a-cylinder position="-4.8 1 0" radius="0.2" height="2" color="slategray">
    <a-cylinder position="0 1.5 0" radius="0.15" height="1.5" color="slategray">
        <a-box position="-1 0.5 0" width="2" height="0.5" depth="0.3" color="slategray">
            <a-circle cursor-listener id="green" position="-0.5 -0.03 0.17" color="#196f3d " radius="0.2"></a-circle></a-circle>
            <a-circle cursor-listener id="yellow" position="0 -0.03 0.17" color="#7d6608 " radius="0.2"></a-circle>                    
            <a-circle cursor-listener id="red" position="+0.5 -0.03 0.17" color="#641e16" radius="0.2"></a-circle>
        </a-box>
    </a-cylinder>
</a-cylinder>
<a-ring position="0 0 0" rotation="-90 0 0 " color="gray" radius-inner="5" radius-outer="7">

<a-sphere id="car" position="-0 -1 0.4" radius="0.01" animation="property:rotation;to:0 0 -360; easing:linear; dur:5000;loop:false;autoplay:false">
    <a-box position="-5.5 0 0" width="0.4" height="0.4" depth="0.4" ></a-box>
</a-sphere>



</a-ring>

Я могу сделать прямоугольную орбиту вокруг центра сцены, но я хочу сделать так, чтобы анимация основана на событиях клика, поэтому я переключаю loop attribute с false на true. я пошел дальше и попробовал его в console, но ничего не изменилось.

var s=document.getElementById("car")
s.components.animation.animation.loop=true

Примечание: я также изменил autoplay на false и попытался переключить его обратно с console на выполнение

var s=document.getElementById("car")
s.components.animation.animation.autoplay=true

но опять ничего не изменилось. Я думаю, что я неправильно понял некоторые в документации , я точно не уверен. Может кто-нибудь, пожалуйста, помогите мне.

--------------------------------- РЕДАКТИРОВАТЬ ---- --------------------

Я добавил эти настройки событий в атрибут анимации родительского компонента моего блока

startEvents: rotation-start; pauseEvents: rotation-pause; resumeEvents: rotation-resume;

например:

<a-sphere id="car" position="-0 -1 0.4" radius="0.01" animation="property:rotation;startEvents: rotation-start; pauseEvents: rotation-pause; resumeEvents: rotation-resume;to:0 0 -360; easing:linear; dur:5000;loop:true;">
    <a-box position="-5.5 0 0" width="0.4" height="0.4" depth="0.4" ></a-box>
</a-sphere>

, поэтому теперь я могу воспроизводить / приостанавливать анимацию в консоли браузера, используя:

var e=document.getElementById("car")
e.components.animation.animation.play()

e.components.animation.animation.pause()

, но пытаясь сделать это внутри тега script, чтобы я могу использовать событие слушателя курсора не работает:

<script>
     AFRAME.registerComponent('cursor-listener', {
      update: function () {
            this.el.addEventListener('click', function (evt) {
                var car=document.getElementById("car");
                if(this.id=="red"){
                    car.components.animation.animation.pause()

                }
                if(this.id=="green"){
                    console.log(this.data);
                    this.components.animation.animation.play()
                }
            });
        }
    });
</script>

выдает ошибку:

Ошибка типа: this.components.animation - undefinedtraffic_light. html: 23: 21

---------------------------------------- ----------- РЕДАКТИРОВАТЬ № 2 -------------------------

Я исправил это, вот новый js:

    <script>



      AFRAME.registerComponent('cursor-listener', {
  update: function () {
        this.el.addEventListener('click', function (evt) {
            var car=document.getElementById("car_origin");
            if(this.id=="red"){
                car.components.animation.animation.pause()

            }
            if(this.id=="green"){
                car.components.animation.animation.play()
            }
        });
    }
});
  </script>