JSFiddle - React, Tailwind, and code Playground

by kouty79

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/90/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/OrbitControls.min.js"></script>
<video src="https://fpdl.vimeocdn.com/vimeo-prod-skyfire-std-us/01/2880/8/214402865/738665485.mp4?token=1519234144-0xb2c4161a2c10de6cd9bbf8d3dff9750700a155a6&download=1&filename=Ayutthaya+-+needs+stabilization+and+horizon+correction+%7C+360%2FVR+Master+Series+%7C+Free+Download.mp4" controls></video>

JavaScript

var width = window.innerWidth;
var height = window.innerHeight;

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

var video      = document.querySelector('video');
video.autoplay = true;
video.crossOrigin = '';
videoTexture = new THREE.Texture(video);
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;
videoTexture.format = THREE.RGBFormat;


  var scene = new THREE.Scene();

  var cubeGeometry = new THREE.SphereGeometry(500, 60, 40);
  var sphereMat = new THREE.MeshBasicMaterial({map: videoTexture});
  sphereMat.side = THREE.BackSide;
  var cube = new THREE.Mesh(cubeGeometry, sphereMat);
  scene.add(cube);

  

  var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
  camera.position.y = 0;
  camera.position.z = 500;

  scene.add(camera);

  var controls = new THREE.OrbitControls( camera);

  controls.enableDamping = true;
  controls.dampingFactor = 0.25;
  controls.enableZoom = false; 
  controls.maxDistance = 500;
  controls.minDistance = 500;

  function render() {
          if( video.readyState === video.HAVE_ENOUGH_DATA ){
            videoTexture.needsUpdate = true;
          }
          controls.update(); 
          renderer.render(scene, camera);
          requestAnimationFrame(render);
  }

  render();