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/controls/OrbitControls.js"></script>
<script src="https://mrdoob.github.com/three.js/examples/js/shaders/CopyShader.js"></script>
<script src="https://mrdoob.github.com/three.js/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://mrdoob.github.com/three.js/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://mrdoob.github.com/three.js/examples/js/postprocessing/ShaderPass.js"></script>

CSS

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

JavaScript

var renderer, scene, camera, controls;

function addCube( x, y, z, color) {
	
	var cube = new THREE.Mesh( new THREE.CubeGeometry( 1, 1, 1, 1, 1, 1 ), new THREE.MeshBasicMaterial( { color: color } ) );
  cube.position.set( x, y, z );
  scene.add( cube );
}

function init() {

	renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );
	
	composer = new THREE.EffectComposer( renderer );
  
  perspectiveScene = new THREE.Scene();
	
	perspectiveCamera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
	
	controls = new THREE.OritControls( camera, renderer.domElement );
	controls.minDistance = 1;
	controls.maxDistance = 1;
  
  addCube( 10, 0, 0, 0xFF0000 );
  
  addCube( 0, 10, 0, 0x00FF00 );
  
  addCube( 0, 0, 10, 0x0000FF );
}

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

function render() {
	renderer.render( scene, camera );
}

init();
animate();