每隔几秒用动画改变天空的图像

Question

我需要每隔几秒用动画改变天空的图像。

喜欢this。但是如果没有事件点击，就我而言，我需要随时间改变图片。

    <a-assets>
        <img id="water" src="./3D/letras/Agua.jpg"/>
        <img id="air" src="./3D/letras/Aire.jpg"/>
        <img id="horizont" src="./3D/letras/Horizonte.jpg"/>
        <img id="hector" src="./3D/letras/hecxtor.jpg"/>
    </a-assets>

Answer 1

这个怎么样。
您制作了两个动画：fade-in 和 fade-out:

<a-sky foo>
   <a-animation id="fadein-animation"></a-animation>
   <a-animation id="fadein-animation"></a-animation>
</a-sky>

想法是为不透明度设置动画，当图像不可见时，切换源：

AFRAME.registerComponent("foo", {
  init: function() {
    var self = this.el
    var fadeInAnim = document.querySelector("#fadein-animation")
    var fadeOutAnim = document.querySelector("#fadeout-animation")
    var images = ["img1.jpg","img2.jpg"]
    var switchflip = 1
    fadeOutAnim.addEventListener("animationend", (e) => {
      self.setAttribute("material", "src", images[switchflip])
      switchflip = switchflip === 1 ? 0 : 1
      self.emit('fadein')
    })
    fadeInAnim.addEventListener("animationend", (e) => {
      self.emit('fadeout')
    })
 }
})

工作fiddlehere。

每隔几秒用动画改变天空的图像

Change image of sky every few seconds with an animation

webvr

aframe