在一帧中对一系列 PNG 图像进行动画处理 / AR.JS

Question

我目前正在为我正在进行的项目试验 A-Frame 和 AR.js。我想知道是否可以为一系列 PNG 文件制作动画，例如。 img-1.png, img-2.png，等等在一帧中而不为每一帧单独添加动画？

我知道 A-frame GIF component 但 GIF 更难维护并且只能输出有限的颜色（并且还存在不透明度问题）。

任何insights/help将不胜感激。谢谢！

Answer 1

一个组件如何，它将 .png 加载为纹理，并以固定间隔交换它们：

AFRAME.registerComponent("slideshow", {
   init: function() {

加载并存储图像

   var loader = new THREE.TextureLoader()
   this.array = []
   this.array.push(loader.load("one.png"))
   this.array.push(loader.load("two.png"))

您可以循环执行此操作 ("img-" + i + ".png")，而不是一个一个地执行此操作。您也可以使用架构提供列表。

等到实体加载完毕：

   this.el.addEventListener('loaded', e => {
       let mesh = this.getObject3D('mesh')
       let material = mesh.material

在tick()或间隔内交换material.map纹理：

       let i = 0
       setInterval(e => {
          // if we're at the last element - swap to the first one
          if (i >= this.array.length) i = 0
          this.material.map = this.array[i++]
          this.material.needsUpdate = true

它应该像 this fiddle 一样工作，当附加到一个实体时：

<a-box slideshow></a-box>

为什么 this.array？例如，您可以在 remove() 函数中轻松访问它并处理纹理以释放内存。
为什么不直接 setAttribute('material', 'src', 'img-' + i + '.png') 呢？我相信如果有更多的图像，它可能会非常低效。

在一帧中对一系列 PNG 图像进行动画处理 / AR.JS

Animating a series of PNG images in a-frame / AR.JS

aframe

ar.js