JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://mrdoob.github.com/three.js/build/three.min.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/shaders/CopyShader.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/shaders/SSAOShader.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/shaders/FXAAShader.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/shaders/HorizontalTiltShiftShader.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/shaders/VerticalTiltShiftShader.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/shaders/BrightnessContrastShader.js"></script>

<script src="http://mrdoob.github.com/three.js/examples/js/postprocessing/EffectComposer.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/postprocessing/RenderPass.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/postprocessing/MaskPass.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/postprocessing/ShaderPass.js"></script>

CSS

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    background: #fff;
}

JavaScript

var renderTargetParameters, renderTarget, renderBackground, renderModel, clearMask, renderMask, depthMaterial, depthTarget, composer;
var container, camera, bgScene, fgScene, renderer;

init();
initSSAO();
addObjects();
animate();

function initSSAO() {
    
    // Depth
        
    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;

    // Post-processing
    
	// create a custom render target with a stencil buffer
	// the stencil buffer allows for masking to take place
	renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: true };
	renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, renderTargetParameters );
	composer = new THREE.EffectComposer( renderer, renderTarget );
    
    // add both foreground and background rendering to the composer
    renderBackground = new THREE.RenderPass( bgScene, camera );
	renderModel = new THREE.RenderPass( fgScene, camera );
    // set clear to false while rendering the model to preserve buffer data
	// the information in the stencil buffer is used for the masking pass
	renderModel.clear = false;
    
    clearMask = new THREE.ClearMaskPass();
	renderMask = new THREE.MaskPass( fgScene, camera );

    depthTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat } );

    var ssaoPass = new THREE.ShaderPass( THREE.SSAOShader );
    ssaoPass.uniforms[ 'tDepth' ].value = depthTarget;
    ssaoPass.uniforms[ 'size' ].value.set( window.innerWidth, window.innerHeight );
    ssaoPass.uniforms[ 'cameraNear' ].value = camera.near;
   ...