Currently, I am working on a personal website that incorporates Three.js and ScrollMagic using OO Javascript. The 3D objects on the site transform as the user scrolls, providing an interactive experience. While everything is functioning correctly, there is a minor performance issue that needs to be addressed. To enhance performance, I am considering moving some loop/for functions that calculate positions to a web worker, as calling these functions currently causes scrolling lag.
My main challenge lies in passing an array consisting of 512 class instances (THREE.PointCloud) to the web worker. Unfortunately, when attempting this, I face difficulties in accessing meaningful properties from these instances within the web worker environment.
At first, my attempted solution was to pass the array directly to the worker, resulting in an error message 'Uncaught DataCloneError: Failed to execute 'postMessage' on 'Worker': An object could not be cloned.'
Realizing this approach was not feasible, I then tried utilizing JSON.stringify() and JSON.Parse(). Although I managed to retrieve the array's length, I encountered challenges in obtaining the properties for each instance.
I suspect that utilizing an ArrayBuffer might offer a solution, but I lack knowledge regarding how to convert my array of instances into such a format. If anyone has suggestions or alternative methods to improve performance effectively, your assistance would be greatly appreciated.
Any guidance provided would be valuable. Thank you.