JSFiddle - React, Tailwind, and code Playground

by marquizzo

HTML

<div id="container">
</div>

CSS

body, html {
  background-color: #fff;
  color: #222;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#container {
  position: absolute;
  top: 0;
  width: 100%;
  bottom: 0px;
}

JavaScript

import * as THREE from 'https://cdn.rawgit.com/mrdoob/three.js/dev/build/three.module.js';

import { EffectComposer } from 'https://cdn.rawgit.com/mrdoob/three.js/master/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'https://cdn.rawgit.com/mrdoob/three.js/master/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from 'https://cdn.rawgit.com/mrdoob/three.js/master/examples/jsm/postprocessing/ShaderPass.js';
import { CopyShader } from 'https://cdn.rawgit.com/mrdoob/three.js/master/examples/jsm/shaders/CopyShader.js';
import { WEBGL } from 'https://cdn.rawgit.com/mrdoob/three.js/master/examples/jsm/WebGL.js';

if ( WEBGL.isWebGL2Available() === false ) {

	document.body.appendChild( WEBGL.getWebGL2ErrorMessage() );

}

var camera, scene, renderer, clock, group, container;

var composer1, composer2;

init();
animate();

function init() {

	container = document.getElementById( 'container' );

	camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 2000 );
	camera.position.z = 500;

	scene = new THREE.Scene();
	scene.background = new THREE.Color( 0xffffff );
	scene.fog = new THREE.Fog( 0xcccccc, 100, 1500 );

	clock = new THREE.Clock();

	//

	var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x222222, 1.5 );
	hemiLight.position.set( 1, 1, 1 );
	scene.add( hemiLight );

	//

	group = new THREE.Group();

	var geometry = new THREE.SphereBufferGeometry( 10, 64, 40 );
	var material = new THREE.MeshLambertMaterial( { color: 0xee0808 } );
	var material2 = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );

	for ( var i = 0; i < 10; i ++ ) {

		var mesh = new THREE.Mesh( geometry, material );
		mesh.position.x = Math.random() * 600 - 300;
		mesh.position.y = Math.random() * 600 - 300;
		mesh.position.z = Math.random() * 600 - 300;
		mesh.rotation.x = Math.random();
		mesh.rotation.z = Math.random();
		mesh.scale.setScalar( Math.random() * 5 + 5 );
		group.add( mesh );

		var...