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 id="container"></div>
  </body>

</html>

JavaScript

var mesh, geometry, video, video2, camera, scene, renderer, texture, texture2, material,
  myXHR = new XMLHttpRequest(),
  myXHR2 = new XMLHttpRequest(),
  display = document.getElementById("display"),
  container = document.getElementById('container'),
  frameCount = 0,
  t0 = 0,
  t1 = 0,
  downloadCompleteCount = 0,
  frameSkip = 5;

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');

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

myXHR.open('GET', 'https://files.panomoments.com/media/4k_1Frame.mp4');
myXHR.responseType = 'blob';
myXHR.onload = function(e) {
  downloadCompleteCount++;
  video.src = window.URL.createObjectURL(myXHR.response);
};

myXHR2.open('GET', 'https://files.panomoments.com/media/frame2.mp4');
myXHR2.responseType = 'blob';
myXHR2.onload = function(e) {
  downloadCompleteCount++;
};

myXHR.send();
myXHR2.send();

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

texture = new THREE.Texture(video);
texture.minFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;

texture2 = new THREE.Texture(video2)
texture2.minFilter = THREE.LinearFilter;
texture2.format = THREE.RGBFormat;

scene.add(camera);
mesh = new...