在THREE.js中使用动态GIF作为纹理

Question

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

有没有什么方法可以做到这一点？我发现了一些类似于以下链接：

https://github.com/JordiRos/GLGif

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

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

- Fran Verona

---

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

你的意思是“不在画布中”吗？ - Mia

Answer 1

你看到的并不是一个动态GIF纹理。你提供的网站使用库来渲染每个GIF帧并将其作为纹理，然后通过改变纹理图像的偏移量来循环播放这些帧。

查看TextureAnimation链接的源代码，看看第157行。那就是执行此操作的对象。你可以看到运行的动画根本不是GIF： http://stemkoski.github.io/Three.js/images/run.png

- mattbasta

Answer 2

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

我希望这能帮助到寻找有关threejs动画答案的人。

- Maciej Wojcik

---

Stemkoski的示例对于创建这个非常有帮助。 - Maciej Wojcik

不支持Gif文件。 - atom

Answer 3

创建一个视频元素，使用VideoTexture加载该元素，并将纹理添加到您的网格中。

// Create video and play
let textureVid = document.createElement("video")
textureVid.src = `texture.mp4`; // transform gif to mp4
textureVid.loop = true;
textureVid.play();


// Load video texture
let videoTexture = new THREE.VideoTexture(textureVid);
videoTexture.format = THREE.RGBFormat;
videoTexture.minFilter = THREE.NearestFilter;
videoTexture.maxFilter = THREE.NearestFilter;
videoTexture.generateMipmaps = false;

// Create mesh
var geometry = new THREE.SphereGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { map: videoTexture } );
mesh = new THREE.Mesh( geometry, material );
scene.add(mesh);

- GIA

---

谢谢，这让我在地球球体上拥有了云动画视频。我不得不添加 textureVid.crossOrigin = 'anonymous'; 并使用 textureVid.src = 'http://localhost:8080/texture.mp4'; 来在元素中使用本地服务的文件，textureVid.muted = true; 使元素首先能够工作，并且 videoTexture.format = THREE.RGBAFormat; 因为最近 Three.js 中似乎已经删除了 RGBFormat。 - Yin Cognyto

Answer 4

使用 gifuct-js 将gif渲染到Canvas，然后使用该canvas作为源，使用 CanvasTexture。

以下是我做的似乎可行的POC（加载后可能需要刷新预览） https://codesandbox.io/s/giftexture-51rmw

- Pawel

Answer 5

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

- Elias Hasle