Question

这是我第一次尝试构建A框架体验，而我是通过将多个社区组成部分整合在一起来实现的。

我目前正在尝试使用aframe-spritesheet-component（https://github.com/EkoLabs/aframe-spritesheet-component）来实现spritesheet动画，但是在使其与其他设备完美配合方面存在问题。

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

到目前为止，我设法使spritesheet动画循环播放一次，此后它导致整个环境完全冻结。

我不确定这是否与我安装的其他组件或aframe框架本身交互不良。

根据我从控制台收集的信息，更新/刻度功能出了点问题。

我设法从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

我的猜测是，您可能会忘记配置Tween（我以前从未使用过此库），或者正在使用不受支持的版本（控制台也显示有关不推荐使用的方法的警告）。

我将代码复制/粘贴到上面的小故障中，并更改了第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>

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

3 个答案: