sebastiangeiger/index.html

## index.html
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"></script>
    <script defer="defer">
      function doCube(stream){
        // revolutions per second
        var angularSpeed = 0.2;
        var lastTime = 0;

        // 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;

          if( video.readyState === video.HAVE_ENOUGH_DATA ){
            videoTexture.needsUpdate = true;
          }


          // render
          renderer.render(scene, camera);

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

        // 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();

        //videoTexture material
        var video      = document.createElement('video');
        video.width    = 320;
        video.height   = 240;
        video.autoplay = true;
        video.src = stream;

        var videoTexture = new THREE.Texture( video );
        var material   = new THREE.MeshLambertMaterial({
          // color: 'blue'
          map : videoTexture
        });
        console.log(material);
        // cube
        var cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), material);
        cube.overdraw = true;
        cube.rotation.x = Math.PI * 0.1;
        cube.rotation.y = Math.PI * 0.2;
        scene.add(cube);

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

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

        // start animation
        animate();
      }

      navigator.webkitGetUserMedia({ video: true },
                                   function(stream){ doCube(URL.createObjectURL(stream)) },
                                   function(error) { console.error("webkitGetUserMedia failed"); });
    </script>
  </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<style>
	body {
	margin: 0px;
	padding: 0px;
	}
	</style>
	</head>
	<body>
	<div id="container"></div>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"></script>
	<script defer="defer">
	function doCube(stream){
	// revolutions per second
	var angularSpeed = 0.2;
	var lastTime = 0;

	// 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;

	if( video.readyState === video.HAVE_ENOUGH_DATA ){
	videoTexture.needsUpdate = true;
	}


	// render
	renderer.render(scene, camera);

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

	// 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();

	//videoTexture material
	var video = document.createElement('video');
	video.width = 320;
	video.height = 240;
	video.autoplay = true;
	video.src = stream;

	var videoTexture = new THREE.Texture( video );
	var material = new THREE.MeshLambertMaterial({
	// color: 'blue'
	map : videoTexture
	});
	console.log(material);
	// cube
	var cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), material);
	cube.overdraw = true;
	cube.rotation.x = Math.PI * 0.1;
	cube.rotation.y = Math.PI * 0.2;
	scene.add(cube);

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

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

	// start animation
	animate();
	}

	navigator.webkitGetUserMedia({ video: true },
	function(stream){ doCube(URL.createObjectURL(stream)) },
	function(error) { console.error("webkitGetUserMedia failed"); });
	</script>
	</body>
	</html>