Whenever I attempt to load a significantly large file utilizing the appropriate loaders provided by the library, the tab in which my website is running crashes. Despite trying to implement the Worker class, it doesn't seem to resolve the issue. Here is the scenario:
Within the main JavaScript file, I have:
var worker = new Worker('loader.js');
Upon the user selecting one of the available models, I check for the extension and then send the file URL/path to the worker: (in this case, a pcd file)
worker.postMessage({fileType: "pcd", file: file});
Now, the loader.js file contains the necessary includes to make it function:
importScripts('js/libs/three.js/three.js');
importScripts('js/libs/three.js/PCDLoader.js');
Within its onmessage method, it utilizes the appropriate loader based on the file extension.
var loader = new THREE.PCDLoader();
loader.load(file, function (mesh) {
postMessage({points: mesh.geometry.attributes.position.array, colors: mesh.geometry.attributes.color.array});
});
The data is successfully sent back to the main JavaScript file, which then incorporates it into the scene. However, for larger files, it takes too long and the browser assumes there was an error. I was under the impression that the Worker class was meant to work asynchronously, so what's causing the issue here?