javascript - Web workers for loading object in three.js - Stack Overflow

admin管理员组

文章数量:1425759

I'd like to load and parse a 3D file using three.js and the corresponding Loader (e.g. PLYLoader). However, because my 3D files are very large, the Loader spends a long time parsing the file and locks up all JS-based UI on the page. I was wondering what the best way to load the file would be without locking the UI.

I imagine the solution is based on web workers. However, I'm not sure about what the best way to approach it is. The Loaders require the main three.js file, which in turn performs DOM manipulations. Therefore, I cannot naively just copy the Loader functionality into its own web-worker file.

I found that a similar question was asked previously. However, the answer seems to be specifically directed in the case of textures, which appear to have differences in web-worker applicability.

Loading texture from Web Worker in Three.js

I'd like to load and parse a 3D file using three.js and the corresponding Loader (e.g. PLYLoader). However, because my 3D files are very large, the Loader spends a long time parsing the file and locks up all JS-based UI on the page. I was wondering what the best way to load the file would be without locking the UI.

I imagine the solution is based on web workers. However, I'm not sure about what the best way to approach it is. The Loaders require the main three.js file, which in turn performs DOM manipulations. Therefore, I cannot naively just copy the Loader functionality into its own web-worker file.

I found that a similar question was asked previously. However, the answer seems to be specifically directed in the case of textures, which appear to have differences in web-worker applicability.

Loading texture from Web Worker in Three.js

• javascript
• three.js
• web-worker

Share Improve this question Follow asked Feb 6, 2018 at 5:58 The Obscure QuestionThe Obscure Question 1,1741212 silver badges2626 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You actually can include the loading functionality into a web worker. Just import three.js and the respective loader file:

myWorker.js
...
importScripts('/path/to/js/three.js', '/path/to/js/threeXYZLoader.js');

After that you can load your object just as described in the Three.js example. The trickier part is to get your loaded object back into your main thread in order to be rendered. Have a look at this approach using Worker.postMessage and Transferable object as a starting point.

本文标签： javascriptWeb workers for loading object in threejsStack Overflow