While attempting to load an animated .dae file, I utilized the 'onProgress' argument to track its loading progress. Surprisingly, the file reaches 74% loaded in just 2 seconds, only to have the entire page freeze for an additional 23 seconds before the model finally loads (and all other activities come to a standstill, including css animations). Even when I tried using setInterval() to display the progress, it too stopped as soon as the loader hit 74%.
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load('models/swing_dancing.dae', function(collada) {
dae = collada.scene;
dae.traverse(function(child) {
if (child instanceof THREE.SkinnedMesh) {
var animation = new THREE.Animation(child, child.geometry.animation);
animation.play();
}
});
dae.scale.x = dae.scale.y = dae.scale.z = 0.002;
dae.updateMatrix();
init();
animate();
}, function(xhr) {
console.log(('progress ' + xhr.loaded / xhr.total * 100) + '% loaded')
});
Seeking any suggestions or tips on how to resolve this issue. My starting point was the example here and the related documentation here