JSFiddle - React, Tailwind, and code Playground

by dustinkerstein

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<div id="container"></div>

CSS

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

JavaScript

var url, container, mesh, video, camera, scene, renderer, texture, material, videoInitialized = false,
  videoSeeked = false,
  isUserInteracting = false,
  myXHR = new XMLHttpRequest(),
  frameSkipper = 5;
  
url = 'https://files.panomoments.com/100fps_1g_14CRF.mp4';
container = document.getElementById('container');

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
camera.target = new THREE.Vector3(0, 0, 0);
scene = new THREE.Scene();

video = document.createElement('video');
video.muted = true;
video.autoplay = true;
video.crossOrigin = 'anonymous';
video.setAttribute('webkit-playsinline', 'webkit-playsinline');
video.src = url;

texture = new THREE.Texture(video);
texture.minFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
scene.add(camera);
mesh = new THREE.Mesh(
  new THREE.PlaneGeometry(1920, 1080),
  new THREE.MeshBasicMaterial({
    map: texture
  }));
mesh.position.set(0, 0, -1000);
scene.add(mesh);
camera.add(mesh);

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

renderer.animate( () => {
  	animate();
} );
    
function animate() {



  if (video.readyState > 1) {
  /* console.log("video.readyState: " + video.readyState + " buffered start: " + video.buffered.start(0) + " buffered end: " + video.buffered.end(0) + "  video.currentTime: " +  video.currentTime) */;
    video.currentTime = (video.currentTime + .02) % 3;
    texture.needsUpdate = true;
    if (!videoInitialized && video.buffered.end(0) == "3") {
    	console.log("erer")
      videoInitialized = true;
      var t0 = performance.now();
      myXHR.open('GET', url);
      myXHR.responseType = 'blob';
      myXHR.onload = function(e) {
        var t1 = performance.now();
        console.log("download time: " + (t1-t0));
        video.src = window.URL.createObjectURL(myXHR.response);
      };
     ...