JSFiddle - React, Tailwind, and code Playground

by Arturo Soto

HTML

<html lang="en">
	<head>
		<title>three.js webgl - equirectangular panorama</title>
    <link rel='stylesheet' id='krown-font-head-css'  href='http://fonts.googleapis.com/css?family=Raleway%3A300%2C400%2C400italic%2C500%2C600%2C700%2C700%2C800&#038;ver=4.8.6' type='text/css' media='all' />
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	</head>
	<body>
    <script src="https://threejs.org/build/three.min.js"></script>
		<div id="container"></div>
    </body>
</html>

CSS

body {
				background-color: transparent;
				margin: 0px;
				overflow: hidden;
			}
			#info {
				position: absolute;
				top: 0px; width: 100%;height:56px;
				color: #000;
				padding: 5px;
				font-family:'Arial';
				font-size:20px;
				font-weight: bold;
				text-align:center;
        background-color:#ccc;
        color:#de2c2e;
			}
      #info img {
        position:absolute;
        left:0;
      }
			.pano-side {
				position: absolute;
				top: 56px; width: 120px;height:calc(100% - 56px);
				color: #000;
				padding: 5px;
				font-family:'Arial';
				font-size:13px;
				font-weight: bold;
				text-align:center;
        background-color:#ccc;
			}
      .pano-side > ul {
        list-style:none;margin:0;padding:0
      }
      .pano-side > ul > li:hover a {
        color:#fff;
      }
      .pano-side > ul > li + li {
        border-top:1px solid #aaa;
      }
      .pano-side > ul > li:hover {
        background-color:#de2c2e;
        color:#fff;
      }
      .pano-side > ul > li a {
        display:block;
        text-decoration:none;        
        padding:8px;
      }
			a {
				color: #000;
			}
      
      .visit-showroom-header > .drop-vip-msg {
        display:none;
        width:300px;height:300px;
        border:1px solid #ddd;
        background-color:#eee;
        border-radius:4px;
        position:relative;
        left:calc(50% - 100px);
        font-size:13px;
      }
    
      .visit-showroom-header:hover .drop-vip-msg {
        display:block;
      }

JavaScript

var mouse = new THREE.Vector2();
var camera, scene, renderer, raycaster, object, buttonMaterial, buttonMaterialHover;
var buttonPositionList = [];
			var isUserInteracting = false,
			onMouseDownMouseX = 0, onMouseDownMouseY = 0,
			lon = 0, onMouseDownLon = 0,
			lat = 0, onMouseDownLat = 0,
			phi = 0, theta = 0;
			init();
			animate();
			function init() {
				var container, mesh;
				container = document.getElementById( 'container' );
				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
				camera.target = new THREE.Vector3( 0, 10, 3 );
				scene = new THREE.Scene();
        
        object = new THREE.Object3D();
        var lineMtr = new THREE.LineBasicMaterial({ color: 0xffffff, linewidth: 3, opacity: 1 });
        var geo = new THREE.Geometry();
        geo.vertices.push(new THREE.Vector3(0, 10 ,3));
        geo.vertices.push(new THREE.Vector3(0, 0 ,3));
        //geo.computeLineDistances();
        var line = new THREE.Line(geo, lineMtr);
        var i = 0, l = 10;
        object.add(line);
        while (i <= l) {
            var geoSegm = new THREE.Geometry();
            geoSegm.vertices.push(new THREE.Vector3(0.1, i, 3));
            geoSegm.vertices.push(new THREE.Vector3(0, i, 3));
            //geoSegm.computeLineDistances();
            var lineSegm = new THREE.Line(geoSegm, lineMtr);
        		object.add(lineSegm);
            var textSprite = makeTextSprite((i * 10).toString(), {r: 255, g: 255, b: 255, a: 255}, new THREE.Vector3(0.2, i, 3), Math.PI);
            object.add(textSprite);
        	i++;
        }
        
        var textureLoader = new THREE.TextureLoader();
        var buttonTexture = textureLoader.load('https://image.ibb.co/iO080S/down_arrow.png', function(response) {  });
        raycaster = new THREE.Raycaster();
        buttonMaterial = new THREE.SpriteMaterial( { map: buttonTexture, color: 0x0000ff } );
        buttonMaterialHover = new THREE.SpriteMaterial( { map: buttonTexture,...