如何通过动画设置事件更改 <a-sky> 颜色

Question

我的项目基本上是各种各样的积木，目标是让积木在鼠标悬停时升起，以及“a-sky”组件将颜色更改为我设置的任何颜色。每个立方体都会将天空的颜色更改为它的颜色。我很难让它工作。我尝试的第一件事是为 a-sky 组件设置动画并让它以事件开始。然后我在块动画中使用 Javascript 来触发块开始悬停时的事件。这是我在下面的故障链接中的内容，代码也在下面

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

您必须向<a-animation> 元素添加一个事件监听器以获取动画结束的时刻

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

就像我做的那样here。