JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
    <script>
      AFRAME.registerComponent("animate-png", {
        init: function() {
          // load the .pngs
          let loader = new THREE.TextureLoader()
          this.pngArray = []
          this.pngArray.push(loader.load('https://i.imgur.com/wjobVTN.jpg'))
          this.pngArray.push(loader.load('https://i.imgur.com/I7PAB.jpg'))
          this.pngArray.push(loader.load('https://i.imgur.com/HNluPrg.jpg'))

          this.el.addEventListener('loaded', e => {
            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
            }, 500)
          })
        },
        remove: function() {
          clearInterval(this.id);
          // free the memory
          for (let i = 0; i < this.pngArray.length; i++) {
            this.pngArray[i].dispose();
          }
        }
      })

    </script>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" animate-png></a-box>
    </a-scene>