Three.js 0.142.0 GIF 动画渲染解决方案

在 Three.js 0.142.0 中，无法直接渲染动画内容：GIF。需要使用其他库来解码和渲染 GIF，例如 gif.js 和 gifler.js。

const gifUrl = require('@/assets/textures/dragon.gif');
const fileLoader = new Three.FileLoader();
fileLoader.setResponseType('arraybuffer');
fileLoader.load(gifUrl, (gifRes) => {
  const gifDecoder = new GifReader(new Uint8Array(gifRes));
  // 获取第一帧图像的数据
  const frame = gifDecoder.frameInfo(0);
  const gif = new Three.DataTexture(frame.patch, frame.width, frame.height, Three.RGBAFormat);
  gif.needsUpdate = true;
  // 创建火焰材质
  const fireMaterial = new Three.MeshBasicMaterial({
    map: gif,
    side: Three.DoubleSide,
    transparent: true,
    depthWrite: false,
    blending: Three.NormalBlending
  });

  // 创建火焰网格
  const fireGeometry = new Three.PlaneGeometry(50, 50);
  const fireMesh = new Three.Mesh(fireGeometry, fireMaterial);
  fireMesh.rotateY(0.5 * Math.PI);
  scene.add(fireMesh);
});

为了实现 GIF 动画渲染，建议使用以下步骤：

安装 GIF 解码库: 使用 npm 或 yarn 安装 gif.js 或 gifler.js 库。
解码 GIF: 使用安装的库解码 GIF 文件并获取帧数据。
创建纹理: 使用 Three.js 的 DataTexture 类创建纹理，并将解码后的帧数据传入。
渲染动画: 在动画循环中，更新纹理数据以播放 GIF 动画。