Can a web worker handle multiple events in response?
I've created a worker that loads buffergeometry from various .json files and passes it to the main thread upon receiving a 'message' event. The geometries load successfully, but I'm struggling to pass the progress of the xhr request back to the main thread. When I try to include a progress property, only 100% is transferred.
Is there a way to create a 'progress' event listener in the worker and send the progress as it happens to the main thread?
Although I am able to send buffer arrays and render Meshes in the Scene correctly, I cannot seem to get the progress of the data streaming over as desired.
I need help figuring out how to send the xhr req's progress from the worker to the main thread.
https://i.sstatic.net/zdlFd.jpg
Excerpt from Web Worker:
import { BufferGeometryLoader, BufferGeometry } from 'three';
var progress;
const loader = new BufferGeometryLoader();
const geometry = new BufferGeometry();
/* Is this achievable? How do I stream progress info over here? */
self.addEventListener('progress', (event) => {
console.log('event in progress: ', progress);
});
self.addEventListener('message', (event) => {
const { model, part } = event.data;
loader.load(`https://models/${model}/${part}.json`, (geometry) => {
// Code for loading buffergeometry and passing to main thread is removed for clarity
},
(xhr) => {
/* How can I pass just the value of progress so I can display a progress bar in the DOM? Or emit a progress event that the worker can respond to? */
progress = (xhr.loaded / xhr.total * 100);
console.log('progress: ', progress);
},
(err) => {
console.log('err: ', err);
}
);
});
Main Thread Excerpt:
/* If I can capture the progress data, I can easily build a loading progress bar */
worker.addEventListener('progress', (event) => {
console.log('event.data: ', event.data);
});
worker.addEventListener('message', (event) => {
// Build meshes from buffergeometries, assign materials, and add to scene
});