如何缓存Three.js的Object3D以优化Collada模型加载速度？

一、利用浏览器HTTP磁盘缓存（最基础方案） #

你的模型没从磁盘缓存加载，大概率是服务器未配置正确的缓存策略。浏览器会自动缓存静态资源，但需要服务器返回Cache-Control、Expires这类响应头：

• 检查方式：打开浏览器开发者工具「Network」面板，找到目标.dae文件，查看「Size」列，显示from disk cache或from memory cache即为生效。
• 配置示例：
  • 若用Nginx托管静态文件，添加缓存规则：

    location ~* \.(dae|glb|gltf|jpg|png)$ {
      expires 30d;
      add_header Cache-Control "public, max-age=2592000";
    }
    

  • 若用Vite等前端构建工具，可在配置里设置资源哈希（确保文件更新时缓存失效）：

    export default defineConfig({
      build: {
        rollupOptions: {
          output: {
            assetFileNames: '[name].[hash][extname]',
          },
        },
      },
    })
    

二、前端内存缓存（复用已加载的Object3D） #

加载一次模型后，将实例存在内存中，后续直接复用，避免重复解析文件：

// 全局缓存容器，存储已加载的模型实例
const modelCache = new Map();

async function loadColladaModel(url) {
  // 先检查缓存
  if (modelCache.has(url)) {
    // 返回深克隆实例，避免多场景引用同一实例导致操作冲突
    return modelCache.get(url).clone(true);
  }

  const loader = new THREE.ColladaLoader();
  const result = await loader.loadAsync(url);
  // 存入缓存
  modelCache.set(url, result.scene);
  // 返回克隆后的模型
  return result.scene.clone(true);
}

// 使用示例
async function initScene() {
  const scene = new THREE.Scene();
  const model = await loadColladaModel('/models/your-model.dae');
  scene.add(model);
}

三、本地持久化缓存（跨会话复用） #

如果需要页面刷新后仍快速加载，可将模型序列化为JSON存入localStorage（小模型适用，大模型建议用HTTP缓存）：

const MODEL_CACHE_KEY = 'collada-model-cache';

async function loadModelWithLocalCache(url) {
  // 检查本地缓存
  const cachedData = localStorage.getItem(MODEL_CACHE_KEY);
  if (cachedData) {
    const loader = new THREE.ObjectLoader();
    const model = loader.parse(JSON.parse(cachedData));
    return model.clone(true);
  }

  // 加载并缓存
  const loader = new THREE.ColladaLoader();
  const result = await loader.loadAsync(url);
  // 序列化为JSON字符串存入本地
  const modelJSON = JSON.stringify(result.scene.toJSON());
  localStorage.setItem(MODEL_CACHE_KEY, modelJSON);
  return result.scene.clone(true);
}

• 注意：localStorage有5MB左右的大小限制，大模型建议用IndexedDB；模型纹理依赖外部资源，仍需靠HTTP缓存优化加载。

排查当前未缓存的常见原因 #

• 请求URL是否每次带随机参数/时间戳，这种情况浏览器不会缓存。
• 服务器响应头是否包含Cache-Control: no-cache或no-store，这类头会禁用缓存。
• 浏览器是否开启了「禁用缓存」模式（开发者工具里的Disable cache选项）。

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