gistfile1.txt

// revolutions per second
var angularSpeed = 0.2; 
var lastTime = 0;

var SIZE = 50;

function de2ra(degree)   { return degree*(Math.PI/180); }
// this function is executed on each animation frame
function animate(){

  // update
  var time = (new Date()).getTime();
  var timeDiff = time - lastTime;
  //var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
  //cube.rotation.y += angleChange;
  lastTime = time;
  renderer.setClearColor( 0xaaaaff, 1 );
  // render
  render();
  renderer.render(scene, camera);

  // request new frame
  requestAnimationFrame(function(){
      animate();

  });
}

function render() 
{ 
  if ( video.readyState === video.HAVE_ENOUGH_DATA ) 
  {
    videoImageContext.drawImage( video, 0, 0, videoImage.width, videoImage.height );
    if ( videoTexture ) 
      videoTexture.needsUpdate = true;
  }

  renderer.render( scene, camera );
}

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

// camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 500;

// scene
var scene = new THREE.Scene();

// material

          

// add subtle ambient lighting
var ambientLight = new THREE.AmbientLight(0xbbbbbb);
scene.add(ambientLight);

// directional lighting
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);

var floorMaterial = new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('grass.jpg'),
    color: 0xffffff,
    //wireframe: true
});

var texture = THREE.ImageUtils.loadTexture('grass.jpg');
texture.wrapS = THREE.RepeatWrapping; 
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 50, 50 );

var planeW = SIZE; // pixels
var planeH = SIZE; // pixels 
var numW = SIZE; // how many wide (50*50 = 2500 pixels wide)
var numH = SIZE; // how many tall (50*50 = 2500 pixels tall)
var plane = new THREE.Mesh(
    new THREE.PlaneGeometry( planeW*numW, planeH*numH, planeW, planeH ),
    new THREE.MeshLambertMaterial( {
        map: texture,
        //wireframe: true
    })
);

plane.material.side = THREE.DoubleSide;
scene.add(plane);

var planeWireframe = new THREE.Mesh(
    new THREE.PlaneGeometry( planeW*numW, planeH*numH, planeW, planeH ),
    new THREE.MeshBasicMaterial( {
        color: 0xffffff,
        wireframe: true
    })
);
scene.add(planeWireframe);

video = document.getElementById( 'monitor' );
  
videoImage = document.getElementById( 'videoImage' );
videoImageContext = videoImage.getContext( '2d' );
// background color if no video present
videoImageContext.fillStyle = '#000000';
videoImageContext.fillRect( 0, 0, videoImage.width, videoImage.height );

videoTexture = new THREE.Texture( videoImage );
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;

var movieMaterial = new THREE.MeshBasicMaterial( { map: videoTexture, overdraw: true, side:THREE.DoubleSide } );

function putCube(x, y, z, video) {
  var material = new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('crate.jpg')
  });
  //alert(x + " " + y + " " + z);
  var cube = new THREE.Mesh(new THREE.CubeGeometry(SIZE, SIZE, SIZE), 
    video === 'video' ? movieMaterial : material);
  cube.overdraw = true;
  //cube.rotation.x = Math.PI * 0.1;
  cube.position.x = ((x || 0) - 2) * SIZE + SIZE/2;
  cube.position.y = (y || 0) * SIZE + SIZE/2;
  cube.position.z = ((z || 0) - 1) * SIZE + SIZE/2;

  scene.add(cube);
}

scene.rotation.x = de2ra(110);

[
  [0,0,0],
  [1,0,0],
  [1,1,0],
  [2,0,0],
  [3,0,0]
];

// TV SET
[
  [0,0,0],
  [1,0,0],
  [2,0,0],
  [0,0,-1],
  [0,0,-2],
  [2,0,-1],
  [2,0,-2],
  [1,0,-2],
  [1,0,-1, 'video']
]

 .forEach(function(x) { putCube.apply(null, x); });


// start animation
animate();

<video id="monitor" autoplay width="160" height="0" style="visibility: collapse; float:left;"></video>
    <canvas id="videoImage" width="160" height="0" style="visibility: collapse; float:left;"></canvas>