No particles rendered when used with webpack

[weiserhei]

Im trying to use the latest SPE from npmjs in a project that is bundled with webpack, including the latest three.js r107. For testing I pasted the official clouds example, but there are no particles rendered. There are no Errors in the console, but no particles on the screen either, so Im kind of stuck here.

Sidenote: I had to replace SPEs private copy of three.js inside its node_modules folder with the latest release.

When running the clouds Example standalone using the latest three.js r107 everything seems fine. My code is on gh in case you want to have a look: https://github.com/weiserhei/roemerhaus3d/blob/spetest/src/js/init.js

How should I debug this further?

[weiserhei]

It seems to me I cant use SPE with webpacks shimming, or atleast I need to learn some more shenanigans. IMO this should work:

{
    test: require.resolve('shader-particle-engine'),
    use: ['imports-loader?THREE=three', 'exports-loader?SPE']
}

Which got me to the point where everything is compiling and running but no particles.

I went with throwing my THREE Instance into SPE by editing the source file: module.exports = function(THREE) { [spe.min.js content] return SPE;} And in my module: let SPE = spe.default(THREE);

[weiserhei]

It turns out the shim does work, but SPEs dependency on three.js r84 is the next Problem. When overriding via package-lock.json with the current r107 its still not displaying particles., I guess this is because of webpack not giving SPE the same instance of three.js?

Removing SPEs dependency on three.js altogether in my package-lock.json is what Im running now, but this has to be reapplied on every npm update. Maybe someday there will be a v2 😅

[squarefeet]

I'm going to reopen this as it's pretty important to remove this hardcoded dependency.