THREE.TextureLoader 加载多个gif并且控制动画 代码

THREE.TextureLoader 可以用来加载各种类型的纹理，包括 GIF 动画。加载多个 GIF 并且控制其动画，你需要首先创建 TextureLoader 的实例，然后对每个 GIF 分别调用 load 方法，并设置它们各自的完成回调来控制动画。以下是一个简单的示例：

// 引入必要的模块
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

// 创建 TextureLoader 实例
const textureLoader = new THREE.TextureLoader();

let textures = [];

// 遍历你想加载的 GIF 文件列表
const gifFiles = ['file1.gif', 'file2.gif', 'file3.gif'];
gifFiles.forEach((filename) => {
    // 加载 GIF 并设置完成回调
    textureLoader.load(filename, (texture, _, xhr) => {
        if (xhr.responseType === 'image/gif') {
            // 确保是 GIF 图像并存储到数组中
            textures.push(texture);
            
            // 如果所有 GIF 都已加载，可以开始播放动画
            if (textures.length === gifFiles.length) {
                playAnimation(textures);
            }
        }
    });
});

function playAnimation(textures) {
    let currentIndex = 0;
    const loop = setInterval(() => {
        // 显示下一个 GIF
        textures[currentIndex].animeType = 'loop'; // 如果有此属性，用于控制循环播放
        textures[currentIndex].animTime = 0; // 设置动画时间位置到0，开始播放
        currentIndex = (currentIndex + 1) % textures.length; // 循环处理

        // 渲染场景，这里假设你有一个渲染器（renderer）
        renderer.render(scene, camera);

        // 当显示最后一个 GIF 后再回到第一个
        if (currentIndex === 0 && textures.length > 1) {
            textures[currentIndex].animeType = null; // 关闭动画模式
            textures[currentIndex].animTime = null;
            currentIndex++;
        }
    }, 500); // 每隔500毫秒切换一次
}

// 确保在你的 Three.js 应用中，有一个渲染器、相机和场景对象