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

Posted 2023-02-27

【中文标题】动画 GIF 作为 THREE.js 中的纹理

【英文标题】：Animated GIF as texture in THREE.js

【发布时间】：2014-03-09 17:20:58

【问题描述】：

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

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

https://github.com/JordiRos/GLGif

http://stemkoski.github.io/Three.js/Texture-Animation.html

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

【问题讨论】：

您说“我需要将 GIF 动画作为纹理播放，而不是在 Canvas 中”但是 Three.js 纹理被渲染到画布上。

“不在画布中”是什么意思？

【参考方案1】：

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

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

http://stemkoski.github.io/Three.js/images/run.png

【参考方案2】：

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

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

【讨论】：

stemkoski 的例子对创建这个很有帮助

不支持 Gif 文件。

【参考方案3】：

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

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

【参考方案4】：

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