JSFiddle - React, Tailwind, and code Playground

by dustinkerstein

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/90/three.min.js"></script>
<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Texture Swap</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 {
        background-color: #000000;
        margin: 0px;
        overflow: hidden;
      }

    </style>
  </head>

  <body>
    <div class="bar">
      <progress id="progress" value="0"></progress>
    </div>
    <div id="container"></div>
  </body>

</html>

CSS

.bar {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

JavaScript

var container, mesh, geometry, video, camera, scene, renderer, texture, material,
  videoInitialized = false,
  videoSeeked = false,
  isUserInteracting = false,
  onMouseDownMouseX = 0,
  onMouseDownMouseY = 0,
  lon = 0,
  onMouseDownLon = 0,
  lat = 0,
  onMouseDownLat = 0,
  phi = 0,
  theta = 0,
  distance = 50,
  onPointerDownPointerX = 0,
  onPointerDownPointerY = 0,
  onPointerDownLon = 0,
  onPointerDownLat = 0;

var myXHR = new XMLHttpRequest();
var progressBar = document.getElementById("progress"),
  display = document.getElementById("display");

container = document.getElementById('container');

container.addEventListener( 'click', function () {
					video.play();
				} );

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
camera.target = new THREE.Vector3(0, 0, 0);
camera.position.set(0, 0, 0);
scene = new THREE.Scene();
geometry = new THREE.SphereBufferGeometry(1000, 60, 40);
geometry.scale(-1, 1, 1);

video = document.createElement('video');
video.width = 640;
video.height = 360;
video.muted = true;
video.autoplay = true;
video.crossOrigin = 'anonymous';
video.setAttribute('webkit-playsinline', 'webkit-playsinline');

myXHR.open('GET', 'https://files.panomoments.com/media/frame2.mp4');
myXHR.responseType = 'blob';
myXHR.onload = function(e) {
  video.src = window.URL.createObjectURL(myXHR.response);
  document.getElementById("progress").remove();
};
myXHR.onprogress = function(e) {
  if (e.lengthComputable) {
    progressBar.max = e.total;
    progressBar.value = e.loaded;
  }
};
myXHR.onloadstart = function(e) {
  progressBar.value = 0;
};
myXHR.onloadend = function(e) {
  progressBar.value = e.loaded;
};
myXHR.send();

renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

animate();

function animate() {

  requestAnimationFrame(animate);

  if (!videoInitialized &&...