postprocessing
postprocessing copied to clipboard
pmndrs
I don't understand how to import postprocessing
Hi, I did a npm install, then read the readme file, imported { WebGLRenderer } from "three"; but I don't understand how to import postprocessing I tried these ways and got errors :
import { BloomEffect, EffectPass, RenderPass, GodRaysEffect } from "../postprocessing/build/postprocessing.min.js";
error : Uncaught SyntaxError: The requested module '../postprocessing/build/postprocessing.min.js' does not provide an export named 'BloomEffect' (at warp2.js:15:10)
import { BloomEffect, EffectPass, RenderPass, GodRaysEffect } from "postprocessing";
error : Uncaught TypeError: Failed to resolve module specifier "postprocessing". Relative references must start with either "/", "./", or "../".
import { BloomEffect, EffectComposer, EffectPass, RenderPass } from "../postprocessing";
error: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
<script src="postprocessing/build/postprocessing.min.js"></script>
error : postprocessing.min.js:17 Uncaught TypeError: Cannot read properties of undefined (reading 'ShaderMaterial')
at postprocessing.min.js:17:300
at postprocessing.min.js:714:4271
Thanks
Are you using JS or Typescript? The second one should work regardless ,unless you have some conflicting configuration in your build system / import map.
I use JS, my three scene work if I don't import postprocessing. I put postprocessing folder in the node_modules folder, then add lines to my package_lock.json
my html:
<body>
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "./three/build/three.module.js"
}
}
</script>
<script src="js/warp2.js" type="module"></script>
</body>
And I try to import postprocessing inside my warp2.js file
@Turtleted21 Please refer to https://github.com/pmndrs/postprocessing/wiki/Build-Setup or provide information about your entire build setup.
I put postprocessing folder in the node_modules folder, then add lines to my package_lock.json
These files/folders should never be changed manually.
For future reference, if this happens to anybody else, try importing postprocessing/build/index.js (as opposed to postprocessing/build/postprocessing.min.js).
