随着处理程序滴答的时间改变图像天空

Question

最近我放了一个post关于如何随时间改变图像天空

但是，对于我使用 setTimeout 函数的图像更改，我需要使用处理程序 tick 来更改图像。

这个HTML

<a-scene>
    <a-sky id="ou" material="opacity:1; src: ./3D/letras/Horizonte.jpg" foo>
        <a-animation id="fadeout-animation" attribute="material.opacity" dur="1000" direction="forward" from="1" to="0" begin="fadeout"></a-animation>
        <a-animation id="fadein-animation" attribute="material.opacity" dur="1000" direction="forward" from="0" to="1" begin="fadein"></a-animation>
    </a-sky>
    <!--<a-sky material="opacity:1; src: ./3D/letras/Horizonte.jpg" foo></a-sky>-->

</a-scene>

这是我的组件

    AFRAME.registerComponent("foo", {

            init: function () {
                //Math.floor(time);
                var self = this.el;
                var fadeOutAnim = document.querySelector("#fadeout-animation");

                var images = ["./3D/letras/Agua.jpg", "./3D/letras/Aire.jpg", "./3D/letras/hector.jpg"];
                var index = 0;
                fadeOutAnim.addEventListener("animationend", (e) => {
                    self.setAttribute("material", "src", images[index]);
                    index++;

                    self.emit('fadein');

                });
            },
            tick: function (time, timeDelta) {
                time = Math.floor(time);
                console.log(time);
                var el = this.el;
                var fadeInAnim = document.querySelector("#fadein-animation");
                fadeInAnim.addEventListener("animationend", (e) => {

                    if (time >= 5000 && time <= 5030) {
                        el.emit('fadeout');
                    }

                });

                if (time >= 5000 && time <= 5030) {
                    el.emit('fadeout');
                }
            },
          }
        );

问题：

有什么办法可以利用抽动时间，来改变吗？再次感谢

code working

Answer 1

你可以有一个临时变量，它将使用 dt 计算时间，当它超过时间限制（5 秒？）然后将其设置回 0；

AFRAME.registerComponent("foo", {
 init: function() {
  this.timer = 0
  this.flip = false
 },
 tick(function(time, dt) {
  this.timer += dt
  if (this.timer > 1000) {
   console.log("second has passed")
   if (flip)
     //fadein
   else
     //fadeout
   this.flip = !this.flip
   this.timer = 0
  }
 }
}

直播fiddlehere

随着处理程序滴答的时间改变图像天空

Change image sky with time of handler tick

webvr

aframe