Geek Answers Handbook

Animated GIF as texture in THREE.js

I am looking for a way to use GIF animation as a texture in THREE.js. I can currently download a texture (even GIF format), but it doesn’t play the animation.

Is there any way to do this? I found several such links:

https://github.com/JordiRos/GLGif

http://stemkoski.imtqy.com/Three.js/Texture-Animation.html

But I need to play the GIF animation as a texture, not on canvas.

+8
source share
3 answers

What you see is not an animated GIF as a texture. The sites you linked use libraries to display each individual GIF frame as a texture, and then cycle them around, changing the offset of the textured image.

Look at the source of the TextureAnimation link and see line 157. This is the object that does this. You can see that the running animation is not a GIF at all:

http://stemkoski.imtqy.com/Three.js/images/run.png

+3
source

I had a similar problem with animation using ThreeJS. So I created a simple package to solve this problem: https://github.com/MaciejWWojcik/three-plain-animator

I hope this helps someone who gets answers here on ThreeJS animations.

+1
source

I managed to get it to work only in Safari (version 11.0.1), and not in Chrome, only using a 250x250 GIF to view the animated GIF and the outdated 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!)

-3
source

More articles:


All Articles