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

THREE.TextureLoader 是Three.js库中的一个工具，用于加载纹理数据，包括位图、贴图等。要使用它来加载并控制GIF动画，你需要首先安装THREE.js库，然后按照以下步骤操作：

// 引入必要的模块
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; // 如果是GIF，可能需要第三方库如gif.js

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

// 使用loader加载GIF
let gifUrl = 'path_to_your_gif_file.gif'; // 替换为你的GIF文件路径
let loadingPromise = textureLoader.load(gifUrl);

// 当加载完成时处理动画
loadingPromise.then((texture) => {
    // 如果GIF是一个序列帧，你可以解析它们作为动画
    if (texture.isVideoTexture) {
        const frames = Array.from(texture.image.frames);
        let currentFrameIndex = 0;
        
        // 创建一个循环播放的动画函数
        function animate() {
            texture.setUVOffset(new THREE.Vector2(0, currentFrameIndex / (frames.length - 1)));
            texture.needsUpdate = true;

            requestAnimationFrame(animate);
            currentFrameIndex = (currentFrameIndex + 1) % frames.length; // 循环播放
        }

        animate(); // 开始动画
    }
    else {
        // 如果不是序列帧，则直接设置到材质上
        var material = new THREE.MeshBasicMaterial({ map: texture });
        var geometry = new THREE.PlaneGeometry(1, 1); // 或者自定义几何体
        var mesh = new THREE.Mesh(geometry, material);
    }
    
    scene.add(mesh); // 将纹理应用到场景中
});

// 初始化Three.js场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 渲染动画
function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

render();