JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://raw.github.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>

<div id="container"></div>        
<div id="info">            
  <!-- WASD-move, RF-up/down, QE-roll,    mouse-look around, mouse left/right click- zoom-in/out  -->
  drag mouse to rotate camera. scroll to zoom. 
</div>

CSS

body {
     font-family: Monospace;
     background-color: #f0f0f0;
     margin: 0px;
     overflow: hidden;                
 }
 #info {
     color:#000;
     position: absolute;
     top: 0px; left: 200px;
     width: 100%;
     padding: 5px;
 }

JavaScript

// variables
var container, stats, text;

var camera, scene, renderer, controls, axis;

var text, plane, tube, tubeMesh, parent, particle, geometry;

var targetRotation = 0;
var targetRotationX = 0;
var targetRotationY = 0;
var targetRotationOnMouseDown = 0;

var mouseX = 0,
    mouseY = 0;
var radius = 6371;
var mouseXOnMouseDown = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

var clock = new THREE.Clock();
var objects = [];

var rotWorldMatrix;
var extrudePath;
var radious = 7000,
    theta = 45,
    phi = 60,
    onMouseDownTheta = 45,
    onMouseDownPhi = 60,
    isMouseDown = false,
    onMouseDownPosition, mouse3D;
var dummy;
var matrix = new THREE.Matrix4();
var fov;
var zoomFactor = 15;

function plotPath() {
    var segments = 4;
    var closed = false;
    var debug = false;
    var radiusSegments = 12;
    var tube;
    var x = 0,
        y = 0,
        z = 0;
    var vertices = [];

    var points = [new THREE.Vector3(3, -1.9, -4.8), new THREE.Vector3(361.2, -1.9, -4.8),
                                  new THREE.Vector3(378, -1.97, -4.85), new THREE.Vector3(386, -2.02, -4.89)];

    extrudePath = new THREE.SplineCurve3(points);
    extrudePath.dynamic = true;

    tube = new THREE.TubeGeometry(extrudePath, segments, 60, radiusSegments, closed, debug);
    tube.dynamic = true;
    tube.verticesNeedUpdate = true;

    tubeMesh = new THREE.Mesh(tube, new THREE.MeshBasicMaterial({
        color: 0xffffff,
        shading: THREE.FlatShading,
        side: THREE.DoubleSide,
        wireframe: false,
        transparent: false,
        vertexColors: THREE.FaceColors, // CHANGED
        overdraw: true
    }));

    tubeMesh.dynamic = true;
    tubeMesh.needsUpdate = true;

    var lineGeo, lineMat, line;
    var fx = tube.faces[3].centroid.x;
    var fy = tube.faces[3].centroid.y;
    var fz = tube.faces[3].centroid.z;
    lineGeo = new THREE.Geometry();
    lineGeo.vertices.push(new THREE.Vector3(fx, fy, fz), new...