JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r53/three.js"></script>
<script id="vs" type="x-shader/x-vertex">
  uniform sampler2D map;
  
  uniform float width;
  uniform float height;
  uniform float nearClipping, farClipping;
  uniform float pointSize;
  uniform float zOffset;
  
  varying vec2 vUv;
  
  const float XtoZ = 1.11146; // tan( 1.0144686 / 2.0 ) * 2.0;
  const float YtoZ = 0.83359; // tan( 0.7898090 / 2.0 ) * 2.0;
  
  void main() {
    vUv = vec2( position.x / width, position.y / height );
    vec4 color = texture2D( map, vUv );
    float depth = ( color.r + color.g + color.b ) / 3.0;
  
    // Projection code by @kcmic
    float z = ( 1.0 - depth ) * (farClipping - nearClipping) + nearClipping;
  
    vec4 pos = vec4(
      ( position.x / width - 0.5 ) * z * XtoZ,
      ( position.y / height - 0.5 ) * z * YtoZ,
      - z + zOffset,
      1.0
    );
  
  gl_Position = projectionMatrix * modelViewMatrix * pos;
}  
</script>

<script id="fs" type="x-shader/x-fragment"> 
  uniform sampler2D map;
  varying vec2 vUv;
  
  void main() {
    vec4 color = texture2D( map, vUv );
  }
</script>

Check out your browser's JavaScript debugger to see the security exception.

JavaScript

var container;

var scene, camera, light, renderer;
var geometry, cube, mesh, material;
var mouse, center;

var video, texture;

init();
animate();

function init() {
  container = document.createElement( 'div' );
  document.body.appendChild( container );
  camera = new THREE.PerspectiveCamera(
    50,
    window.innerWidth / window.innerHeight,
    1,
    10000
  );
  
  camera.position.set(0, 0, 500);
  scene = new THREE.Scene();
  center = new THREE.Vector3();
  center.z = - 1000;
  
  video = document.createElement('video');
  video.addEventListener('loadedmetadata', function (event) {
    texture = new THREE.Texture( video );
    
    var width = 640, height = 480;
    var nearClipping = 850, farClipping = 4000;
    
    geometry = new THREE.Geometry();
    
    for (var i = 0, l = width * height; i < l; i++) {
      var vertex = new THREE.Vector3();
      vertex.x = ( i % width );
      vertex.y = Math.floor( i / width );
      geometry.vertices.push( vertex );
    }
    
    material = new THREE.ShaderMaterial({
      uniforms: {
        "map": { type: "t", value: texture },
      },
      vertexShader: document.getElementById( 'vs' ).textContent,
      fragmentShader: document.getElementById( 'fs' ).textContent,
    });
    
    mesh = new THREE.ParticleSystem( geometry, material );
    mesh.position.x = 0;
    mesh.position.y = 0;
    scene.add( mesh );
    
    setInterval(function () {
      if (video.readyState === video.HAVE_ENOUGH_DATA) {
        texture.needsUpdate = true;
      }
    }, 1000 / 30);    
  }, false);
  video.loop = true;
  
  // CROSS-ORIGIN VIDEO SOURCE 
  // REMOTE VIDEO SOURCE PROVIDES "Access-Control-Allow-Origin:*" HEADER
  video.src =
    'http://kammerl.de/threejs/three.js/examples/textures/kinect.webm';
  // DEFINING ANONYMOUS ORIGIN
  video.crossOrigin = '';
  video.play();
  
  renderer = new THREE.WebGLRenderer();
  container.appendChild(renderer.domElement);  
}

function animate() {  
  requestAnimationFrame(animate);
 ...