JSFiddle - React, Tailwind, and code Playground

by Horsetopus

HTML

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

CSS

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

JavaScript

var renderer, composer;

var scene, camera;
var cubeTexture, cubeMaterial, cubeGeometry, cube;


camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
	
scene = new THREE.Scene();
scene.add( new THREE.AmbientLight( 0xFFFFFF ) );
	
THREE.ImageUtils.crossOrigin = '';
cubeTexture = THREE.ImageUtils.loadTexture( "https://threejs.org/examples/textures/crate.gif" );
cubeMaterial = new THREE.MeshBasicMaterial( { map:cubeTexture } );
cubeGeometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
cube.position.z = -500;
scene.add( cube );

renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( 0xe0e0e0 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.autoClear = false;
document.body.appendChild( renderer.domElement );

var parameters = {
  minFilter: THREE.LinearFilter,
  magFilter: THREE.LinearFilter,
  format: THREE.RGBFormat,
  stencilBuffer: true
};

var renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, parameters );

let composer = new THREE.EffectComposer( renderer, renderTarget );

var clearPass = new THREE.ClearPass();
composer.addPass( clearPass );

var renderPass = new THREE.RenderPass( scene, camera );
composer.addPass( renderPass );

var outputPass = new THREE.ShaderPass( THREE.CopyShader );
outputPass.renderToScreen = true;
composer.addPass( outputPass );



window.onresize = onResize;
onResize();
render();