Threejs w/ video currentTime

by realhunts

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
<body>
  <video crossorigin="anonymous" controls id="source" autoplay loop style="display:none">
    <source src="http://kammerl.de/threejs/three.js/examples/textures/kinect.webm">
  </video>
  <div id="container"></div>
  <input id="logger">
</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, 10);
  scene.add(camera);

  var geometry = new THREE.CubeGeometry(5, 5, 5);

  video = document.getElementById("source");
  video.crossOrigin = 'anonymous';
  logger = document.getElementById("logger");
  // 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);
}

function animate() {
  requestAnimationFrame(animate);
  logger.value = video.currentTime;
  video.currentTime += 0.005;
  render();
}

function render() {
  renderer.render(scene, camera);
}

init();
animate();