CCapture w/ video texture

by realhunts

HTML

<script src="https://rawgithub.com/spite/ccapture.js/master/build/CCapture.all.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
<body>
  <div id="container"></div>
  <video crossorigin="anonymous" controls id="source" autoplay loop width="100" height="100">
    <source src="https://cdn.glitch.com/2f484e40-3ae2-4ff4-bf64-4b7e86cdda2c%2Fsea.mp4?1558661108611">
  </video>
  <br>
  <input id="logger">
  <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
</body>

CSS

body {
  background-color: white;
}

canvas {
  background-color: beige;
}

video {
  background-color: orange;
}

JavaScript

var renderer, scene, camera, video, texture, logger;

function init() {
  scene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true
  });
  document.getElementById('container').appendChild(renderer.domElement);
  renderer.setSize(500, 500);


  camera = new THREE.PerspectiveCamera(35, 1, 1, 10000);
  camera.position.set(0, 0, 15);
  scene.add(camera);


   controls = new THREE.OrbitControls(camera, renderer.domElement);
  var geometry = new THREE.CubeGeometry(5, 5, 5);

geometry.computeBoundingBox();

var max = geometry.boundingBox.max,
    min = geometry.boundingBox.min;
var offset = new THREE.Vector2(0 - min.x, 0 - min.y);
var range = new THREE.Vector2(max.x - min.x, max.y - min.y);
var faces = geometry.faces;

geometry.faceVertexUvs[0] = [];

for (var i = 0; i < faces.length ; i++) {

    var v1 = geometry.vertices[faces[i].a], 
        v2 = geometry.vertices[faces[i].b], 
        v3 = geometry.vertices[faces[i].c];

    geometry.faceVertexUvs[0].push([
        new THREE.Vector2((v1.x + offset.x)/range.x ,(v1.y + offset.y)/range.y),
        new THREE.Vector2((v2.x + offset.x)/range.x ,(v2.y + offset.y)/range.y),
        new THREE.Vector2((v3.x + offset.x)/range.x ,(v3.y + offset.y)/range.y)
    ]);
}
geometry.uvsNeedUpdate = true;

  video = document.getElementById("source");
  video.crossOrigin = 'anonymous';
  // Not available in r54
  texture = new THREE.VideoTexture(source);
  texture.minFilter = THREE.LinearFilter;
  texture.magFilter = THREE.LinearFilter;
  texture.format = THREE.RGBFormat;
  var material = new THREE.MeshPhongMaterial({
    map: texture,
    overdraw: 0.5
  });
  
  var mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  var ambient = new THREE.AmbientLight(0x555533);
  scene.add(ambient);
  
  
  	var spline = new THREE.CatmullRomCurve3( [new THREE.Vector3(25.671594486426034, 10.147294482535496, 0),
	new THREE.Vector3(0.744591686677959, 22.918695883260984, 0),
	new...