Search code examples
javascriptimportthree.jsimporterrores6-modules

Can import all THREE.js post processing modules as ES6 modules except OutputPass

I am trying to replicate this example but with modules imported from CDN.

With the following import map:

<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
    {
        "imports": {
            "three": "https://cdn.skypack.dev/[email protected]",
            "three/addons/": "https://cdn.skypack.dev/[email protected]/examples/jsm/"
        }
    }
</script>

And the following imports

// ...
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer';
import { RenderPass } from 'three/addons/postprocessing/RenderPass';
import { SAOPass } from 'three/addons/postprocessing/SAOPass';
import { OutputPass } from 'three/addons/postprocessing/OutputPass';

I get an error only for the last import "OutputPass":

GET https://cdn.skypack.dev/-/[email protected]/dist=es2019,mode=raw/examples/jsm/postprocessing/OutputPass net::ERR_ABORTED 404

I have tried figuring out why this module won't import correctly, but I have not found a single clue.

Any help is welcome!

Solution

  • OutputPass was added with r153, you are importing r136. So you can easily fix the issue by just upgrading three.js to the latest version.