How to postprocessing load postprocess for three.js and then apply

I need help

How to asynchronous load postprocessing for three.js and then apply UnrealBloomPass?

I want to have a async separate chunk with postprocessing.js (and other libraries that I don't need at first). I use webpack 5.

When I do this, everything works well:

  let promiseA = Promise.all([
    ...
    import('postprocessing'),                                
  ]).then(([
    ...
    { EffectComposer, EffectPass, RenderPass, ShaderPass, BloomEffect },
  ]) => {
    let composer = new EffectComposer(renderer);
    composer.setSize(canvas.width, canvas.height);
    composer.addPass(new RenderPass(scene, camera));

    let bloom = new BloomEffect();               
    bloom.intensity = 0.5;     
    const bloomEffect = new EffectPass(camera, bloom);
    composer.addPass(bloomEffect);
  });

But when I try to use UnrealBloomPass, OutlinePass, SMAAPass... I get an error

   ...
    { EffectComposer, EffectPass, RenderPass, BloomEffect, UnrealBloomPass},
    ...

    console.log(UnrealBloomPass ); //undefined


Read more here: https://stackoverflow.com/questions/68471063/how-to-postprocessing-load-postprocess-for-three-js-and-then-apply

Content Attribution

This content was originally published by Sladjan Ilic at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: