demo/index2.html


<!doctype html>
<html lang="en">
	<head>
		<title>targets</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
		<style>
			body {
				font-family: Monospace;
				background-color: #f0f0f0;
				margin: 0px;
				overflow: hidden;
			}
		</style>
		<script type="text/javascript">
    </script>
	</head>
	<body>


		<script src="./targets_files/Three.js"></script>
		<script src="./targets_files/Stats.js"></script>
		<script src="./targets_files/Detector.js"></script>
		
		<script src="../../tquery/build/tquery.js"></script>
		<script src="tquery.headtrackr.js"></script>
		
		<script src="./targets_files/headtrackr.js"></script>
		
		<canvas id="compare" width="320" height="240" style="display:none"></canvas>
		<video id="vid" autoplay loop></video>
			
		<script>
			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
			
			var videoInput = document.getElementById('vid');
			var canvasInput = document.getElementById('compare');
			
			// 3d model setup
			
			var container, stats;
			var camera, scene, renderer;
			var plane;
			
			realisticAbsoluteCameraControl = function(camera, scaling, fixedPosition, lookAt, params) {

				if (params === undefined) params = {};
				if (params.screenHeight === undefined) {
					var screenHeight_cms = 20;
				} else {
					var screenHeight_cms = params.screenHeight;
				}
				if (params.damping === undefined) {
				  params.damping = 1;
				}

				camera.position.x = fixedPosition[0];
				camera.position.y = fixedPosition[1];
				camera.position.z = fixedPosition[2];
				camera.lookAt(lookAt);

				var wh = screenHeight_cms * scaling;
				var ww = wh * camera.aspect;
			}
			
			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				scene = new THREE.Scene();
//				scene.fog = new THREE.Fog( 0x000000, 1, 5000 );
		
				camera = new THREE.PerspectiveCamera( 23, window.innerWidth / window.innerHeight, 1, 100000 );
				camera.position.z = 6000;
				scene.add( camera );
				
				// Planes
				
				//top wall
				plane1 = new THREE.Mesh( new THREE.PlaneGeometry( 500, 3000, 5, 15 ), new THREE.MeshBasicMaterial( { color: 0xcccccc, wireframe : true } ) );
				plane1.rotation.x = Math.PI/2;
				plane1.position.y = 250;
				plane1.position.z = 50-1500;
				scene.add( plane1 );
				
				//left wall
				plane2 = new THREE.Mesh( new THREE.PlaneGeometry( 3000, 500, 15, 5 ), new THREE.MeshBasicMaterial( { color: 0xcccccc, wireframe : true } ) );
				plane2.rotation.y = Math.PI/2;
				plane2.position.x = -250;
				plane2.position.z = 50-1500;
				scene.add( plane2 );
				
				//right wall
				plane3 = new THREE.Mesh( new THREE.PlaneGeometry( 3000, 500, 15, 5 ), new THREE.MeshBasicMaterial( { color: 0xcccccc, wireframe : true	} ) );
				plane3.rotation.y = -Math.PI/2;
				plane3.position.x = 250;
				plane3.position.z = 50-1500;
				scene.add( plane3 );
				
				//bottom wall
				plane4 = new THREE.Mesh( new THREE.PlaneGeometry( 500, 3000, 5, 15 ), new THREE.MeshBasicMaterial( { color: 0xcccccc, wireframe : true	} ) );
				plane4.rotation.x = -Math.PI/2;
				plane4.position.y = -250;
				plane4.position.z = 50-1500;
				scene.add( plane4 );
				
				// Create sprites with lines
				
				var placeTarget = function(x,y,z) {
						
						// Cylinder
						var cylinder = new THREE.Mesh( new THREE.CylinderGeometry(30,30,1,20,1,false), new THREE.MeshBasicMaterial( { color : 0xeeeeee} ) );
						cylinder.position.x = x;
						cylinder.rotation.x = Math.PI/2;
						cylinder.position.y = y;
						cylinder.position.z = z;
						scene.add( cylinder );
						
						var geometry = new THREE.Geometry();
						geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( 0, 0, -80000 ) ) );
						geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( 0, 0, z ) ) );
						var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xeeeeee } ) );
						line.position.x = x;
						line.position.y = y;
						scene.add( line );
				}
								
//				placeTarget(-150,-150,-550);
				placeTarget(0,0,-1000);
				placeTarget(0,0,-400);
//				placeTarget(0,-150,-200);
//				placeTarget(100,0,500);
//				placeTarget(-150,100,0);
//				placeTarget(150,-100,-1050);
//				placeTarget(50,0,1100);
//				placeTarget(-50,-50,600);
//				placeTarget(0,150,-2100);
//				placeTarget(-130,0,-700);
				
				renderer = new THREE.WebGLRenderer({ clearAlpha: 1 });
				renderer.setSize( window.innerWidth, window.innerHeight );

				container.appendChild( renderer.domElement );
				
			}
			
			var stats = new Stats();
			stats.domElement.style.position = 'absolute';
			stats.domElement.style.top = '0px';
			document.body.appendChild( stats.domElement );
			
			function animate() {

				renderer.render(scene, camera);
				stats.update();

				requestAnimationFrame( animate );

			}
			
			init();
			animate();
			
			// video styling
			videoInput.style.position = 'absolute';
			videoInput.style.top = '50px';
			videoInput.style.zIndex = '100001';
			videoInput.style.display = 'block';
			
   		// create the headTracker
			var headTracker	= tQuery.createHeadtrackr().debugView(true).start();

		params = {damping : 0.5}
		scaling = 27;
		fixedPosition = [0,0,50];
		if (params.screenHeight === undefined) {
			var screenHeight_cms = 20;
		} else {
			var screenHeight_cms = params.screenHeight;
		}
		var wh = screenHeight_cms * scaling;
		var ww = wh * camera.aspect;
		
		r = realisticAbsoluteCameraControl(camera, scaling, fixedPosition, new THREE.Vector3(0,0,0), params);

   		// add a cube in the world scene
   		// var object	= tQuery.createCube().addTo(world);
   		// make the camera move depending on facetrackingEvent
   		headTracker.addEventListener("found", function(event){
			// update camera
			event.x = event.x*10;
			event.y = event.y*10;
			var xOffset = event.x > 0 ? 0 : -event.x * 2 * params.damping * scaling;
			var yOffset = event.y < 0 ? 0 : event.y * 2 * params.damping * scaling;
//			xOffset = 100*xOffset;
//			yOffset = 100*yOffset;
			camera.setViewOffset(ww + Math.abs(event.x * 2 * params.damping * scaling), wh + Math.abs(event.y * params.damping * 2 * scaling), xOffset, yOffset, ww, wh);

			camera.position.x = fixedPosition[0] + (event.x * scaling * params.damping );
			camera.position.y = fixedPosition[1] + (event.y * scaling * params.damping );
//			camera.position.z = fixedPosition[2] + (event.z * scaling);

			// update lookAt?

			// when changing height of window, we need to change field of view
//			camera.fov = Math.atan((wh/2 + Math.abs(event.y * scaling * params.damping ))/(Math.abs(event.z*scaling)))*360/Math.PI;
			//debugger;

			camera.updateProjectionMatrix();
	
//   			scene.fog = new THREE.Fog( 0x000000, 1+(50.0*27), 3000+(50.0*27) );
//			object.rotationZ(event.angle)
//				.positionX(event.x).positionY(event.y)
//				.scaleX(event.width).scaleY(event.height);
		});
//		
//		// set up camera controller
//		headtrackr.controllers.three.realisticAbsoluteCameraControl(camera, 27, [0,0,50], new THREE.Vector3(0,0,0), {damping : 0.5});
//		
//		// Face detection setup
//		var htracker = new headtrackr.Tracker({altVideo : {ogv : "./media/capture5.ogv", mp4 : "./media/capture5.mp4"}});
//		htracker.init(videoInput, canvasInput);
//		htracker.start();
//		
//		document.addEventListener('headtrackingEvent', function(event) {
//			console.log(event.z)
//			scene.fog = new THREE.Fog( 0x000000, 1+(event.z*27), 3000+(event.z*27) );
//		}, false);
		// reset headTracker if space is pressed
		document.addEventListener('keydown', function(event){
			// only if the key is space
			if( event.keyCode !== ' '.charCodeAt(0) )	return;
			// reset the head tracker
			headTracker.reset();
		});
		
		</script>
	</body>
</html>