Question

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

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

https://github.com/JordiRos/GLGif

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

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

Answer 1

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

查看TextureAnimation链接的来源并查看第157行。这是执行此操作的对象。您可以看到正在运行的动画根本不是GIF：

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

Answer 2

我对使用Threejs的动画有类似的问题。因此，我创建了一个简单的程序包来解决该问题： https://github.com/MaciejWWojcik/three-plain-animator

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

Answer 3

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

Answer 4

实际上可以通过弃用的THREE.ImageUtils.loadTexture看到动画GIF ......

var tt = []*Task{}
q := datastore.NewQuery("Task").Filter("Uuid =", "FOOBAR").Order("-CreateTimeMs").Limit(1)
if _, err := q.GetAll(tt); err != nil {
    panic(err)
}
log.Println(tt[0]) // your task

然后在render（）上调用

var materialTextured = new MeshBasicMaterial( {
    map: THREE.ImageUtils.loadTexture('mygif.gif');
});

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

4 个答案: