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 src="http://threejs.org/examples/js/shaders/SSAOShader.js"></script>

<script type="x-shader/x-vertex" id="vertexShader1">
    //varying vec2 vUv;  // changed -----------
 
void main() {
 
    // vUv = uv;  // changed -----------
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 
}  
</script>
 
<script type="x-shader/x-vertex" id="fragmentShader1">
    //varying vec2 vUv;  // changed -----------
 
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;
var depthMaterial, depthTarget;

init();
animate();

function init() {
    
    renderer = new THREE.WebGLRenderer(); // changed -----------------------
    renderer.setClearColor( 0x000000, 1 ); // changed ----------------------
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );

    renderer.autoClearColor = false; // moved this line ---------------

    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: false // changed -------------------------------------
    } );
    
    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'); // this is not a power of two texture ---------
    
    
    
    var depthShader = THREE.ShaderLib[ "depthRGBA" ];
    var depthUniforms = THREE.UniformsUtils.clone( depthShader.uniforms );
    depthMaterial = new THREE.ShaderMaterial( { fragmentShader: depthShader.fragmentShader, vertexShader: depthShader.vertexShader, uniforms: depthUniforms } );
	depthMaterial.blending = THREE.NoBlending;
    
    depthTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat } );
				
    
    initializeComposer();
}

function initializeComposer() {        
    var...