JSFiddle - React, Tailwind, and code Playground

HTML

<video id="videoTexture" src="http://lab.pre.rtve.es/teatro-real/media/video/patios/video2.mp4"} autoplay="true" >
</video>

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

html {
      width: 100%;
    height: 100%;
}

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
  
      width: 100%;
    height: 100%;
}

#videoTexture {
  display: none;
}

Babel + JSX

// Simple three.js example

//scene related variables
var mesh, renderer, scene, camera, controls, fullSphereGeometry, partSphereGeometry, vertShader, fragShader, tex1, tex2, material_shh, material2, pano, pano2, videoImageContext, videoImage, textureVideo, textureVideoPre, loaderTexture, uniforms, raycaster, marker;

//Mouse related variables
var lon, onMouseDownMouseX, onMouseDownLon, lat, onMouseDownMouseY, onMouseDownLat, mouse, qRaycast, isUserInteracting, timeStampClick, actualIntersect, lastRaycast, raycastInterval;

var videoTextures = [];
var textures = [];
var indicatorHotspotPlane = [];

var videoTexture = {
	'video':{
    'imageURL': "http://lab.pre.rtve.es/teatro-real/media/video/patios/video2.mp4", 
    'imageURLMobile': "http://lab.pre.rtve.es/teatro-real/media/video/patios/video2Mobile.mp4", 
    'type': 'video',
    'patio':'lampara',
    'nextSrc': "http://lab.pre.rtve.es/teatro-real/media/video/patios/video2Loop.mp4",
    'nextSrcMobile': "http://lab.pre.rtve.es/teatro-real/media/video/patios/video2Mobile.mp4"
  }
}

var hotspots = [
	{
    'X': 200,
    'Y': -30,
    'Z': 300,
    'rotate':{
      'xx':-95,
      'yy':-3,
      'zz': 0
    },
    'scaleX': 4,
    'scaleY': 2.6,
    'imageURL': "http://lab.pre.rtve.es/teatro-real/media/image/arrow_normal.png", 
    'load': 'juego',
    'type': 'move',
    'zoom': 90,
    'width': 200,
    'height': 200,
    'transitions':['f','e']
  },
  {
    'X': 100,
    'Y': -50,
    'Z': -300,
    'rotate':{
      'xx':-85,
      'yy':-3, 
      'zz':0
    },
    'scaleX': 4,
    'scaleY': 2.3,
    'imageURL': "http://lab.pre.rtve.es/teatro-real/media/image/arrow_normal.png", 
    'load': 'publico',
    'type': 'move',
    'zoom': 90,
    'width': 200,
    'height': 200,
    'transitions':['g'],
    'video': 'http://lab.pre.rtve.es/teatro-real/media/video/patios/video4.mp4',
    'videoMobile': 'http://lab.pre.rtve.es/teatro-real/media/video/patios/video4Mobile.mp4',
  },
  {
    'X': 300,
    'Y': 270,
   ...