A 帧 png 序列纹理动画预加载器？

问题描述

我已经在 <a-plane> 上使用 PNG 序列进行纹理动画实现了我的目标，根据对这个问题 Animating a series of PNG images in a-frame / AR.JS 的回答，使用 ARJS 创建了 2d 动画。

但是图片加载出现了一个新问题...

那些 PNG 序列由每个组件至少 50 个帧（文件）组成，其中有 8 个。 当我尝试使用 Wi-Fi 时，它在图像加载方面进展顺利（所有帧都在显示）。但是当我尝试使用移动网络时，某些对象的某些帧没有加载，并且不会再次加载。

我尝试使用预加载函数 (https://stackoverflow.com/a/63060050/1784870) 将 <img> 附加到 body 并将纹理加载到每个对象的全局数组中，但问题仍然相同，所以我放弃了这个解决方案，因为它赢了不行。

这是每个组件的代码（其他7个组件是相同的代码，不同的组件/src名称）

AFRAME.registerComponent("anim1",{
        init: function () {
            // load the .pngs
            let loader = new THREE.TextureLoader();
            this.pngArray = [];
            let anim1_frames = 51; // total frames
            for (var i = 0; i < anim1_frames; i++) {
                if (i < 10) {
                    i = '0' + i; // add 0 in front of single digit frames
                }
                this.pngArray.push(loader.load('anim1/anim1' + i + '.png')); // push TextureLoader loaded with img to array
            };

            let mesh = this.el.getobject3D("mesh");
            this.material = mesh.material;
            var i = 0;
            this.id = setInterval(e => {
                if (i >= this.pngArray.length) i = 0;
                this.material.map = this.pngArray[i++];
                this.material.needsUpdate = true;
            },1000 / 25); // play at 25fps
        },remove: function () {
            clearInterval(this.id);
            // free the memory
            for (let i = 0; i < this.pngArray.length; i++) {
                this.pngArray[i].dispose();
            }
        }
    })

我现在需要的是改进图像预加载以显示移动网络的所有帧。

提前致谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）