aframe-spritesheet-组件冻结浏览器中的webvr环境？

Question

这是我第一次尝试构建a-frame体验，我通过拼凑多个社区组件来做到这一点。

我目前正在尝试使用aframe- spritesheet -component ( https://github.com/EkoLabs/aframe-spritesheet-component )实现一个spritesheet动画，但在让它与其他人很好地播放时遇到了问题。

我在这里构建：https://afantasy.github.io/spritetest/

到目前为止，我已经设法让spritesheet动画循环一次，之后它会导致整个环境完全冻结。

我不确定这是与我安装的其他组件的糟糕交互，还是与aframe框架本身的交互。

从我从控制台收集的信息来看，update / tick函数出了问题。

我已经设法隔离了直接从github ( https://ekolabs.github.io/aframe-spritesheet-component/examples/rowscols/ )上的aframe-spritesheet-component示例中获取的这段代码的直接原因。

<!-- SPRITE ANIMATION LOOP -->
<script type="text/javascript">
  var animation = { progress: 0 };

  var tween = new TWEEN.Tween(animation)
      .to({ progress: 1 }, 1000)
      .onUpdate(function(){
          document.querySelector('a-image').setAttribute('sprite-sheet', 'progress', animation.progress);
      });

  tween.onComplete(function() { animation.progress = 0; });
  tween.chain(tween);
  tween.start();
</script>

超级困难，并确定如何从这里继续，任何提示将不胜感激。

Answer 1

下面是一个替代的spritesheet动画组件的代码，它可能会为您工作，而不需要外部TWEEN.js依赖：

AFRAME.registerComponent('spritesheet-animation', {

    schema: 
    {
        rows: {type: 'number', default: 1},
        columns: {type: 'number', default: 1},

        // set these values to play a (consecutive) subset of frames from spritesheet
        firstFrameIndex: {type: 'number', default: 0},
        lastFrameIndex: {type: 'number', default: -1}, // index is inclusive

        // goes from top-left to bottom-right.
        frameDuration: {type: 'number', default: 1}, // seconds to display each frame
        loop: {type: 'boolean', default: true},
    },

    init: function()
    {
        this.repeatX = 1 / this.data.columns;
        this.repeatY = 1 / this.data.rows;

        if (this.data.lastFrameIndex == -1) // indicates value not set; default to full sheet
            this.data.lastFrameIndex = this.data.columns * this.data.rows - 1;

        this.mesh = this.el.getObject3D("mesh");

        this.frameTimer = 0;
        this.currentFrameIndex = this.data.firstFrameIndex;
        this.animationFinished = false;
    },

    tick: function (time, timeDelta) 
    {
        // return if animation finished.
        if (this.animationFinished)
            return;

        this.frameTimer += timeDelta / 1000;

        while (this.frameTimer > this.data.frameDuration)
        {
            this.currentFrameIndex += 1;
            this.frameTimer -= this.data.frameDuration;

            if (this.currentFrameIndex > this.data.lastFrameIndex)
            {
                if (this.data.loop)
                {
                    this.currentFrameIndex = this.data.firstFrameIndex;
                }
                else
                {
                    this.animationFinished = true;
                    return;
                }
            }
        }

        let rowNumber = Math.floor(this.currentFrameIndex / this.data.columns);
        let columnNumber = this.currentFrameIndex % this.data.columns;

        let offsetY = (this.data.rows - rowNumber - 1) / this.data.rows;
        let offsetX = columnNumber / this.data.columns;

        if ( this.mesh.material.map )
        {
            this.mesh.material.map.repeat.set(this.repeatX, this.repeatY);
            this.mesh.material.map.offset.set(offsetX, offsetY);
        }
    }
});

代码中组件的完整示例：https://github.com/stemkoski/A-Frame-Examples/blob/master/spritesheet.html

示例：https://stemkoski.github.io/A-Frame-Examples/spritesheet.html的实时预览

Answer 2

你的app.js被缩小了，所以很难追踪这个问题。然而，我将你版本中的Tween库替换为他们版本中使用的确切的Tween库，它似乎起作用了：

https://stackoverflow-51620935.glitch.me

我的猜测是，要么是你忘记配置补间(我以前从未使用过这个库)，要么是使用了一个不受支持的版本(控制台还显示了几个关于不推荐使用的方法的警告)。

我将您的代码复制/粘贴到上面的故障中，并更改了第96行以包含覆盖：

<!-- SPRITE ANIMATION LOOP -->
<script src="tween-rewrite.js"></script>
<script type="text/javascript">
  var animation = { progress: 0 };

  var tween = new TWEEN.Tween(animation)
      .to({ progress: 1 }, 1000)
      .onUpdate(function(){
          document.querySelector('a-image').setAttribute('sprite-sheet', 'progress', animation.progress);
      });

  tween.onComplete(function() { animation.progress = 0; });
  tween.chain(tween);
  tween.start();
</script>

Answer 3

遇到了同样的问题。像这样循环动画对我来说很有效：

    <script>
        function smokeLoop(){
            var animation = { progress: 0 };
            var tween = new TWEEN.Tween(animation)
                .to({ progress: 1 }, 4000)
                .onUpdate(function(){
                    document.querySelector('a-image').setAttribute('sprite-sheet', 'progress', animation.progress);
                });
            tween.onComplete(function() { animation.progress = 0; smokeLoop();});
            tween.start();
        }
        smokeLoop();
    </script>