Animated GIF as texture in THREE.js

问题

I'm looking for a way to use a GIF animation as texture in THREE.js. I am currently able to load a texture (even GIF format), but it doesn't play its animation.

Is there any way to do it? I found some links like these:

https://github.com/JordiRos/GLGif

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

But I need to play GIF animation as a texture, not in a Canvas.

回答1:

What you're seeing isn't an animated GIF as a texture. The sites you linked use libraries to render each individual frame of the GIF as a texture and then cycle through them by changing the offset of the textured image.

Look at the source for the TextureAnimation link and see line 157. That is the object that performs this. You can see that the running animation isn't a GIF at all:

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

回答2:

I had a similiar issue with animations using threejs. So I created a simple package to solve that: https://github.com/MaciejWWojcik/three-plain-animator

I hope that will help someone who get here for answers about threejs animations.

回答3:

I only managed to get it working on Safari (Version 11.0.1) and not in Chrome, only using a 250x250 GIF to see the animated GIF, using the deprecated THREE.ImageUtils.loadTexture

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

and then on render(), you call

materialTextured.map.needsUpdate = true;

jsfiddle (GIF animation only works in Safari!)

来源：https://stackoverflow.com/questions/21710049/animated-gif-as-texture-in-three-js