JSFiddle - React, Tailwind, and code Playground

by gallantfox

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.min.js"></script>

JavaScript

var stats;
			var camera, scene, renderer;
			// stores clickable sortObjects
			var objects = [];

			var raycaster = new THREE.Raycaster();
			var targetList = [];
			var mouse = new THREE.Vector2(),
			//var projector, mouse = { x: 0, y: 0 },
			offset = new THREE.Vector3(),
			INTERSECTED, SELECTED;

			//////////////////
			// MY VARIABLES //
			//////////////////

			// homepage variables
			var world = 'HOME';
			var container;

			// these are probably unnecessary?
			var zTarget = 0;
			var xTarget = 0;
			//var yTarget;
			var zoom = false;
			//var zoomTolerance = 2500;
			//var zoomSpeed = 1000;/**/
			var nextWorld = null;

			var hover; //tells us what the last hovertext was

			// timeline variables
			// TODO: dynamically get number of datapoints in database
			var numNodes = 10;
			// scales timeline size relative to screen
			var maxLength = screen.width;
			var maxHeight = screen.width*.2;
			var cubeSize = screen.width*.025;
			
			// text generation
			// sets size of canvas for the dates
			var textWidth = 2048;
			var textHeight = 256;

			var imgScale = cubeSize * 10;
			// dates range for events in quantum
			var dateStart = 1980;
			var dateNow = 2015;

			var video,videoImage,videoImageContext;

			init();
			animate();

			function init() {

				scene = new THREE.Scene();
				scene.fog = new THREE.FogExp2( 0xEDEEEF, 0.0003 );
				
				renderer = new THREE.WebGLRenderer({antialias: true});
				//renderer = new THREE.CanvasRenderer();
				renderer.setClearColor( scene.fog.color );
				//renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );

				renderer.sortObjects = false;

				//renderer.shadowMap.enabled = true;
				//renderer.shadowMap.type = THREE.PCFShadowMap;

        document.body.appendChild(renderer.domElement);

				renderer.gammaInput = true;
				renderer.gammaOutput = true;
				
        //////////////
				// LIGHTING //
				//////////////

				var light = new...