用于在 three.js 中加载对象的 Web 工作者

Question

我想使用 three.js 和相应的加载器（例如 PLYLoader）加载和解析 3D 文件。但是因为我的3D文件很大，所以Loader解析文件的时间比较长，把页面上所有基于JS的UI都锁死了。我想知道在不锁定 UI 的情况下加载文件的最佳方式是什么。

我想这个解决方案是基于网络工作者的。但是，我不确定最好的方法是什么。 Loaders 需要主 three.js 文件，该文件依次执行 DOM 操作。因此，我不能天真地将 Loader 功能复制到它自己的 web-worker 文件中。

我发现之前有人问过类似的问题。然而，答案似乎是专门针对纹理的，这似乎在 web-worker 的适用性方面存在差异。

Loading texture from Web Worker in Three.js

Answer 1

您实际上可以将加载功能包含在 Web Worker 中。只需导入三个.js 和相应的加载器文件：

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

之后，您可以按照Three.js example. 中的说明加载对象 更棘手的部分是将加载的对象放回主线程以便进行渲染。以Worker.postMessage and Transferable object 为起点来看看这种方法。