I am attempting to load a GLTF model of a piano using XHR and showcase the loading progress on a webpage. The model is being loaded utilizing the Three.js library. On a local server, everything works perfectly - the loading percentage is shown accurately, and the model is rendered without any issues. However, upon hosting the code on a website, the loading percentage inexplicably displays as "Infinity%". An error message "Uncaught TypeError: Failed to set the 'value' property on 'HTMLProgressElement': The provided double value is non-finite" appears in the console. Despite my attempts to troubleshoot by modifying the code, I am unable to identify the root cause of this issue. I require assistance in comprehending why this is occurring and how it can be resolved.
Below is the code snippet (I've highlighted the problematic line with an arrow (after adding parseInt, it resulted in NaN%, rendering it ineffective)):
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;
}
);