Question

我目前正在为正在进行的项目尝试A-Frame和AR.js。我想知道是否可以对一系列PNG文件进行动画处理。 img-1.png, img-2.png，依此类推，而不是逐帧添加动画？

我知道有一个A-frame GIF component，但GIF较难维护，只能输出有限的颜色（还会出现不透明的问题）。

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

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

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

       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')？我相信使用更多图像可能会导致效率极低。

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

1 个答案: