Bundling threejs project with DRACOLoader (webworker)

I am trying to bundle my threejs project which uses DRACOLoader file. It creates web-worker in runtime with BLOB url. I tried webpack / rollup to give options to worker loader.

https://webpack.js.org/loaders/worker-loader/.

But no use. It worker is in separate file, it becomes easy to give options. Why is it DRACOLoader uses runtime approach to create worker? and How shall i bundle it?

Is your entire application running in a Web Worker? Or could you explain what you’re trying to do with webpack’s worker-loader?

DRACOLoader creates its own Web Workers so that decoding does not block the main thread. It may start multiple workers, to decode parts of a model in parallel. It’s fully compatible with bundlers, but I don’t know whether DRACOLoader itself can run inside of a Web Worker — it may not have all the Browser APIs it needs, e.g. to start other Web Workers, in that location.

I am not looking to run DRACOLoader in another worker.
I am just looking to bundle DRACOLoader and other js files.
I am able to bundle all other js files and am able to run successfully.

But, When I am bundling DRACOLoader with webpack, I am able to generate minified file but browser is not able to recognize the worker.

For webpack to recognize the worker, I am using the below loader.
https://webpack.js.org/loaders/worker-loader/.

But it requires static .js file. In DRACOLoader, worker gets created runtime with BLOB url. I am not able to figure out how to give this option to webpack.

The decoder path given to DRACOLoader needs to have statically hosted files - they cannot be bundled.

If you’re having trouble getting this to build you will need to share enough code to reproduce the issue you are having and the errors you see.

like @donmccurdy said, you dont bundle draco. bundlers give you a /public folder, it contains files and folders that you intent to ship statically. draco has to be in that folder. your gltf’s as well, unless you import them from the src folder, in which case the bundler adds them to the dist and gives you a url hash.

here’s a running example, it’s react but just look into /public, you’d do the same in plain three. https://codesandbox.io/s/r3f-ibl-envmap-simple-y541h

personally, instead of fetch requests i would also prefer imports or dynamic imports, including the loaders. then it wouldn’t be browser dependent but cross platform. but that’s just how it is.