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

Question

I am currently experimenting with A-Frame and AR.js for a project I'm working on. I was wondering if it's possible to animate a series of PNG files eg. img-1.png, img-2.png, and so on in a-frame without individually adding animation for each frame?

I'm aware of an A-frame GIF component but GIFs are harder to maintain and can only output limited colors (and also trouble with opacity).

Any insights/help would be appreciated. Thanks!

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

How about a component, which loads up the .pngs as textures, and swaps them in a fixed interval:

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

load up and store the images

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

Instead of doing this one by one, you could do this in a loop ("img-" + i + ".png"). Also you could provide a list using the schema.

Wait until the entity is loaded:

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

swap the material.map texture in the tick() or within an interval:

       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

and it should be working like in this fiddle, when attached to an entity:

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

Why this.array ? For example you can easily access it in the remove() function and dispose the textures to free up memory.
Why not just do setAttribute('material', 'src', 'img-' + i + '.png') ? I believe with more images it may by highly inefficcient.

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

1 Answers1

Linked