evejweinberg/webcam.html

## webcam.html
<!doctype html>
<html>
	<head>
		<title>learningthree.js boiler plate for three.js</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">


		<script src="vendor/three.js/Three.js"></script>
		<script src="vendor/three.js/Detector.js"></script>
		<!-- https://github.com/mrdoob/stats.js -->
		<script src="vendor/three.js/Stats.js"></script>

		<script src="vendor/threex/THREEx.screenshot.js"></script>
		<script src="vendor/threex/THREEx.FullScreen.js"></script>
		<script src="vendor/threex/THREEx.WindowResize.js"></script>
		<script src="vendor/three.js/TrackballControls.js"></script>

		<link  href="css/main.css" rel="stylesheet"/>
	</head>
<body>
	<!-- three.js container -->
    	<div id="container"></div>
	<!-- info on screen display -->
	<div id="info">
		<div class="top">
			<a href="http://learningthreejs.com/blog/2011/12/20/boilerplate-for-three-js/" target="_blank">LearningThree.js</a>
			boiler plate for
			<a href="https://github.com/mrdoob/three.js/" target="_blank">three.js</a>
		</div>
		<div class="bottom" id="inlineDoc" >
			- <i>p</i> for screenshot
		</div>
	</div>

	<script type="text/javascript">
	var image_tex, video, buffer, pre_video_tex, video_tex, video_mat, video_mesh, video_geo, buffer_mat, buffer_geo, buffer_mesh;

	var ortho_width = 1920, ortho_height = 1080, ortho_near = -1, ortho_far = 1;

	var get_webcam = function(){
	video = document.createElement('video');
	video.width = ortho_width;
	video.height = ortho_height;
	video.autoplay = true;
	video.muted = true; //- to prevent create feedback from mic input ***
	video_tex = new THREE.Texture( video );
	    // image_tex = new THREE.TextureLoader().load('src/logo.png');
	    video_tex.minFilter = THREE.LinearFilter //- to use non powers of two image
	    // image_tex.minFilter = THREE.LinearFilter

	    video_mat = new THREE.MeshPhongMaterial(
				{map: video_tex}

	    );
	if(navigator.getUserMedia){
		navigator.getUserMedia({ audio: true, video:{ width: ortho_width, height: ortho_height, facingMode: { exact: "environment" } } }, function(stream){
			video.src = window.URL.createObjectURL(stream);
			video.play();
		}, function(err){
			console.log('failed to get a steram : ', err );
		});
	} else {
		console.log('user media is not supported');
	}
};
		var stats, scene, renderer, composer;
		var camera, cameraControls;

		if( !init() )	animate();

		// init the scene
		function init(){
			get_webcam();

			if( Detector.webgl ){
				renderer = new THREE.WebGLRenderer({
					antialias		: true,	// to get smoother output
					preserveDrawingBuffer	: true	// to allow screenshot
				});
				renderer.setClearColor( 0xbbbbbb );
			}else{
				Detector.addGetWebGLMessage();
				return true;
			}
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.getElementById('container').appendChild(renderer.domElement);

			// add Stats.js - https://github.com/mrdoob/stats.js
			stats = new Stats();
			stats.domElement.style.position	= 'absolute';
			stats.domElement.style.bottom	= '0px';
			document.body.appendChild( stats.domElement );

			// create a scene
			scene = new THREE.Scene();

			// put a camera in the scene
			camera	= new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 10000 );
			camera.position.set(0, 0, 5);
			scene.add(camera);

			// create a camera contol
			cameraControls	= new THREE.TrackballControls( camera )

			// transparently support window resize
			THREEx.WindowResize.bind(renderer, camera);
			// allow 'p' to make screenshot
			THREEx.Screenshot.bindKey(renderer);
			// allow 'f' to go fullscreen where this feature is supported
			if( THREEx.FullScreen.available() ){
				THREEx.FullScreen.bindKey();
				document.getElementById('inlineDoc').innerHTML	+= "- <i>f</i> for fullscreen";
			}

			// here you add your objects
			// - you will most likely replace this part by your own
			var light	= new THREE.AmbientLight( Math.random() * 0xffffff );
			scene.add( light );
			var light	= new THREE.DirectionalLight( Math.random() * 0xffffff );
			light.position.set( Math.random(), Math.random(), Math.random() ).normalize();
			scene.add( light );
			var light	= new THREE.DirectionalLight( Math.random() * 0xffffff );
			light.position.set( Math.random(), Math.random(), Math.random() ).normalize();
			scene.add( light );
			var light	= new THREE.DirectionalLight( Math.random() * 0xffffff );
			light.position.set( Math.random(), Math.random(), Math.random() ).normalize();
			scene.add( light );
			var light	= new THREE.PointLight( Math.random() * 0xffffff );
			light.position.set( Math.random()-0.5, Math.random()-0.5, Math.random()-0.5 )
						.normalize().multiplyScalar(1.2);
			scene.add( light );
			var light	= new THREE.PointLight( Math.random() * 0xffffff );
			light.position.set( Math.random()-0.5, Math.random()-0.5, Math.random()-0.5 )
						.normalize().multiplyScalar(1.2);
			scene.add( light );

			var geometry	= new THREE.TorusGeometry( 1, 0.42, 16, 16 );
			var material	= new THREE.MeshPhongMaterial({ambient: 0x808080, color: Math.random() * 0xffffff});
			var mesh	= new THREE.Mesh( geometry, material );
			scene.add( mesh );

			video_geo = new THREE.BoxGeometry( 30,30,30 );
	video_mesh = new THREE.Mesh( video_geo, video_mat );

	scene.add(video_mesh);

		}

		// animation loop
		function animate() {
			if(video.readyState === video.HAVE_ENOUGH_DATA) { video_tex.needsUpdate = true; }

			// loop on request animation loop
			// - it has to be at the begining of the function
			// - see details at http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
			requestAnimationFrame( animate );

			// do the render
			render();

			// update stats
			stats.update();
		}

		// render the scene
		function render() {
			// variable which is increase by Math.PI every seconds - usefull for animation
			var PIseconds	= Date.now() * Math.PI;

			// update camera controls
			cameraControls.update();

			// animation of all objects
			scene.traverse(function(object3d, i){
				if( object3d instanceof THREE.Mesh === false )	return
				// object3d.rotation.y = PIseconds*0.0003 * (i % 2 ? 1 : -1);
				// object3d.rotation.x = PIseconds*0.0002 * (i % 2 ? 1 : -1);
			})

			// actually render the scene
			renderer.render( scene, camera );
		}
	</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>learningthree.js boiler plate for three.js</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">


	<script src="vendor/three.js/Three.js"></script>
	<script src="vendor/three.js/Detector.js"></script>
	<!-- https://github.com/mrdoob/stats.js -->
	<script src="vendor/three.js/Stats.js"></script>

	<script src="vendor/threex/THREEx.screenshot.js"></script>
	<script src="vendor/threex/THREEx.FullScreen.js"></script>
	<script src="vendor/threex/THREEx.WindowResize.js"></script>
	<script src="vendor/three.js/TrackballControls.js"></script>

	<link href="css/main.css" rel="stylesheet"/>
	</head>
	<body>
	<!-- three.js container -->
	<div id="container"></div>
	<!-- info on screen display -->
	<div id="info">
	<div class="top">
	<a href="http://learningthreejs.com/blog/2011/12/20/boilerplate-for-three-js/" target="_blank">LearningThree.js</a>
	boiler plate for
	<a href="https://github.com/mrdoob/three.js/" target="_blank">three.js</a>
	</div>
	<div class="bottom" id="inlineDoc" >
	- <i>p</i> for screenshot
	</div>
	</div>

	<script type="text/javascript">
	var image_tex, video, buffer, pre_video_tex, video_tex, video_mat, video_mesh, video_geo, buffer_mat, buffer_geo, buffer_mesh;

	var ortho_width = 1920, ortho_height = 1080, ortho_near = -1, ortho_far = 1;

	var get_webcam = function(){
	video = document.createElement('video');
	video.width = ortho_width;
	video.height = ortho_height;
	video.autoplay = true;
	video.muted = true; //- to prevent create feedback from mic input ***
	video_tex = new THREE.Texture( video );
	// image_tex = new THREE.TextureLoader().load('src/logo.png');
	video_tex.minFilter = THREE.LinearFilter //- to use non powers of two image
	// image_tex.minFilter = THREE.LinearFilter

	video_mat = new THREE.MeshPhongMaterial(
	{map: video_tex}

	);
	if(navigator.getUserMedia){
	navigator.getUserMedia({ audio: true, video:{ width: ortho_width, height: ortho_height, facingMode: { exact: "environment" } } }, function(stream){
	video.src = window.URL.createObjectURL(stream);
	video.play();
	}, function(err){
	console.log('failed to get a steram : ', err );
	});
	} else {
	console.log('user media is not supported');
	}
	};
	var stats, scene, renderer, composer;
	var camera, cameraControls;

	if( !init() ) animate();

	// init the scene
	function init(){
	get_webcam();

	if( Detector.webgl ){
	renderer = new THREE.WebGLRenderer({
	antialias : true, // to get smoother output
	preserveDrawingBuffer : true // to allow screenshot
	});
	renderer.setClearColor( 0xbbbbbb );
	}else{
	Detector.addGetWebGLMessage();
	return true;
	}
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.getElementById('container').appendChild(renderer.domElement);

	// add Stats.js - https://github.com/mrdoob/stats.js
	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.bottom = '0px';
	document.body.appendChild( stats.domElement );

	// create a scene
	scene = new THREE.Scene();

	// put a camera in the scene
	camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 10000 );
	camera.position.set(0, 0, 5);
	scene.add(camera);

	// create a camera contol
	cameraControls = new THREE.TrackballControls( camera )

	// transparently support window resize
	THREEx.WindowResize.bind(renderer, camera);
	// allow 'p' to make screenshot
	THREEx.Screenshot.bindKey(renderer);
	// allow 'f' to go fullscreen where this feature is supported
	if( THREEx.FullScreen.available() ){
	THREEx.FullScreen.bindKey();
	document.getElementById('inlineDoc').innerHTML += "- <i>f</i> for fullscreen";
	}

	// here you add your objects
	// - you will most likely replace this part by your own
	var light = new THREE.AmbientLight( Math.random() * 0xffffff );
	scene.add( light );
	var light = new THREE.DirectionalLight( Math.random() * 0xffffff );
	light.position.set( Math.random(), Math.random(), Math.random() ).normalize();
	scene.add( light );
	var light = new THREE.DirectionalLight( Math.random() * 0xffffff );
	light.position.set( Math.random(), Math.random(), Math.random() ).normalize();
	scene.add( light );
	var light = new THREE.DirectionalLight( Math.random() * 0xffffff );
	light.position.set( Math.random(), Math.random(), Math.random() ).normalize();
	scene.add( light );
	var light = new THREE.PointLight( Math.random() * 0xffffff );
	light.position.set( Math.random()-0.5, Math.random()-0.5, Math.random()-0.5 )
	.normalize().multiplyScalar(1.2);
	scene.add( light );
	var light = new THREE.PointLight( Math.random() * 0xffffff );
	light.position.set( Math.random()-0.5, Math.random()-0.5, Math.random()-0.5 )
	.normalize().multiplyScalar(1.2);
	scene.add( light );

	var geometry = new THREE.TorusGeometry( 1, 0.42, 16, 16 );
	var material = new THREE.MeshPhongMaterial({ambient: 0x808080, color: Math.random() * 0xffffff});
	var mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );

	video_geo = new THREE.BoxGeometry( 30,30,30 );
	video_mesh = new THREE.Mesh( video_geo, video_mat );

	scene.add(video_mesh);

	}

	// animation loop
	function animate() {
	if(video.readyState === video.HAVE_ENOUGH_DATA) { video_tex.needsUpdate = true; }

	// loop on request animation loop
	// - it has to be at the begining of the function
	// - see details at http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
	requestAnimationFrame( animate );

	// do the render
	render();

	// update stats
	stats.update();
	}

	// render the scene
	function render() {
	// variable which is increase by Math.PI every seconds - usefull for animation
	var PIseconds = Date.now() * Math.PI;

	// update camera controls
	cameraControls.update();

	// animation of all objects
	scene.traverse(function(object3d, i){
	if( object3d instanceof THREE.Mesh === false ) return
	// object3d.rotation.y = PIseconds0.0003 (i % 2 ? 1 : -1);
	// object3d.rotation.x = PIseconds0.0002 (i % 2 ? 1 : -1);
	})

	// actually render the scene
	renderer.render( scene, camera );
	}
	</script>
	</body>
	</html>