JSFiddle - React, Tailwind, and code Playground

by Konstantin Cryman

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.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/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/ShaderPass.js"></script>

CSS

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

JavaScript

var mesh, renderer, scene, camera, controls;

class Layer {
	
	constructor( camera ) {
    
		this.scene = new THREE.Scene();
		
		this.renderPass = new THREE.RenderPass( this.scene, camera );
		this.renderPass.clear = false;
		this.renderPass.clearDepth = true;
		this.renderPass.renderToScreen = true;
	}
}

init();
animate();

function init() {

	renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );
	
	composer = new THREE.EffectComposer( renderer );
	
	camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
	camera.position.set( 15, 20, 30 );
	
	controls = new THREE.OrbitControls( camera, renderer.domElement );
	controls.minDistance = 10;
	controls.maxDistance = 50;
	
	var material = new THREE.MeshPhongMaterial( { side: THREE.DoubleSide } );
	
  var layer1 = new Layer( camera );
  composer.addPass( layer1.renderPass );
  layer1.scene.add( new THREE.AmbientLight( 0xFFFFFF ) );
	var geometry = new THREE.PlaneGeometry( 10, 10, 1, 1 );
	mesh = new THREE.Mesh( geometry, material.clone() );
	mesh.material.color.set( 0xff0000 );
	layer1.scene.add( mesh );
  
	var layer2 = new Layer( camera );
  composer.addPass( layer2.renderPass );
  layer2.scene.add( new THREE.AmbientLight( 0xFFFFFF ) );
	var geometry = new THREE.PlaneGeometry( 6, 6, 1, 1 );
	mesh = new THREE.Mesh( geometry, material.clone() );
	mesh.material.color.set( 0x00ff00 );
	layer2.scene.add( mesh );
	
  var layer3 = new Layer( camera );
  composer.addPass( layer3.renderPass );
  layer3.scene.add( new THREE.AmbientLight( 0xbbbbbb ) );
	var geometry = new THREE.PlaneGeometry( 2, 2, 1, 1 );
	mesh = new THREE.Mesh( geometry, material.clone() );
	mesh.material.color.set( 0x0000ff );
	layer3.scene.add( mesh );
}

function animate() {
	requestAnimationFrame( animate );
	render();
}

function render() {
	renderer.clear();
	composer.render();
}