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

Question

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

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。

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

How To Change <a-sky> Color With Event Set Off By An Animation

javascript

three.js

webvr

aframe