Screen Space Refraction

Hello there, I’m trying to replicate the screen space refraction exampe from three.js examples but can’t seem to properly import the SSR module, see my code here: Glitch :・゚✧ any help would be appreciated

You have some runtime errors in your glitch. Always inspect the browser console to avoid such obvious issues.

Uncaught ReferenceError: EffectComposer is not defined

When you import EffectComposer as a global script, you can only access it over the THREE namespace. So you need this:

composer = new THREE.EffectComposer(renderer);

You also don’t have dependent modules like CopyShader or ShaderPass imported in your app.

Probably better to use a ES6 module workflow like in the official examples to avoid these issue altogether.

When I do: “composer = new THREE.EffectComposer(renderer);” it says “THREE.EffectComposer is not a constructor” , what does this mean?

SSRrPass.js only has jsm ( es6 module, <script type="module"> ) version now,
so please all use jsm first, like in the example.

Next Three.js release ( at the end of this month ) will has js version.

when I use <script type="module"> it says “Loading module from “https://shange-fagan.neocities.org/shaders/SSRShader.js” was blocked because of a disallowed MIME type (“text/html”)” what does this mean?

Seems https://shange-fagan.neocities.org/shaders/SSRShader.js is broken.

I’m not familiar with three.js cdn, please try https://cdn.skypack.dev/three@0.127.0/examples/jsm/postprocessing/SSRrPass?min ,
and the setup in this demo https://codepen.io/ycw/pen/jOyyGGX
image

now it says “Uncaught ReferenceError: EffectComposer is not defined”