通过XHR加载GLTF模型时显示Infinity%的问题排查与解决

线上环境中，服务器返回GLTF模型文件时未正确设置Content-Length响应头，导致XHR对象的xhr.total值为0（或初始阶段为NaN）。此时执行xhr.loaded / xhr.total会得到Infinity，parseInt后仍为非有限值，设置给HTMLProgressElement的value属性时就会触发类型错误。

本地环境正常是因为本地服务器（比如Live Server）会正确返回文件的Content-Length，xhr.total能拿到正确的文件大小。

在计算百分比前，先校验xhr.total的有效性，同时对计算结果做边界处理，确保始终是0-100之间的合法数值：

修改XHR进度回调函数如下：

(xhr) => {
  let percentComplete = 0;
  // 仅当xhr.total有效（大于0）时计算百分比
  if (xhr.total > 0) {
    percentComplete = Math.min(Math.round((xhr.loaded / xhr.total) * 100), 100);
  }
  currentFile.innerHTML = `models/piano/piano.gltf<span>${percentComplete}%</span>`;
  loadingProgress.value = percentComplete;
}

1. 原代码中currentFile.innerHTML的闭合标签错误（用了</div>但开头是<span>），已修正为</span>，避免DOM结构异常。
2. 使用Math.round替代parseInt，百分比显示更精准；用Math.min确保数值不超过100，避免加载完成前出现超过100%的异常显示。

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