JSFiddle - React, Tailwind, and code Playground

by rocket5tim

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/ClearPass.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

var scene, renderer, composer;
var clearPass, texturePass, renderPass;
var cameraP, cubeTexturePassP;


init();
animate();


function init() {

	var width = window.innerWidth || 1;
	var height = window.innerHeight || 1;
	var aspect = width / height;
	var devicePixelRatio = window.devicePixelRatio || 1;

	renderer = new THREE.WebGLRenderer();
	renderer.setPixelRatio( devicePixelRatio );
	renderer.setSize( width, height );
	document.body.appendChild( renderer.domElement );

	//

	cameraP = new THREE.PerspectiveCamera( 65, aspect, 1, 10 );
	cameraP.position.z = 7;

	scene = new THREE.Scene();

	var group = new THREE.Group();
	scene.add( group );

	var light = new THREE.PointLight( 0xddffdd, 1.0 );
	light.position.z = 70;
	light.position.y = - 70;
	light.position.x = - 70;
	scene.add( light );

	var light2 = new THREE.PointLight( 0xffdddd, 1.0 );
	light2.position.z = 70;
	light2.position.x = - 70;
	light2.position.y = 70;
	scene.add( light2 );

	var light3 = new THREE.PointLight( 0xddddff, 1.0 );
	light3.position.z = 70;
	light3.position.x = 70;
	light3.position.y = - 70;
	scene.add( light3 );

	var geometry = new THREE.SphereBufferGeometry( 1, 48, 24 );

	var material = new THREE.MeshStandardMaterial();
	material.roughness = 0.5 * Math.random() + 0.25;
	material.metalness = 0;
	material.color.setHSL( Math.random(), 1.0, 0.3 );

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

	// postprocessing


	composer = new THREE.EffectComposer( renderer );

	clearPass = new THREE.ClearPass( 0xffffff, 1 );
	composer.addPass( clearPass );

	renderPass = new THREE.RenderPass( scene, cameraP );
	renderPass.clear = false;
	composer.addPass( renderPass );
	
	var copyPass = new THREE.ShaderPass( THREE.CopyShader );
	copyPass.renderToScreen = true;
	composer.addPass( copyPass );

	var controls = new THREE.OrbitControls( cameraP, renderer.domElement );

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

}

function onWindowResize() {

	var width =...