So I am currently using ThreeJS module using the standard importmap (“three” and “three/addons/”). Now I would like to use the postprocessing library from pmndrs so that those import directives on “postprocessing” works, but I could not find the JavaScript module file needed for that. I looked in their GitHub page, but all I see are the effect JavaScript files and nothing like postprocessing.module.js or something.
Note that I am not using any package manager.
do not use import maps. use vite like the docs say: three.js docs
you can’t expect any npm library to work through import maps because it’s an unfinished spec that doesn’t reflect the real world (npm is to a large degree commonjs). you get no benefits, everything takes longer and is more complex, involves manual work, you still rely heavily on tooling (servers etc), things won’t work, your bundles are huge without minification or tree-shaking — basically you are not ready for production.
npm create vite
# pick projectName
# pick javascript
cd projectName
npm install three @types/three postprocessing
npm run dev
now every change you make in the editor will be reflected in the browser
import * as THREE from 'three'
import { EffectComposer } from 'postprocessing'
...
run this to obtain a minimised, tree-shaked smallest-possible /build that you can upload to a hoster
npm run build
ohhh…very nice. Thank you for the full instructions on that npm thing. I shall give it a try and see if things still work. 
If however, you do want to use importmaps to import pmndrs Post Processing, it is possible.
Example,
This is the import map from the example.
<script type="importmap">
{
"imports": {
"three": "https://esm.sh/three@0.163.0",
"three/addons/": "https://esm.sh/three@0.163.0/examples/jsm/",
"postprocessing": "https://esm.sh/postprocessing@6.35.3"
}
}
</script>
If you want to use @react-three/postprocessing, I also have an import map example of that.
Very nice. I tested that a bit and it works.
I did change the URLs to be without the versions, I think that’s ok to be sure I get the latest version?
"imports": {
"three": "https://esm.sh/three",
"three/addons/": "https://esm.sh/three/examples/jsm/",
"postprocessing": "https://esm.sh/postprocessing"
}
Just going to test that a bit more. I wish I could just download the entire ZIP from GitHub and point to those local files like I used to do with the ThreeJS module. If that is not possible with this postprocessing package, then so be it.
Thank you!
You will save a lot of time and energy in the long run learning how to use a bundler, like webpack, vite, esbuild, et.al
To host the processing module locally, you could,
Download and save https://esm.sh/v135/postprocessing@6.35.3/es2022/postprocessing.mjs
Open in an editor and replace all occcurance of /v135/three@0.163.0/es2022/three.mjs to three
Save in a web accesable folder. E.g, ./postprocessing@6.35.3/postprocessing.mjs
Your import maps might look like this, depending on which web accessable folders your libs are saved in.
"imports": {
"three": "/build/three.module.min.js",
"three/addons/": "/examples/jsm/",
"postprocessing": "/postprocessing@6.35.3/postprocessing.mjs"
}
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { BloomEffect, EffectComposer, EffectPass, RenderPass } from 'postprocessing'
Maybe there is a tool that can download, edit and save esm modules locally for offline use. I don’t know of any.
Manually downloading modules and editing them to work with your own importmaps is a lot of work and prone to errors.
Perfect! I have changed the URL inside the module to point to the importmap value and it works great! I have applied that technique where I imported my custom JavaScript modules and used local URLs in each import and now I only need to modify them in 1 file (index.js).
I will keep you guys advice on using a bundler. Proably will look into that more when I’m almost done this project.