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

let camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
	
let scene = new THREE.Scene();
scene.add( new THREE.AmbientLight( 0xFFFFFF ) );
	
THREE.ImageUtils.crossOrigin = '';
let texture = THREE.ImageUtils.loadTexture( "https://threejs.org/examples/textures/crate.gif" );
let material = new THREE.MeshBasicMaterial( { map:cubeTexture } );
let geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
let 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 );



function onResize( e ) {
	
	renderer.setSize( window.innerWidth, window.innerHeight );
  
  perspectiveCamera.aspect = window.innerWidth / window.innerHeight;
  perspectiveCamera.updateProjectionMatrix();
  
  orthogonalCamera.right = window.innerWidth;
  orthogonalCamera.bottom = -window.innerHeight;
  orthogonalCamera.updateProjectionMatrix();
  
  frame.position.set( ( window.innerWidth / 2 ) - 150, -( window.innerHeight / 2 ) - 150, 0 );
}

function render() {
	
	cube.rotation.x += 0.01;
  cube.rotation.z += 0.02;
	
  renderer.clear();
	composer.render();
  
  requestAnimationFrame( render );
}



window.onresize =...