Animated GIF as texture in THREE.js

Question

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.

Answer 1

Create a video element, load that element using VideoTexture and add the texture to your mesh.

// 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);