JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r66/three.min.js"></script>
</html>
<script>
	var cameraFov = 75;

	init();
	animate();

	function init()
	{
		container = document.createElement('div');
		document.body.appendChild(container);

		cameraFar = 1200;
		camera = new THREE.PerspectiveCamera( cameraFov, window.innerWidth / window.innerHeight, 1, cameraFar );
		camera.position.z = cameraFar;

		scene = new THREE.Scene();

        hNear = 2 * Math.tan(camera.fov / 2) * camera.near; // height
        wNear = hNear * camera.aspect; // width

        // Far Plane dimensions
        hFar = 2 * Math.tan(camera.fov / 2) * camera.far; // height
        wFar = hFar * camera.aspect; // width

		var farTopLeft = new THREE.Vector3( wFar / 2, hFar / 2, -camera.far );
		var farBottomRight = new THREE.Vector3( -wFar / 2, -hFar / 2, -camera.far );
		var farTopRight = new THREE.Vector3( -wFar / 2, hFar / 2, -camera.far );
		var farBottomLeft = new THREE.Vector3( wFar / 2, -hFar / 2, -camera.far );

		var nearTopLeft = new THREE.Vector3( wNear / 2, hNear / 2, -camera.near );
		var nearBottomRight = new THREE.Vector3( -wNear / 2, -hNear / 2, -camera.near );
		var nearTopRight = new THREE.Vector3(-wNear / 2, hNear / 2, -camera.near);
		var nearBottomLeft = new THREE.Vector3( wNear / 2, -hNear / 2, -camera.near);

		// adjust the vectors to the camera location and direction
		camera.updateMatrixWorld();
		farTopLeft.applyMatrix4( camera.matrixWorld );
		farBottomRight.applyMatrix4( camera.matrixWorld );
		farTopRight.applyMatrix4(camera.matrixWorld);
		farBottomLeft.applyMatrix4(camera.matrixWorld);

		nearTopLeft.applyMatrix4( camera.matrixWorld );
		nearBottomRight.applyMatrix4( camera.matrixWorld );
		nearTopRight.applyMatrix4(camera.matrixWorld);
		nearBottomLeft.applyMatrix4(camera.matrixWorld);

		var z = 1;
		var farParticles = new THREE.Geometry();
		farParticles.vertices.push(new THREE.Vector3(farTopLeft.x, farTopLeft.y,...