如何在THREE.js中创建动态变化的纹理动画？

在THREE.js中创建动态变化的纹理动画可以通过以下几个步骤实现：

1. **加载纹理和材质**：首先需要加载一个可以改变内容的纹理，比如一个包含序列帧的图像或者视频纹理。然后创建一个`THREE.TextureLoader`实例加载它，并将其设置为材质的贴图。

const loader = new THREE.TextureLoader();
let texture = loader.load('path_to_your_texture_sequence');

2. **创建材质和几何体**：创建一个`THREE.MeshBasicMaterial`或自定义材质，将刚才加载的纹理设为其`map`属性。

const material = new THREE.MeshBasicMaterial({ map: texture });

3. **创建Mesh对象**：创建一个`THREE.Mesh`对象并赋予材质。

4. **循环播放动画**：为了创建动画效果，你可以使用JavaScript的`setInterval`函数定期更新纹理的`offset`属性，这个属性控制纹理在每个循环中的起始位置，从而达到逐帧显示的效果。例如，如果纹理有60帧，每秒播放5帧，你可以这样做：

let frameIndex = 0;
const animationSpeed = 1000 / 5; // 每秒播放5帧

function animate() {
    requestAnimationFrame(animate);

    if (frameIndex < texture.images.length - 1) {
        texture.offset.x = frameIndex / (texture.images.length - 1);
        frameIndex++;
    } else {
        frameIndex = 0;
    }

    // 更新mesh的material
    mesh.material.map = texture;
    renderer.render(scene, camera);
}

animate();

记得要在适当的地方清除`requestAnimationFrame`，如`window.addEventListener('unload', () => { clearInterval(animationId); })`，防止内存泄漏。