如何改变 <a-sky> 动画触发事件的颜色

Question

My project basically is an assortment of blocks and the goal is to have the blocks rise on mouse hover as well as the "a-sky" component to change color to whatever color I set it too. Each cube will change the color of the sky to its color. Im having difficulty getting it to work. The first thing I tried was to set an animation to the a-sky component and have it begin with an event. Then I used Javascript in the block animation to set off the event when the block begins to hover. Here is what I have in the Glitch link below and the code is also below

https://glitch.com/edit/#!/join/b3c644bf-cbf9-4d26-80f4-cb6e5a00a556

 <!-- Sky -->
 <a-sky id="sky" color="beige" geometry="">
<a-animation attribute="color" begin="Normal" to="beige" dur="1000"></a-animation>
<a-animation attribute="color" begin="Orange" from="beige" to="#ff7400" dur="1000"></a-animation>
<a-animation attribute="color" begin="Dark-Yellow" from="beige" to="#ffe50a" dur="1000"></a-animation>

<!-- Orange Block -->
<a-box id="Orange-Box" color="#ff7400" navigate-on-click="url:http://google.com" position="0 1.5 -5" material="" geometry="">
    <a-animation attribute="position" from="0 1.5 -5" to="0 2.5 -5" begin="mouseenter">
    <script> document.querySelector('#sky').emit('Orange'); </script>
  </a-animation>
  <a-animation attribute="position" from="0 2.5 -5" to="0 1.5 -5" begin="mouseleave">
    <script> document.querySelector('#sky').emit('Normal'); </script>
  </a-animation>
</a-box>

<!-- Dark Yellow Block-->
<a-box color="#ffe50a" position="2.5 1.5 -4" rotation="0 -33.11696055856158 0" material="" geometry="">
    <a-animation attribute="position" from="2.5 1.5 -4" to="2.5 2.5 -4" begin="mouseenter">
    <script> document.querySelector('#sky').emit('Dark-Yellow'); </script>
  </a-animation>
  <a-animation attribute="position" from="2.5 2.5 -4" to="2.5 1.5 -4" begin="mouseleave">
    <script> document.querySelector('#sky').emit('Normal'); </script>
  </a-animation>
</a-box>

Answer 1

You have to add an event listener to the <a-animation> element to get the moment when the animation has ended

document.querySelector("#animation_component").addEventListener("animationend", (e) => {
  document.querySelector('#sky').emit('Normal');
})

Like i did here .