如何在Three.js中预加载纹理，解决时间线切换加载延迟问题？

要解决切换时加载慢的问题，核心就是预加载所有需要用到的纹理资源，让用户点击时间节点时直接调用已加载完成的资源，无需临时发起网络请求或文件读取。以下是具体的实现方案：

1. 提前预加载所有纹理 #

在页面初始化（或时间线组件初始化）阶段，把所有时间节点对应的纹理一次性加载完成，并存到一个缓存对象里。可以用Three.js的LoadingManager统一管理加载过程，还能监听整体加载进度：

// 初始化纹理缓存和加载管理器
const textureCache = {};
const loadingManager = new THREE.LoadingManager();

// 所有纹理加载完成后的回调（可选，比如显示加载完成提示）
loadingManager.onLoad = () => {
  console.log('所有纹理预加载完成');
};

// 创建绑定了管理器的纹理加载器
const textureLoader = new THREE.TextureLoader(loadingManager);

// 假设你有所有时间节点对应的文件名列表（根据实际情况调整）
const floorFileNames = ['floor1', 'floor2', 'floor3'];

// 批量预加载纹理并缓存
floorFileNames.forEach(fileName => {
  const texture = textureLoader.load(`../../public/img/fondplan/${fileName}.jpg`);
  // 提前设置纹理属性，避免切换时重复配置
  texture.minFilter = THREE.LinearFilter;
  texture.side = THREE.DoubleSide;
  textureCache[fileName] = texture;
});

2. 修改切换逻辑，直接从缓存取纹理 #

当用户点击时间线节点时，不再实时加载纹理，而是直接从缓存中取出已加载好的纹理，更新物体材质即可。尽量复用现有材质，避免每次切换都创建新的MeshBasicMaterial，进一步提升响应速度：

// 假设你的平面物体实例为this.planeMesh
function switchFloorTexture(floorFileName) {
  const cachedTexture = textureCache[floorFileName];
  if (!cachedTexture) return;

  // 复用现有材质，直接更新纹理
  if (this.planeMesh.material) {
    this.planeMesh.material.map = cachedTexture;
    // 告诉Three.js材质已更新，需要重新渲染
    this.planeMesh.material.needsUpdate = true;
  } else {
    // 首次创建材质时直接使用缓存纹理
    const planeMaterial = new THREE.MeshBasicMaterial({
      map: cachedTexture,
      side: THREE.DoubleSide,
    });
    this.planeMesh.material = planeMaterial;
  }

  // 立即渲染更新后的场景
  renderer.render(scene, this.camera);
}

额外优化小技巧 #

• 图片格式优化：将JPG替换为WebP格式，同等画质下文件大小可减少50%左右，加快预加载速度。
• 纹理复用：若多个时间节点使用相同纹理，缓存中仅存储一份，避免重复加载。
• 渐进式加载：如果纹理数量极多，可先加载当前节点及相邻节点的纹理，其余节点在后台异步加载，平衡初始化时间与切换体验。

内容的提问来源于stack exchange，提问作者CosmicDarine