在 a-frame / AR.JS 中为一系列 PNG 图像制作动画答案

【问题标题】：Animating a series of PNG images in a-frame / AR.JS在 a-frame / AR.JS 中为一系列 PNG 图像制作动画
【发布时间】：2019-10-03 15:57:51
【问题描述】：

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

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

任何见解/帮助将不胜感激。谢谢！

【问题讨论】：

标签： aframe ar.js

【解决方案1】：

一个组件怎么样，它将.pngs 加载为纹理，并以固定的间隔交换它们：

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') 呢？我相信使用更多图像可能会非常低效。

【讨论】：