JSFiddle - React, Tailwind, and code Playground

by navinleon

HTML

<script src="http://beulu.com/last/js/webgl-debug.js"></script>
<body>
<div id="webgl">
<div>
<button >
Animate
</button>
</div>
  <div id="global-ui">
    <div id="gui"></div>
    <div id="buttons-wrapper">
      <div id="buttons">
        <!-- <button type="button" id="startButtonId" class="btn btn-primary" tabindex="13">Start</button>
        <button type="button" id="resetButtonId" class="btn btn-default" tabindex="14">Reset</button>
        -->
      </div>
    </div>
  </div>
  <div id="zoomContainer"></div> 
</div>

	<!-- <script src="js/helvetiker_regular.typeface.js"></script> -->
	<script src="https://dournac.org/webgl_test/webgl-debug.js"></script>
	<script src="https://dournac.org/webgl_test/three.min.js"></script>
	<script src="https://dournac.org/webgl_test/Detector.js"></script>		
	<script src="https://dournac.org/webgl_test/TrackballControls.js"></script>		
	<script src="https://dournac.org/webgl_test/OrbitControls.js"></script>		
	<!-- <script src="js/DAT.GUI.min.js"></script> -->
	<script src="https://dournac.org/webgl_test/dat.gui.js"></script>		 
</body>

CSS

<link rel="stylesheet" type="text/css" href="./css/bootstrap_custom.css"> 
  <style>

		@font-face {
		font-family: 'inconsolata';
		src: url('../files/inconsolata.woff') format('woff');
		font-weight: normal;
		font-style: normal;
	        }

		body { margin: 0; overflow: hidden; background-color: #000; }
		.tm  { position: absolute; top: 10px; right: 10px; }
		.webgl-error { font: 15px/30px monospace; text-align: center; color: #FFF; margin: 50px; }
		.webgl-error a { color: #FFF; }
								
  #zoomContainer  {
	  width: 300px;
	  height: 300px;
	  background-color: #000000; 		
	  border: 2px solid #428bca;
	  margin: 20px;
	  padding: 0;
	  position: absolute;
	  right: 0;
	  bottom: 0;
	  z-index: 100;
	  display: none;
	}
	
  #global-ui {
	  position: relative;
	}
	
  #gui {
	  position: absolute;
	  width: 350px;
	  top: 0;
	  right: 0;
	  margin: 20px;
	  padding: 0;
	  overflow: hidden;
	  /*border: 2px solid #428bca;
	  */
	}
	
  #buttons-wrapper {
	  position: absolute;
	  top: 265px;
	  right: 0;
	  margin: 20px;
	  padding: 0;
	}
	
  #buttons {
	  margin-left: auto;
	  margin-right: auto;
          text-align: center;
	}

    </style>

JavaScript

// Covariant Derivative simulation - Global variables
var zoomContainer,
    camera,
    scene,    
    renderer,
    dot,
    plane,
    textMaterial,
    meshText,
    torus,
    coordTorus,
    coordCamera,		
    radiusCamera = 150,
    sphere,
    originTransportedVector,
    directionTransportedVector,
    transportedVector,
    zoomCamera,
    zoomScene,
    zoomRenderer,
    zoomWidth = 300,
    zoomHeight = 300,
    zoomCameraDistance = 200,
    controllerRotationx,
    controllerRotationy,
    controllerRotationz,
    controllerComponentVectorTheta,
    controllerComponentVectorPhi,
    controllerComponentCovariantDerivativeTheta,
    controllerComponentCovariantDerivativePhi,
    planeThetaComponent,
    planePhiComponent;

// Boolean for start and restart
var runAnim = true;
var isPlay = false;

// Boolean for rotating on Oy before changing components of transported vector
var rotatingOzBefore = false;

// Main WegGL container
var mainContainer = document.getElementById('webgl');
var ctx = WebGLDebugUtils.makeDebugContext();

if (!Detector.webgl) {
  Detector.addGetWebGLMessage(mainContainer);
}

// Width and Height of WebGL window
var width = window.innerWidth,
    height = window.innerHeight;

// Width line for torus line and transported vector
var widthLine = 1.1;

var radius = 50 - 2*widthLine,
    segments = 100,
    rotation = 6;

// Init for drawing great circle on sphere
var torusRotationInitX = Math.PI/2;
var torusRotationInitY = 0.0; 
var torusRotationInitZ = 0.0; 

// Create GUI
var gui = new dat.GUI({
  autoplace: false, 
  width: 350,
  height: 9 * 32 - 1
});

var params = {
  GreatCircle : '',
  Rotationx : torusRotationInitX,
  Rotationy : torusRotationInitY,
  Rotationz : torusRotationInitZ
};

// Set parameters for GUI
gui.add(params, 'GreatCircle').name('Great Circle ');
controllerRotationx = gui.add(params, 'Rotationx', 0.0, Math.PI-0.01, 0.001).name('Rotation x ');
controllerRotationy = gui.add(params, 'Rotationy', 0.0,...