通过 XHR 加载 GLTF model 时的 Infinity% 加载百分比

Question

I am trying to load a GLTF model of a piano using XHR, and display the loading percentage on a webpage. The model is loaded using the Three.js library. When I run the code on a local server, the loading percentage is displayed correctly and the model is rendered without any issues. However, when I host the code on a website, the loading percentage is displayed as "Infinity%". I am getting an error "Uncaught TypeError: Failed to set the 'value' property on 'HTMLProgressElement': The provided double value is non-finite" in my console. I have tried to debug the issue by changing the code but I am not able to figure out what is causing the problem. I need help in understanding why this is happening and how to fix it.

Heres the code (i highlighted the line with an arrow (i added parseInt and it changed to NaN%, so it did nothing useful)):

loader.load(
  "models/piano/piano.gltf",
  (gltf) => {
    piano = gltf.scene;
    scene.add(piano);
    piano.traverse((child) => {
      if (child.isMesh) {
        child.castShadow = true;
        child.receiveShadow = true;

        if (child.material.map) {
          child.material.map.anisotropy = 4;
        }
        if (child.material.roughness) {
          child.material.roughness = 0.2;
        }
        if (child.name.startsWith("key")) {
          child.userData = {
            position: child.position.y,
            rotation: child.rotation.x,
          };
          pianoKeys.push(child);
        }
      }
    });

    Promise.all(
      notes.map((note, index) => {
        loadingProgress.value = parseInt((index / 88) * 100);
        currentFile.innerHTML = `sounds/${note}.mp3<span>${
          index + 1
        } / 88</span>`;
        if (index + 1 == 88) {
          currentFile.innerHTML = `Finishing loading...`;
        }
        return new Promise((resolve) => {
          audioSources[note] = new Howl({
            src: [`sounds/${note}.mp3`],
            volume: 1,
            onload: resolve,
          });
        });
      })
    ).then(() => {
      filesLoaded();
    });
  },
  (xhr) => {
    const percentComplete = parseInt((xhr.loaded / xhr.total) * 100);
    currentFile.innerHTML = `models/piano/piano.gltf<span>${percentComplete}%</div>`; //  <--
    loadingProgress.value = percentComplete;
  }
);

Answer 1

Okay i think i found a solution, i added console.log(xhr) to xhr function and checked loaded value on local server and assigned it as a variable, in my case 289907, because xhr.total returns 0 on website. and now it works perfectly

Answer 2

From the documentation

onProgress: A function to be called while the loading is in progress. The argument will be the XMLHttpRequest instance, that contains.total and.loaded bytes. If the server does not set the Content-Length header; .total will be 0.

It seems like your server is not setting the appropriate header, so you're getting: xhr.loaded / 0 = infinity