threejs 加载多个gif并且控制播放 代码

Three.js 中加载多个 GIF 图片并控制播放可以通过 `THREE.ImageLoader` 和一些 JavaScript 动态操作来实现。这里是一个简单的示例代码：

// 引入Three.js库和其他依赖
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 使用ImageLoader加载多个GIF图片
const loader = new THREE.ImageLoader();
let gifImages = [];
let gifLoadPromises = [];

for (let i = 0; i < numGifs; i++) {
  const imageUrl = 'path/to/gif_' + i + '.gif'; // 替换为实际的GIF文件路径
  gifLoadPromises.push(
    loader.load(imageUrl, function(gif) {
      gif.image.src =/gif跨域处理url; // 如果有跨域问题，需要处理src属性
      gif.repeat.set(0, 0); // 设置GIF循环次数
      gifImages.push(new THREE.Sprite(gif));
    })
  );
}

Promise.all(gifLoadPromises).then(() => {
  // 当所有GIF都加载完成后
  for (let i = 0; i < gifImages.length; i++) {
    scene.add(gifImages[i]);
  }

  // 添加一个事件监听器来控制播放
  const playPauseButton = document.getElementById('play-pause-button');
  playPauseButton.addEventListener('click', togglePlayPause);

  // 控制函数
  function togglePlayPause() {
    gifImages.forEach((gif) => {
      if (!gif.isPlaying) {
        gif.play(); // 开始播放
      } else {
        gif.stop(); // 停止播放
      }
    });
  }

  // 添加相机控制
  const controls = new OrbitControls(camera, renderer.domElement);
});

function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();

请确保将 `'path/to/gif_...` 替换成每个GIF的实际路径，并根据需求调整循环次数。同时，这个示例假设你有一个 "play-pause-button" 元素来触发播放/暂停动画。