Non-MSE Three.js Video Play

by dustinkerstein

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<div id="control">
  <span>MAKE SURE TO CLICK INTO THIS IFRAME OR ELSE SAFARI WILL ONLY RENDER AT MAX 30FPS DUE TO POWER SAVING CODE</span>
  <br>
  <span id="playbackRateText"></span>
  <button id="decrease" onclick="decreaseRate()">-</button>
  <button id="increase" onclick="increaseRate()">+</button>
</div>
<div id="videoHolder">
  <video id="video"></video>
</div>
<div id="container"></div>

CSS

body {
  margin: 0;
  padding: 0;
  background-color: #000000; 
}
      
#videoHolder {
  pointer-events: none;
}

video {
  width: 100vw;
  height: 40vh;
}

canvas {
  width: 100vw;
  height: 40vh !important;
}

span {
  color: white;
}

#control {
   height: 10vh;
   z-index: 9999;
   position: absolute;
}

JavaScript

var container, mesh, geometry, material, video, camera, scene, renderer, texture;
var video = document.getElementById('video');
var text = document.getElementById('playbackRateText');
var url = "https://files.panomoments.com/longGOP60fps_dashinit.mp4"; // 3840x2160 DAR 16:9 Long GOP created with ffmpeg -y -i 60fps.mp4 -c:v libx264 -g 1000 -keyint_min 1000 -bf 0 -profile:v high -level 4.1 -vf "scale=3840:2160" -crf 15 -pix_fmt yuv420p -to 6 -an longGOP60fps.mp4 - Source - https://allensarkisyan.github.io/VideoFrameDocs/
//var url = "https://files.panomoments.com/longGOP60fps2048x2048_dashinit.mp4"; // 2048x2048 DAR 16:9 Long GOP created with ffmpeg -y -i 60fps.mp4 -c:v libx264 -g 1000 -keyint_min 1000 -bf 0 -profile:v high -level 4.1 -vf "scale=2048:2048" -crf 15 -pix_fmt yuv420p -to 6 -an longGOP60fps2048x2048.mp4 - Source - https://allensarkisyan.github.io/VideoFrameDocs/
//var url = "https://files.panomoments.com/longGOP60fps1024x1024_dashinit.mp4"; // 1024x1024 DAR 16:9 Long GOP created with ffmpeg -y -i 60fps.mp4 -c:v libx264 -g 1000 -keyint_min 1000 -bf 0 -profile:v high -level 4.1 -vf "scale=1024:1024" -crf 15 -pix_fmt yuv420p -to 6 -an longGOP60fps1024x1024.mp4 - Source - https://allensarkisyan.github.io/VideoFrameDocs/

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.crossOrigin = "anonymous";
video.autoplay = true;
video.preload = 'auto';
video.loop = true;
video.muted = true;
texture = new THREE.Texture(video);
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
scene.add(camera);
geometry = new THREE.PlaneGeometry(1, 1);
material = new THREE.MeshBasicMaterial({map: texture});
mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, -10);
scene.add(mesh);
camera.add(mesh);
renderer = new...