JSFiddle - React, Tailwind, and code Playground

by dustinkerstein

HTML

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

JavaScript

var container, mesh, geometry, video, camera, scene, renderer, texture, material, videoInitialized = false,
  videoSeeked = false,
  isUserInteracting = false,
  myXHR = new XMLHttpRequest();

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();
geometry = new THREE.SphereBufferGeometry(500, 60, 40);
geometry.scale(-1, 1, 1);

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

myXHR.open('GET', 'https://dl.dropboxusercontent.com/s/0b3mgeu1fd6soqv/Colors_256Square_30fps_dashinit.mp4?dl=0');
myXHR.responseType = 'blob';
myXHR.onload = function(e) {
  video.src = window.URL.createObjectURL(myXHR.response);
};
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);
  console.log("video.readyState: ", video.readyState);
  if (!videoInitialized && video.readyState == 4) {
    videoInitialized = 1;
    console.log("videoInitialized: ", videoInitialized)
    video.pause();
    texture = new THREE.Texture(video);
    texture.minFilter = THREE.LinearFilter;
    texture.format = THREE.RGBFormat;
    material = new THREE.MeshBasicMaterial({
      map: texture
    });
    mesh = new THREE.Mesh(geometry, material);
    mesh.rotation.y = Math.PI;
    scene.add(mesh);
    texture.needsUpdate = true;
  }

  camera.lookAt(camera.target);
  renderer.render(scene, camera);

}