JSFiddle - React, Tailwind, and code Playground

by grano

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/shaders/CopyShader.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/shaders/BlendShader.js"></script>

<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/EffectComposer.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/ShaderPass.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/RenderPass.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/SavePass.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

var camera, scene, renderer, mesh;

var composer;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;

    scene = new THREE.Scene();

    var geometry = new THREE.BoxBufferGeometry( 0.2, 0.2, 0.2 );
    var material = new THREE.MeshNormalMaterial();

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
		
		// post processing starts here
		
		composer = new THREE.EffectComposer( renderer );
		
		// render pass
		
		var renderPass = new THREE.RenderPass( scene, camera )
				
		// save pass
		
		var renderTargetParameters = {
			minFilter: THREE.LinearFilter,
			magFilter: THREE.LinearFilter,
			stencilBuffer: false
		};
		
		var savePass = new THREE.SavePass( new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, renderTargetParameters ) );

		// blend pass

		var blendPass = new THREE.ShaderPass( THREE.BlendShader, 'tDiffuse1' );
		blendPass.uniforms[ 'tDiffuse2' ].value = savePass.renderTarget.texture;
		blendPass.uniforms[ 'mixRatio' ].value = 0.65;
		
		// output pass
		
		var outputPass = new THREE.ShaderPass( THREE.CopyShader );
		outputPass.renderToScreen = true;
		
		// setup pass chain
		
		composer.addPass( renderPass );
		composer.addPass( blendPass );
		composer.addPass( savePass );
		composer.addPass( outputPass );
		
		//

		window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {
				
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		
		renderer.setSize( window.innerWidth, window.innerHeight );
		composer.setSize( window.innerWidth, window.innerHeight );
		
}

function animate() {

    requestAnimationFrame( animate );

    mesh.rotation.x += 1;
   ...