时间戳

首页 > 解决方案 > 在 a-frame / AR.JS 中为一系列 PNG 图像制作动画

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

问题描述

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

我知道一个A 帧 GIF 组件，但 GIF 更难维护，并且只能输出有限的颜色（并且还有不透明度的问题）。

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

标签： aframear.js

解决方案

一个组件怎么样，它将.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

在间隔内或内交换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')？我相信使用更多图像可能会非常低效。

推荐阅读