JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/PointerLockControls.js"></script>
<script src="https://threejs.org/examples/js/controls/FirstPersonControls.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;
  height: 100%;
  top: 0; bottom: 0; left: 0; right: 0;
}

#output {
  position: absolute;
  width:100%;
  height:100%;
  top: 0px;
  z-index: 10;
  color: #FFFFFF;
  padding:20px;
}

JavaScript

var renderer1, renderer2, renderPass1, renderPass2, scene3D, scene2D, camera;
var testCamera, cameraHelper, plan, orbit1, orbit2, cube, arrow, arrowInMaterial, arrowOutMaterial;
var start;
var output;

function init() {
  
	
	renderer1 = new THREE.WebGLRenderer( { alpha: false, antialias: true } );
	renderer1.setSize( window.innerWidth, window.innerHeight / 2 );
	document.body.appendChild( renderer1.domElement );
  
  renderer2 = new THREE.WebGLRenderer( { alpha: false, antialias: true } );
	renderer2.setSize( window.innerWidth, window.innerHeight / 2 );
	document.body.appendChild( renderer2.domElement );
  
	composer = new THREE.EffectComposer( renderer2 );
  
  scene3D = new THREE.Scene();
	
  
  camera = new THREE.PerspectiveCamera( 40, window.innerWidth / ( window.innerHeight / 2 ), 1, 1000 );
  camera.position.set( 20, 15, 15 );
  camera.up.set( 0, 1, 0 );
  camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );
  
  
	testCamera = new THREE.PerspectiveCamera( 40, window.innerWidth / ( window.innerHeight / 2 ), 1, 1000 );
  
  renderPass1 = new THREE.RenderPass( scene3D, testCamera );
	renderPass1.clear = false;
	renderPass1.renderToScreen = true;
  composer.addPass( renderPass1 );
  
  cameraHelper = new THREE.CameraHelper( testCamera );
  scene3D.add( cameraHelper );
                                                        
  plan = new THREE.Mesh( new THREE.PlaneGeometry( 25, 15, 1, 1 ),
                         new THREE.MeshBasicMaterial( { transparent: true,
                         																opacity: 0.4,
                                                        color: 0xFFFFFF,
                                                        side: THREE.DoubleSide } ) );
  scene3D.add( plan );
  
  orbit1 = new THREE.Object3D();
  scene3D.add( orbit1 );
  
  orbit2 = new THREE.Object3D();
  orbit1.add( orbit2 );
  
  cube = new THREE.Mesh( new THREE.CubeGeometry( 1, 1, 1, 1, 1, 1 ),
                         new THREE.MeshBasicMaterial( { color: 0xFF0000 } ) );
 ...