<video id="video" src="https://threejs.org/examples/textures/sintel.mp4" autoplay controls crossOrigin=""></video>

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

// Simple three.js example

var mesh, renderer, scene, camera, controls;



    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();
    
    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 100, 2, 1000 );
  camera.lookAt(new THREE.Vector3(0,0,0));

    // controls
    controls = new THREE.OrbitControls( camera );
    
    // ambient light
    scene.add( new THREE.AmbientLight( 0x222222 ) );
    
    // directional light
    var light = new THREE.DirectionalLight( 0xffffff, 1 );
    light.position.set( 80, 80, 80 );
    scene.add( light );
    
  
  
    // axes
    scene.add( new THREE.AxesHelper( 20 ) );
  

    // geometry
    var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
  
 const uniforms = {
   uScale: {
     value: 1.0
   },
   uSize: {
     value: new THREE.Vector2
   }
 };


  
const video = document.getElementById( 'video' );

    // material
    var material = new THREE.MeshPhongMaterial( {
      side: THREE.DoubleSide,
      map: new THREE.VideoTexture(video),
      onBeforeCompile: function(shader) {
        
        for ( let name in uniforms )
          shader.uniforms[name] = uniforms[name];
        
        shader.vertexShader = shader.vertexShader.replace('#include <common>', `
#include <common>
uniform vec2 uSize;
uniform float uScale;

`);
        shader.vertexShader = shader.vertexShader.replace('#include <project_vertex>', `

vec4 wp = modelMatrix * vec4( transformed, 1.0 );

vUv = wp.xy / uSize;

#include <project_vertex>
`);
      }
    } );
  

video.oncanplay = function() {
  video.oncanplay = null;
  const width = video.videoWidth;
  const height = video.videoHeight;
  uniforms.uSize.value.set(width ,height);

      // mesh
  const stepsX = 6;
  const stepsY = 4;
  
  const tw = width / stepsX;
  const th = height / stepsY;
  const hw = tw / 2;
  const hh = th / 2;

  
  for ( let x = 0; x < stepsX; x ++ )
  for ( let y = 0; y < stepsY; y ++ ) {

      const mesh = new THREE.Mesh( geometry, material );
      mesh.position.set(tw * x + hw, th * y + hh,  Math.random() * 20);
      mesh.scale.set(tw * Math.min(Math.random() + 0.6, 1.0), th * Math.min(Math.random() + 0.6, 1.0), 1);
      scene.add( mesh );


  }
  
  
}

    
    
  


  function animate() {


      requestAnimationFrame( animate );

      renderer.render( scene, camera );

  }



animate();