Анимация серии изображений PNG в a-frame / AR.JS - PullRequest
Новая
       48

Анимация серии изображений PNG в a-frame / AR.JS

0 голосов
/ 26 сентября 2019

Я сейчас экспериментирую с A-Frame и AR.js для проекта, над которым я работаю.Мне было интересно, можно ли анимировать ряд файлов PNG, например.img-1.png, img-2.png, и так далее в a-frame без индивидуальной добавления анимации для каждого кадра?

Я знаю о компоненте GIF в A-кадре , но GIF сложнее поддерживать и может выводить только ограниченные цвета (а также проблемы с непрозрачностью).

Любойпонимание / помощь будет принята с благодарностью.Спасибо!

1 Ответ

1 голос
/ 26 сентября 2019

Как насчет компонента, который загружает .png s как текстуры и заменяет их через фиксированный интервал: 

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

и он должен работать как в этой скрипке , когда присоединен к сущности: 

<a-box slideshow></a-box>
  • Почему this.array?Например, вы можете легко получить к нему доступ в обратном вызове remove() и использовать текстуры для освобождения памяти.
  • Почему бы просто не сделать setAttribute('material', 'src', 'img-' + i + '.png')?Я считаю, что с большим количеством изображений это может быть крайне неэффективно.
...