JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>3d Model using HTML5 and three.js</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                font-family: Monospace;
                background-color: #f0f0f0;
                margin: 0px;
                overflow: hidden;                
            }
            #info {
                color:#000;
                position: absolute;
                top: 0px; left: 200px;
                width: 100%;
                padding: 5px;
            }
        </style>
    </head>
    <body>    
        <div id="container"></div>        
        <div style="margin-top:10px;margin-left:3%;height:100px;width:70%">
      <label style="color:#b0bb02;font-size:14pt">three.js</label>
      <label style="color:#f5f7f9;font-size:14pt;font-weight:bold">Tube Geometry</label><br><br>               
    </div>                    
    </body>
</html>

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, 
          ...