动画 GIF 作为 THREE.js 中的纹理答案

【问题标题】：Animated GIF as texture in THREE.js动画 GIF 作为 THREE.js 中的纹理
【发布时间】：2014-03-09 17:20:58
【问题描述】：

我正在寻找一种在 THREE.js 中使用 GIF 动画作为纹理的方法。我目前能够加载纹理（甚至是 GIF 格式），但它不播放动画。

有什么办法吗？我找到了一些这样的链接：

但我需要将 GIF 动画作为纹理播放，而不是在画布中播放。

【问题讨论】：

【解决方案1】：

您看到的不是作为纹理的动画 GIF。您链接的网站使用库将 GIF 的每个单独帧渲染为纹理，然后通过更改纹理图像的偏移量来循环浏览它们。

查看TextureAnimation 链接的源代码并查看第157 行。这是执行此操作的对象。你可以看到跑步动画根本不是GIF：

【讨论】：

【解决方案2】：

我在使用threejs 制作动画时遇到了类似的问题。所以我创建了一个简单的包来解决这个问题： https://github.com/MaciejWWojcik/three-plain-animator

我希望这能帮助到这里获得有关threejs 动画的答案的人。

【讨论】：

【解决方案3】：

使用 gifuct-js 将 gif 渲染到画布中，然后使用 CanvasTexture 将该画布作为源。

这是我的 POC 似乎可以正常工作（加载后可能需要刷新预览） https://codesandbox.io/s/giftexture-51rmw

【讨论】：

【解决方案4】：

将动画 GIF 用作纹理的替代方法是使用 ffmpeg 等工具将动画 gif 转换为视频文件，然后将该视频用作纹理，这是 WebGL 支持的。

【讨论】：