JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

</div>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
THREE.Reflector = function ( geometry, options ) {

	THREE.Mesh.call( this, geometry );

	this.type = 'Reflector';

	var scope = this;

	options = options || {};

	var color = ( options.color !== undefined ) ? new THREE.Color( options.color ) : new THREE.Color( 0x7F7F7F );
	var textureWidth = options.textureWidth || 512;
	var textureHeight = options.textureHeight || 512;
	var clipBias = options.clipBias || 0;
	var shader = options.shader || THREE.Reflector.ReflectorShader;

	//

	var reflectorPlane = new THREE.Plane();
	var normal = new THREE.Vector3();
	var reflectorWorldPosition = 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 viewport = new THREE.Vector4();

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

	var textureMatrix = new THREE.Matrix4();
	var virtualCamera = 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 material = new THREE.ShaderMaterial( {
		uniforms: THREE.UniformsUtils.clone( shader.uniforms ),
		fragmentShader: shader.fragmentShader,
		vertexShader: shader.vertexShader
	} );

	material.uniforms.tDiffuse.value = renderTarget.texture;
	material.uniforms.color.value = color;
	material.uniforms.textureMatrix.value = textureMatrix;

	this.material = material;
	this.renderOrder = - Infinity; //...

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 geometry = new THREE.PlaneBufferGeometry( 100, 100 );
	var verticalMirror = new THREE.Reflector( geometry, {
		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 geometry1 = new THREE.PlaneBufferGeometry( 100, 100 );
	var verticalMirror1 = new THREE.Reflector( geometry1, {
		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...