用于在 Three.js 中加载对象的 Web Worker

Question

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

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

我发现以前有人问过类似的问题。然而，答案似乎是专门针对纹理的，这似乎在网络工作者的适用性方面存在差异。

在 Three.js 中从 Web Worker 加载纹理

Answer 1

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

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

之后，您可以按照Three.js 示例中的描述加载您的对象。 更棘手的部分是让你加载的对象回到你的主线程以便被渲染。看看这个使用Worker.postMessage 和 Transferable 对象作为起点的方法。