含3个Three.js模型的学术项目网站加载优化及预加载器改进诉求

1. 服务器端打包模型为Zip，客户端解压的可行性 #

完全可行，这一方案能减少HTTP请求数（合并多文件为一个Zip，降低TCP握手开销），且Zip的整体压缩率通常优于单个文件压缩。具体实现：

• 服务器端：将所有模型相关文件（模型本体、纹理等）打包为Zip，同时确保服务器开启Gzip/Brotli压缩，进一步缩小传输体积。
• 客户端：使用JSZip库在浏览器中解压Zip，再加载解压后的模型文件。

示例代码：

// 先引入JSZip库（建议本地托管，避免依赖外部资源）
async function loadModelFromZip(zipUrl) {
  const zipResponse = await fetch(zipUrl);
  const zipBlob = await zipResponse.blob();
  const zip = await JSZip.loadAsync(zipBlob);

  // 遍历Zip中的模型文件（以glb为例）
  for (const [filename, file] of Object.entries(zip.files)) {
    if (filename.endsWith('.glb')) {
      const modelBlob = await file.async('blob');
      const modelUrl = URL.createObjectURL(modelBlob);
      // 替换为你的模型加载逻辑（如Three.js的GLTFLoader）
      const loader = new GLTFLoader();
      loader.load(modelUrl, (gltf) => {
        scene.add(gltf.scene);
        updateProgress();
      });
    }
  }
}

2. 让预加载器等待所有模型加载完成再隐藏 #

当前window.load事件仅监听DOM和静态资源加载，不会追踪动态加载的模型。需手动统计模型加载状态：

• 定义需要加载的模型总数，维护已完成加载的计数器。
• 每个模型加载完成后更新计数器，当计数器等于总数时，再隐藏预加载器。

示例代码（整合到你的预加载逻辑中）：

// 配置需要加载的模型/资源列表
const resourceList = ['model1.glb', 'model2.glb', 'models-bundle.zip'];
let loadedCount = 0;
const totalResources = resourceList.length;

// 更新加载进度与状态
function updateProgress() {
  loadedCount++;
  // 所有资源加载完成后隐藏预加载器
  if (loadedCount === totalResources) {
    setTimeout(() => {
      document.body.classList.add('loaded');
    }, 500);
  }
}

// 初始化资源加载
function initResourceLoad() {
  resourceList.forEach(resourceUrl => {
    if (resourceUrl.endsWith('.zip')) {
      loadModelFromZip(resourceUrl).then(() => updateProgress());
    } else {
      const loader = new GLTFLoader();
      loader.load(resourceUrl, () => {
        updateProgress();
      }, undefined, (error) => {
        console.error('资源加载失败:', error);
        // 加载失败也标记为完成（或根据需求处理重试逻辑）
        updateProgress();
      });
    }
  });
}

// DOM加载完成后开始加载资源
document.addEventListener('DOMContentLoaded', initResourceLoad);

3. 在预加载器中显示加载进度百分比 #

基于上述计数器逻辑，可轻松实现进度百分比显示：

• 在预加载器HTML中添加进度文本/进度条元素。
• 每次更新进度时计算百分比，同步更新DOM。

示例代码： #

预加载器HTML新增元素：

<div id="preloader">
  <!-- 原有内容保留 -->
  <div id="progress-text" style="color: white; position: absolute; bottom: 20px; font-size: 1.2em;">0%</div>
  <div class="progress-bar-container" style="position: absolute; bottom: 40px; width: 60%; height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px;">
    <div id="progress-bar" style="height: 100%; background: #809bb9; border-radius: 2px; width: 0%; transition: width 0.3s ease;"></div>
  </div>
</div>

修改updateProgress函数：

function updateProgress() {
  loadedCount++;
  const progressPercent = Math.round((loadedCount / totalResources) * 100);
  // 更新进度文本与进度条
  document.getElementById('progress-text').textContent = `${progressPercent}%`;
  document.getElementById('progress-bar').style.width = `${progressPercent}%`;

  if (loadedCount === totalResources) {
    setTimeout(() => {
      document.body.classList.add('loaded');
    }, 500);
  }
}

4. 除Draco外的额外优化手段 #

若Draco压缩效果未达预期，可尝试这些方法：

• 模型格式深度优化：使用gltf-pipeline工具对GLB/GLTF进行二次压缩，开启最高级Draco压缩：

  npx gltf-pipeline -i input.glb -o output.glb -d --draco.compressionLevel=10
  

• 纹理压缩：将纹理转换为Basis Universal格式（.basis），大幅减小纹理体积，同时支持浏览器端高效解码。
• 分级加载：先加载低精度模型作为占位，待页面空闲后再加载高精度模型。
• 资源托管优化：将模型、静态资源部署到CDN，利用边缘节点加速传输。
• 协议升级：确保服务器支持HTTP/2或HTTP/3，提升多资源并行加载效率。

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