JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/shaders/CopyShader.js"></script>
<script src="http://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
<script src="http://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
<script src="http://threejs.org/examples/js/postprocessing/TexturePass.js"></script>
<script src="http://threejs.org/examples/js/postprocessing/MaskPass.js"></script>
<script src="http://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>


<script type="x-shader/x-vertex" id="vertexShader1">
varying vec2 vUv;
 
void main() {
 
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 
}  
</script>
 
<script type="x-shader/x-vertex" id="fragmentShader1">
varying vec2 vUv;
 
void main() {
 
    gl_FragColor = vec4( vec3( 1,0,0 ), 1.0 );
 
}
</script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

var myTex;
var camera, scene, renderer, composer;
var mesh;

init();
animate();

function init() {
    
    renderer = new THREE.WebGLRenderer({ format: THREE.RGBAFormat, alpha: true });
    renderer.setClearColor( 0x000000, 0 ); // the default
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.z = 400;
    
    scene = new THREE.Scene();
    
    var material1 = new THREE.ShaderMaterial( {
        vertexShader: document.getElementById( 'vertexShader1' ).textContent,
        fragmentShader: document.getElementById( 'fragmentShader1' ).textContent,
        transparent: true
    } );
    
    var geometry1 = new THREE.BoxGeometry( 200, 200, 200 );
    mesh1 = new THREE.Mesh( geometry1, material1 );
    scene.add( mesh1 );  
    
    
    THREE.ImageUtils.crossOrigin = '';
    myTex = THREE.ImageUtils.loadTexture('https://upload.wikimedia.org/wikipedia/commons/9/9a/PNG_transparency_demonstration_2.png');
    
    initializeComposer();
}

function initializeComposer() {        
    var pixelRatio = renderer.getPixelRatio();
    
    var width  = Math.floor( renderer.context.canvas.width  / pixelRatio ) || 1;
    var height = Math.floor( renderer.context.canvas.height / pixelRatio ) || 1;
    var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: false , alpha: true};
    
    var renderTarget = new THREE.WebGLRenderTarget( width, height, parameters );
    
    composer = new THREE.EffectComposer(renderer, renderTarget);
    
    var renderTex = new THREE.TexturePass(myTex);
    var renderScene = new THREE.RenderPass(scene, camera);
    
    composer.addPass(renderTex);
    composer.addPass(renderScene);
    
    var effectCopy = new...