JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

</div>
<script src="https://raw.githack.com/mrdoob/three.js/ff961a729822f17376ddcd931a6310711e2a5137/build/three.js"></script>
<script src="https://raw.githack.com/mrdoob/three.js/ff961a729822f17376ddcd931a6310711e2a5137/examples/js/controls/OrbitControls.js"></script>
<script>
/**
 * @author Slayvin / http://slayvin.net
 */

THREE.Mirror = function ( width, height, options ) {

	THREE.Mesh.call( this, new THREE.PlaneBufferGeometry( width, height ) );

	var scope = this;

	scope.name = 'mirror_' + scope.id;
	scope.matrixNeedsUpdate = true;

	options = options || {};

	var viewport = new THREE.Vector4();

	var textureWidth = options.textureWidth !== undefined ? options.textureWidth : 512;
	var textureHeight = options.textureHeight !== undefined ? options.textureHeight : 512;

	var clipBias = options.clipBias !== undefined ? options.clipBias : 0.0;
	var mirrorColor = options.color !== undefined ? new THREE.Color( options.color ) : new THREE.Color( 0x7F7F7F );

	var recursion = options.recursion !== undefined ? options.recursion : 0;

	//

	var mirrorPlane = new THREE.Plane();
	var normal = new THREE.Vector3();
	var mirrorWorldPosition = new THREE.Vector3();
	var cameraWorldPosition = new THREE.Vector3();
	var rotationMatrix = new THREE.Matrix4();
	var lookAtPosition = new THREE.Vector3( 0, 0, - 1 );
	var clipPlane = new THREE.Vector4();

	var view = new THREE.Vector3();
	var target = new THREE.Vector3();
	var q = new THREE.Vector4();

	var textureMatrix = new THREE.Matrix4();

	var mirrorCamera = new THREE.PerspectiveCamera();

	var parameters = {
		minFilter: THREE.LinearFilter,
		magFilter: THREE.LinearFilter,
		format: THREE.RGBFormat,
		stencilBuffer: false
	};

	var renderTarget = new THREE.WebGLRenderTarget( textureWidth, textureHeight, parameters );

	if ( ! THREE.Math.isPowerOfTwo( textureWidth ) || ! THREE.Math.isPowerOfTwo( textureHeight ) ) {

		renderTarget.texture.generateMipmaps = false;

	}

	var mirrorShader = {

		uniforms:...

CSS

body {
	  margin: 0;
}

JavaScript

// scene size
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;

// camera
var VIEW_ANGLE = 45;
var ASPECT = WIDTH / HEIGHT;
var NEAR = 1;
var FAR = 500;

var camera, scene, renderer;

var cameraControls;

var sphereGroup, smallSphere;

init();
animate();

function init() {

	var container = document.getElementById( 'container' );

	// renderer
	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( WIDTH, HEIGHT );
	container.appendChild( renderer.domElement );

	// scene
	scene = new THREE.Scene();

	// camera
	camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
	camera.position.set( 0, 75, 160 );

	cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
	cameraControls.target.set( 0, 40, 0 );
	cameraControls.maxDistance = 400;
	cameraControls.minDistance = 10;
	cameraControls.update();

	var planeGeo = new THREE.PlaneBufferGeometry( 100.1, 100.1 );

	// reflectors/mirrors

	var verticalMirror = new THREE.Mirror( 100, 100, {
		clipBias: 0.003,
		textureWidth: WIDTH * window.devicePixelRatio,
		textureHeight: HEIGHT * window.devicePixelRatio,
		color: 0x889999,
		recursion: 10
	} );
	verticalMirror.position.y = 50;
	verticalMirror.position.z = -50;
	scene.add( verticalMirror );

	var verticalMirror1 = new THREE.Mirror( 100, 100, {
		clipBias: 0.003,
		textureWidth: WIDTH * window.devicePixelRatio,
		textureHeight: HEIGHT * window.devicePixelRatio,
		color: 0x889999,
		recursion: 10
	} );
	verticalMirror1.position.y = 50;
	verticalMirror1.position.z = 50;
	verticalMirror1.rotateY( Math.PI );
	scene.add( verticalMirror1 );

	sphereGroup = new THREE.Object3D();
	scene.add( sphereGroup );

	var geometry = new THREE.CylinderBufferGeometry( 0.1, 15 * Math.cos( Math.PI / 180 * 30 ), 0.1, 24, 1 );
	var material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x444444 } );
	var sphereCap = new THREE.Mesh( geometry, material...