threejs引入gif

在Three.js中引入GIF动画，可以使用Three.js中的TextureLoader类和CanvasTexture类。以下是一个加载GIF动画并将其作为材质应用到立方体上的示例代码：

// 创建一个TextureLoader对象
var loader = new THREE.TextureLoader();

// 加载GIF动画
loader.load(
    'textures/animated.gif',  // GIF文件路径
    function ( texture ) {  // 成功回调函数
        // 创建一个CanvasTexture对象
        var canvasTexture = new THREE.CanvasTexture( texture.image );

        // 创建一个立方体
        var geometry = new THREE.BoxGeometry( 1, 1, 1 );
        var material = new THREE.MeshBasicMaterial( { map: canvasTexture } );
        var cube = new THREE.Mesh( geometry, material );

        // 将立方体添加到场景中
        scene.add( cube );

        // 每一帧更新材质
        function update() {
            canvasTexture.needsUpdate = true;
            requestAnimationFrame( update );
        }
        update();
    },
    function ( xhr ) {  // 加载进度回调函数
        console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
    },
    function ( error ) {  // 错误回调函数
        console.log( 'An error happened' );
        console.log( error );
    }
);

在上面的代码中，我们使用TextureLoader加载一个名为"animated.gif"的GIF文件。在成功回调函数中，我们首先创建一个CanvasTexture对象，并将GIF动画的Image对象作为参数传递给它。接下来，我们创建一个立方体，并将CanvasTexture对象作为材质应用到立方体上。最后，我们将立方体对象添加到场景中，并通过requestAnimationFrame()函数每一帧更新材质。

需要注意的是，如果你需要在场景中引入多个GIF动画，需要使用多个CanvasTexture对象，并在每一帧更新它们。同时，由于GIF动画通常比较占用资源，建议在使用时注意性能优化。