lisajamhoury/sketch.js

## sketch.js
<!DOCTYPE html>
<html lang="en">

<head>
	<title>Kinectron For Three.js - Simple Example</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<!-- Origin Trial Token, feature = WebVR (For Chrome M59+), origin = https://juniorxsound.github.io, expires = 2017-08-16 -->
	<meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M59+)" data-expires="2017-08-16" content="Ahwo2B0LoM2bLB015eLJ4CAvJa0xF9VVn0FO1/AaYfPklvBUwcfYFkXKenD57vhGo1WQt9Hg9IFauhKdRgLN8w8AAABreyJvcmlnaW4iOiJodHRwczovL2p1bmlvcnhzb3VuZC5naXRodWIuaW86NDQzIiwiZmVhdHVyZSI6IldlYlZSMS4xIiwiZXhwaXJ5IjoxNTAyOTEyNTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZX0=">
	<style>
		body {
			/*background: #000;*/
			color: #fff;
			padding: 0;
			margin: 0;
			overflow: hidden;
			font-family: georgia;
			text-align: center;
		}

		a {
			color: skyblue;
			text-decoration: none
		}
	</style>
</head>

<body>
	<!-- <div id="container"></div> -->
	<!--Three.js - TODO - swap with hosted versions so example serve from Github pages-->
	<script src="./dat.gui/build/dat.gui.min.js"></script>
	<script src="js/Detector.js"></script>
	<script src="../node_modules/three/build/three.min.js"></script>
	<script src="../node_modules/three/examples/js/controls/OrbitControls.js"></script>
	<script src="../node_modules/three/examples/js/libs/stats.min.js"></script>
	<script src="http://threejs.org/examples/js/loaders/OBJLoader.js"></script>

	<!-- Kinectron client side library -->
	<script src="../ext/kinectron/client/bin/kinectron.bundle.js"></script>

	<!--Three.js Kinectron plugin-->
	<script src="../dist/three.kinectron.js"></script>

	<script>

	if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
	// 		var container, stats;

		//Some general Three.js components
		var renderer,
			scene,
			camera,
			controls,
			stats;

		var mesh;

		//DepthKit character
		var character;

		//Kinectron
		var kinectron,
			kinectron2,
			kinectronGeo,
			kinectronGeo2,
			kinectronGeo3,
			kinectronGeo4,
			group,
			geometry,
			materials,
			textMesh1;

		var hover = 150;


		//Kick off the example
		window.onload = function() {
			init();
		}

		function init() {
			//Setup renderer
			renderer = new THREE.WebGLRenderer({ antialias: true } );
			renderer.setPixelRatio(window.devicePixelRatio);
			renderer.setSize(window.innerWidth, window.innerHeight);
			document.body.appendChild(renderer.domElement);


			//Setup Kinectron
			var kinectronIpAddress = "172.16.221.156"; //Add Kinectron IP here
			var kinectronIpAddress2 = "172.16.237.102"; //Add Kinectron IP here


			//Open connection with Kinect
			kinectron = new Kinectron(kinectronIpAddress);
			kinectron2 = new Kinectron(kinectronIpAddress2);

			// kinectron2 = new Kinectron(kinectronIpAddress);
			kinectron.makeConnection();
			kinectron2.makeConnection();
			// kinectron2.makeConnection();

			//Start RGBD feed and set callback for new frames
			kinectron.startRGBD(onNewKinectFrame);
			kinectron2.startRGBD(onNewKinectFrame2);

			// Setup scene
			scene = new THREE.Scene();
			scene.background = new THREE.Color( 0x050505);
			scene.fog = new THREE.Fog( 0x000000, 250, 1400 );


			var pointLight = new THREE.PointLight( 0xffffff, 1.5 );
			pointLight.position.set( 0, 20, 0 );
			// scene.add( pointLight );

			var ambientLight = new THREE.AmbientLight( 0x222222 );
				scene.add( ambientLight );
				var light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
				light1.position.set( 1, 1, 1 );
				light1.rotation.x = Math.PI;
				scene.add( light1 );
				var light2 = new THREE.DirectionalLight( 0xffffff, 1 );
				light2.position.set( 0, 15, 0 );
				light2.rotation.x = Math.PI;
				scene.add( light2 );

				var geometry = new THREE.BufferGeometry();
				var indices = [];
				var vertices = [];
				var normals = [];
				var colors = [];
				var size = 20;
				var segments = 10;
				var halfSize = size / 2;
				var segmentSize = size / segments;
				// generate vertices, normals and color data for a simple grid geometry
				for ( var i = 0; i <= segments; i ++ ) {
					var y = ( i * segmentSize ) - halfSize;
					for ( var j = 0; j <= segments; j ++ ) {
						var x = ( j * segmentSize ) - halfSize;
						vertices.push( x, - y, 0 );
						normals.push( 0, 0, 1 );
						var r = ( x / size ) + 1.5;
						var g = ( y / size ) + 1.5;
						colors.push( r, g, 2 );
					}
				}
				// generate indices (data for element array buffer)
				for ( var i = 0; i < segments; i ++ ) {
					for ( var j = 0; j < segments; j ++ ) {
						var a = i * ( segments + 1 ) + ( j + 1 );
						var b = i * ( segments + 1 ) + j;
						var c = ( i + 1 ) * ( segments + 1 ) + j;
						var d = ( i + 1 ) * ( segments + 1 ) + ( j + 1 );
						// generate two faces (triangles) per iteration
						indices.push( a, b, d ); // face one
						indices.push( b, c, d ); // face two
					}
				}
				//
				geometry.setIndex( indices );
				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
				geometry.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
				var material = new THREE.MeshPhongMaterial( {
					specular: 0x111111, shininess: 550,
					side: THREE.DoubleSide, vertexColors: THREE.VertexColors
				} );
				mesh = new THREE.Mesh( geometry, material );
				mesh.scale.set (3.5,3.5);
				mesh.rotation.x = Math.PI/2;
				mesh.position.y = -14.5;
				scene.add( mesh );
				//


				//
				// var gui = new dat.GUI()
				// gui.add( material, 'wireframe' );
				//

			// Setup camera
			camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
			// camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 1500 );
			camera.position.set(0, 10, 40);
			// camera.lookAt(new THREE.Vector3(0, 0, 0));
			// camera.position.set( 0, 400, 700 );
			cameraTarget = new THREE.Vector3( 0, 0, 0 );

			//Create a kinectron geometry instance - First argument takes the rendering type ("wire" / "points" / "mesh")
			kinectronGeo = new THREE.KinectGeometry('points');
			kinectronGeo2 = new THREE.KinectGeometry('points');
			kinectronGeo3 = new THREE.KinectGeometry('points');
			kinectronGeo4 = new THREE.KinectGeometry('points');
			// kinectronGeo.height = 1000;

			kinectronGeo.position.z = -30;
			// kinectronGeo.position.y = 0;
			kinectronGeo.scale.set(15,15,15);
			kinectronGeo2.rotation.y = Math.PI/2;
			kinectronGeo2.position.x = -30;
			// kinectronGeo2.position.y = 20;
			kinectronGeo2.scale.set(15,15,15);
			kinectronGeo3.position.z = 30;
			// kinectronGeo3.position.y = 20;
			kinectronGeo3.rotation.y = Math.PI;
			kinectronGeo3.scale.set(15,15,15);
			kinectronGeo4.rotation.y = Math.PI*3/2;
			kinectronGeo4.position.x = 30;
			// kinectronGeo4.position.y = 20;
			kinectronGeo4.scale.set(15,15,15);


			//Add it to the scene
			scene.add(kinectronGeo);
			scene.add(kinectronGeo2);
			scene.add(kinectronGeo3);
			scene.add(kinectronGeo4);


			// scene.add(geometry);

			//Create mouse OrbitControls
			controls = new THREE.OrbitControls(camera);
			controls.enableDamping = true;
			controls.rotateSpeed = - 0.25;

			// var textures = getTexturesFromAtlasFile( "textures/white.jpg", 6 );


			// var materials = [];
			// for ( var i = 0; i < 6; i ++ ) {
			// 	materials.push( new THREE.MeshBasicMaterial( { map: textures[ i ] } ) );
			// }
			// var skyBox = new THREE.Mesh( new THREE.CubeGeometry( 1, 1, 1 ), materials );
			// skyBox.geometry.scale( 1, 1, - 1 );
			// scene.add( skyBox );


				// // //cubemap
				// var path = "textures/mp_morningdew/morningdew_";
				// var format = '.jpg';
				// var urls = [
				// 		path + 'ft' + format, path + 'bk' + format,
				// 		path + 'up' + format, path + 'dn' + format,
				// 		path + 'rt' + format, path + 'lf' + format
				// 	];
				// var reflectionCube = new THREE.CubeTextureLoader().load( urls );
				// // reflectionCube.format = THREE.RGBFormat;
				// // var refractionCube = new THREE.CubeTextureLoader().load( urls );
				// // refractionCube.mapping = THREE.CubeRefractionMapping;
				// // refractionCube.format = THREE.RGBFormat;
				// // scene = new THREE.Scene();
				// // var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: reflectionCube } );

				// scene.background = reflectionCube;


			// A grid helper as a floor reference
			// var gridHelper = new THREE.GridHelper(100, 100);
			// scene.add(gridHelper);

			//Add stats
			stats = new Stats();
			stats.showPanel(0);
			// document.body.appendChild(stats.dom);

			//Add an event listener for window resize
			window.addEventListener('resize', onWindowResize, false);

			//Add an event listener to key down
			window.addEventListener('keydown', onKeyDown, false);


//Text
			materials = [
					new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } ), // front
					new THREE.MeshPhongMaterial( { color: 0xffffff } ) // side
			];

			group = new THREE.Group();
				group.position.y = 10;
				scene.add( group );

			var loader = new THREE.FontLoader();

			loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
				console.log("loaded")
				var textGeometry = new THREE.TextGeometry( 'Semper Simul', {
					font: font,
					size: 12,
					height: 1,
					curveSegments: 5,
					bevelEnabled: true,
					bevelThickness: 1,
					bevelSize: 0.2,
					bevelSegments: 5
				} );


				textGeometry.computeBoundingBox();
				textGeometry.computeVertexNormals();

				var centerOffset = -0.5 * ( textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x );

				textMesh1 = new THREE.Mesh( textGeometry, materials );
				textMesh1.position.x = centerOffset;
				textMesh1.position.y = hover;
				textMesh1.position.z = 0;
				textMesh1.rotation.x = 0;
				textMesh1.rotation.y = Math.PI * 2;
				group.add( textMesh1 );


			} );

			var texture = new THREE.TextureLoader().load('textures/white.jpg');
			var cube = new THREE.BoxBufferGeometry(1,1,1);
			var material = new THREE.MeshBasicMaterial({map: texture});

			cubeMesh = new THREE.Mesh(cube, material);
			cubeMesh.position.y = 100;
			// scene.add(cubeMesh);

			var geometryCube = new THREE.BoxGeometry(70,10,70);

			for ( var i = 0; i < geometryCube.faces.length; i += 2 ) {
					var hex =  Math.random() * 0xffffff;
					geometryCube.faces[ i ].color.setHex( hex );
					geometryCube.faces[ i + 1 ].color.setHex( hex );
				}
				var material = new THREE.MeshPhongMaterial( { vertexColors: THREE.FaceColors, overdraw: 0.5, specular: 0x111111, shininess: 50 } );
				box = new THREE.Mesh( geometryCube, material );
				box.position.y = -20;
				scene.add( box );


		// 		 	// instantiate a loader
		// 	var loader = new THREE.OBJLoader();

		// 	// load a resource
		// 	loader.load(
		// 	// resource URL
		// 	'models/cleanBeefTartare.obj',
		// 	// called when resource is loaded
		// 	function ( object ) {

		// 	scene.add( object );

		// 	},
		// 	// called when loading is in progresses
		// 	function ( xhr ) {

		// 	console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

		// 	},
		// 	// called when loading has errors
		// 	function ( error ) {

		// 	console.log( 'An error happened' );

		// 	}
		// );


			// var myTextureCube = new THREE.TextureLoader().load('textures/white.jpg');

			// var SkyBox = require('three-skybox')(THREE);

			// var skybox = new SkyBox( renderer , myTextureCube );


////////////
// skybox //
////////////
var materialArray = [];
materialArray.push(new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'textures/white.jpg' ) }));
materialArray.push(new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'textures/white.jpg' ) }));
materialArray.push(new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'textures/white.jpg' ) }));
materialArray.push(new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'textures/white.jpg' ) }));
materialArray.push(new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'textures/white.jpg' ) }));
materialArray.push(new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'textures/white.jpg' ) }));
for (var i = 0; i < 6; i++)
   materialArray[i].side = THREE.BackSide;
var skyboxMaterial =  materialArray;
var skyboxGeom = new THREE.CubeGeometry( 5000, 5000, 5000, 1, 1, 1 );
var skybox = new THREE.Mesh( skyboxGeom, skyboxMaterial );
// scene.add( skybox );


			render();


		}


		function onNewKinectFrame(ktronImg) {
			kinectronGeo.kinectron.bind(ktronImg.src);
		}
		function onNewKinectFrame2(ktronImg2) {
			kinectronGeo2.kinectron.bind(ktronImg2.src);
		}

		function onKeyDown() {
			// Use '9' key to stop kinect from running
			if (event.keyCode === 57) {
				kinectron.stopAll();
			}
		}

		function render() {

			//Update the FPS counter
			stats.update();

			//Request the next frame
			requestAnimationFrame(render);

			// group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;
			camera.lookAt( cameraTarget );
			renderer.clear();

			//required when damping is enabled
			controls.update();
			//Render
			renderer.render(scene, camera);
		}

		function onWindowResize() {
			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize(window.innerWidth, window.innerHeight);
		}
	</script>

</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<title>Kinectron For Three.js - Simple Example</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<!-- Origin Trial Token, feature = WebVR (For Chrome M59+), origin = https://juniorxsound.github.io, expires = 2017-08-16 -->
	<meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M59+)" data-expires="2017-08-16" content="Ahwo2B0LoM2bLB015eLJ4CAvJa0xF9VVn0FO1/AaYfPklvBUwcfYFkXKenD57vhGo1WQt9Hg9IFauhKdRgLN8w8AAABreyJvcmlnaW4iOiJodHRwczovL2p1bmlvcnhzb3VuZC5naXRodWIuaW86NDQzIiwiZmVhdHVyZSI6IldlYlZSMS4xIiwiZXhwaXJ5IjoxNTAyOTEyNTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZX0=">
	<style>
	body {
	/background: #000;/
	color: #fff;
	padding: 0;
	margin: 0;
	overflow: hidden;
	font-family: georgia;
	text-align: center;
	}

	a {
	color: skyblue;
	text-decoration: none
	}
	</style>
	</head>

	<body>
	<!-- <div id="container"></div> -->
	<!--Three.js - TODO - swap with hosted versions so example serve from Github pages-->
	<script src="./dat.gui/build/dat.gui.min.js"></script>
	<script src="js/Detector.js"></script>
	<script src="../node_modules/three/build/three.min.js"></script>
	<script src="../node_modules/three/examples/js/controls/OrbitControls.js"></script>
	<script src="../node_modules/three/examples/js/libs/stats.min.js"></script>
	<script src="http://threejs.org/examples/js/loaders/OBJLoader.js"></script>

	<!-- Kinectron client side library -->
	<script src="../ext/kinectron/client/bin/kinectron.bundle.js"></script>

	<!--Three.js Kinectron plugin-->
	<script src="../dist/three.kinectron.js"></script>

	<script>

	if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
	// var container, stats;

	//Some general Three.js components
	var renderer,
	scene,
	camera,
	controls,
	stats;

	var mesh;

	//DepthKit character
	var character;

	//Kinectron
	var kinectron,
	kinectron2,
	kinectronGeo,
	kinectronGeo2,
	kinectronGeo3,
	kinectronGeo4,
	group,
	geometry,
	materials,
	textMesh1;

	var hover = 150;



	//Kick off the example
	window.onload = function() {
	init();
	}

	function init() {
	//Setup renderer
	renderer = new THREE.WebGLRenderer({ antialias: true } );
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);




	//Setup Kinectron
	var kinectronIpAddress = "172.16.221.156"; //Add Kinectron IP here
	var kinectronIpAddress2 = "172.16.237.102"; //Add Kinectron IP here


	//Open connection with Kinect
	kinectron = new Kinectron(kinectronIpAddress);
	kinectron2 = new Kinectron(kinectronIpAddress2);

	// kinectron2 = new Kinectron(kinectronIpAddress);
	kinectron.makeConnection();
	kinectron2.makeConnection();
	// kinectron2.makeConnection();

	//Start RGBD feed and set callback for new frames
	kinectron.startRGBD(onNewKinectFrame);
	kinectron2.startRGBD(onNewKinectFrame2);

	// Setup scene
	scene = new THREE.Scene();
	scene.background = new THREE.Color( 0x050505);
	scene.fog = new THREE.Fog( 0x000000, 250, 1400 );


	var pointLight = new THREE.PointLight( 0xffffff, 1.5 );
	pointLight.position.set( 0, 20, 0 );
	// scene.add( pointLight );

	var ambientLight = new THREE.AmbientLight( 0x222222 );
	scene.add( ambientLight );
	var light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
	light1.position.set( 1, 1, 1 );
	light1.rotation.x = Math.PI;
	scene.add( light1 );
	var light2 = new THREE.DirectionalLight( 0xffffff, 1 );
	light2.position.set( 0, 15, 0 );
	light2.rotation.x = Math.PI;
	scene.add( light2 );

	var geometry = new THREE.BufferGeometry();
	var indices = [];
	var vertices = [];
	var normals = [];
	var colors = [];
	var size = 20;
	var segments = 10;
	var halfSize = size / 2;
	var segmentSize = size / segments;
	// generate vertices, normals and color data for a simple grid geometry
	for ( var i = 0; i <= segments; i ++ ) {
	var y = ( i * segmentSize ) - halfSize;
	for ( var j = 0; j <= segments; j ++ ) {
	var x = ( j * segmentSize ) - halfSize;
	vertices.push( x, - y, 0 );
	normals.push( 0, 0, 1 );
	var r = ( x / size ) + 1.5;
	var g = ( y / size ) + 1.5;
	colors.push( r, g, 2 );
	}
	}
	// generate indices (data for element array buffer)
	for ( var i = 0; i < segments; i ++ ) {
	for ( var j = 0; j < segments; j ++ ) {
	var a = i * ( segments + 1 ) + ( j + 1 );
	var b = i * ( segments + 1 ) + j;
	var c = ( i + 1 ) * ( segments + 1 ) + j;
	var d = ( i + 1 ) * ( segments + 1 ) + ( j + 1 );
	// generate two faces (triangles) per iteration
	indices.push( a, b, d ); // face one
	indices.push( b, c, d ); // face two
	}
	}
	//
	geometry.setIndex( indices );
	geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
	geometry.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
	geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
	var material = new THREE.MeshPhongMaterial( {
	specular: 0x111111, shininess: 550,
	side: THREE.DoubleSide, vertexColors: THREE.VertexColors
	} );
	mesh = new THREE.Mesh( geometry, material );
	mesh.scale.set (3.5,3.5);
	mesh.rotation.x = Math.PI/2;
	mesh.position.y = -14.5;
	scene.add( mesh );
	//


	//
	// var gui = new dat.GUI()
	// gui.add( material, 'wireframe' );
	//

	// Setup camera
	camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
	// camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 1500 );
	camera.position.set(0, 10, 40);
	// camera.lookAt(new THREE.Vector3(0, 0, 0));
	// camera.position.set( 0, 400, 700 );
	cameraTarget = new THREE.Vector3( 0, 0, 0 );

	//Create a kinectron geometry instance - First argument takes the rendering type ("wire" / "points" / "mesh")
	kinectronGeo = new THREE.KinectGeometry('points');
	kinectronGeo2 = new THREE.KinectGeometry('points');
	kinectronGeo3 = new THREE.KinectGeometry('points');
	kinectronGeo4 = new THREE.KinectGeometry('points');
	// kinectronGeo.height = 1000;

	kinectronGeo.position.z = -30;
	// kinectronGeo.position.y = 0;
	kinectronGeo.scale.set(15,15,15);
	kinectronGeo2.rotation.y = Math.PI/2;
	kinectronGeo2.position.x = -30;
	// kinectronGeo2.position.y = 20;
	kinectronGeo2.scale.set(15,15,15);
	kinectronGeo3.position.z = 30;
	// kinectronGeo3.position.y = 20;
	kinectronGeo3.rotation.y = Math.PI;
	kinectronGeo3.scale.set(15,15,15);
	kinectronGeo4.rotation.y = Math.PI*3/2;
	kinectronGeo4.position.x = 30;
	// kinectronGeo4.position.y = 20;
	kinectronGeo4.scale.set(15,15,15);


	//Add it to the scene
	scene.add(kinectronGeo);
	scene.add(kinectronGeo2);
	scene.add(kinectronGeo3);
	scene.add(kinectronGeo4);


	// scene.add(geometry);

	//Create mouse OrbitControls
	controls = new THREE.OrbitControls(camera);
	controls.enableDamping = true;
	controls.rotateSpeed = - 0.25;

	// var textures = getTexturesFromAtlasFile( "textures/white.jpg", 6 );


	// var materials = [];
	// for ( var i = 0; i < 6; i ++ ) {
	// materials.push( new THREE.MeshBasicMaterial( { map: textures[ i ] } ) );
	// }
	// var skyBox = new THREE.Mesh( new THREE.CubeGeometry( 1, 1, 1 ), materials );
	// skyBox.geometry.scale( 1, 1, - 1 );
	// scene.add( skyBox );


	// // //cubemap
	// var path = "textures/mp_morningdew/morningdew_";
	// var format = '.jpg';
	// var urls = [
	// path + 'ft' + format, path + 'bk' + format,
	// path + 'up' + format, path + 'dn' + format,
	// path + 'rt' + format, path + 'lf' + format
	// ];
	// var reflectionCube = new THREE.CubeTextureLoader().load( urls );
	// // reflectionCube.format = THREE.RGBFormat;
	// // var refractionCube = new THREE.CubeTextureLoader().load( urls );
	// // refractionCube.mapping = THREE.CubeRefractionMapping;
	// // refractionCube.format = THREE.RGBFormat;
	// // scene = new THREE.Scene();
	// // var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: reflectionCube } );

	// scene.background = reflectionCube;


	// A grid helper as a floor reference
	// var gridHelper = new THREE.GridHelper(100, 100);
	// scene.add(gridHelper);

	//Add stats
	stats = new Stats();
	stats.showPanel(0);
	// document.body.appendChild(stats.dom);

	//Add an event listener for window resize
	window.addEventListener('resize', onWindowResize, false);

	//Add an event listener to key down
	window.addEventListener('keydown', onKeyDown, false);



	//Text
	materials = [
	new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } ), // front
	new THREE.MeshPhongMaterial( { color: 0xffffff } ) // side
	];

	group = new THREE.Group();
	group.position.y = 10;
	scene.add( group );

	var loader = new THREE.FontLoader();

	loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
	console.log("loaded")
	var textGeometry = new THREE.TextGeometry( 'Semper Simul', {
	font: font,
	size: 12,
	height: 1,
	curveSegments: 5,
	bevelEnabled: true,
	bevelThickness: 1,
	bevelSize: 0.2,
	bevelSegments: 5
	} );



	textGeometry.computeBoundingBox();
	textGeometry.computeVertexNormals();

	var centerOffset = -0.5 * ( textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x );

	textMesh1 = new THREE.Mesh( textGeometry, materials );
	textMesh1.position.x = centerOffset;
	textMesh1.position.y = hover;
	textMesh1.position.z = 0;
	textMesh1.rotation.x = 0;
	textMesh1.rotation.y = Math.PI * 2;
	group.add( textMesh1 );


	} );

	var texture = new THREE.TextureLoader().load('textures/white.jpg');
	var cube = new THREE.BoxBufferGeometry(1,1,1);
	var material = new THREE.MeshBasicMaterial({map: texture});

	cubeMesh = new THREE.Mesh(cube, material);
	cubeMesh.position.y = 100;
	// scene.add(cubeMesh);

	var geometryCube = new THREE.BoxGeometry(70,10,70);

	for ( var i = 0; i < geometryCube.faces.length; i += 2 ) {
	var hex = Math.random() * 0xffffff;
	geometryCube.faces[ i ].color.setHex( hex );
	geometryCube.faces[ i + 1 ].color.setHex( hex );
	}
	var material = new THREE.MeshPhongMaterial( { vertexColors: THREE.FaceColors, overdraw: 0.5, specular: 0x111111, shininess: 50 } );
	box = new THREE.Mesh( geometryCube, material );
	box.position.y = -20;
	scene.add( box );


	// // instantiate a loader
	// var loader = new THREE.OBJLoader();

	// // load a resource
	// loader.load(
	// // resource URL
	// 'models/cleanBeefTartare.obj',
	// // called when resource is loaded
	// function ( object ) {

	// scene.add( object );

	// },
	// // called when loading is in progresses
	// function ( xhr ) {

	// console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

	// },
	// // called when loading has errors
	// function ( error ) {

	// console.log( 'An error happened' );

	// }
	// );


	// var myTextureCube = new THREE.TextureLoader().load('textures/white.jpg');

	// var SkyBox = require('three-skybox')(THREE);

	// var skybox = new SkyBox( renderer , myTextureCube );


	////////////
	// skybox //
	////////////
	var materialArray = [];
	materialArray.push(new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'textures/white.jpg' ) }));
	materialArray.push(new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'textures/white.jpg' ) }));
	materialArray.push(new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'textures/white.jpg' ) }));
	materialArray.push(new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'textures/white.jpg' ) }));
	materialArray.push(new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'textures/white.jpg' ) }));
	materialArray.push(new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load( 'textures/white.jpg' ) }));
	for (var i = 0; i < 6; i++)
	materialArray[i].side = THREE.BackSide;
	var skyboxMaterial = materialArray;
	var skyboxGeom = new THREE.CubeGeometry( 5000, 5000, 5000, 1, 1, 1 );
	var skybox = new THREE.Mesh( skyboxGeom, skyboxMaterial );
	// scene.add( skybox );


	render();




	}


	function onNewKinectFrame(ktronImg) {
	kinectronGeo.kinectron.bind(ktronImg.src);
	}
	function onNewKinectFrame2(ktronImg2) {
	kinectronGeo2.kinectron.bind(ktronImg2.src);
	}

	function onKeyDown() {
	// Use '9' key to stop kinect from running
	if (event.keyCode === 57) {
	kinectron.stopAll();
	}
	}

	function render() {

	//Update the FPS counter
	stats.update();

	//Request the next frame
	requestAnimationFrame(render);

	// group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;
	camera.lookAt( cameraTarget );
	renderer.clear();

	//required when damping is enabled
	controls.update();
	//Render
	renderer.render(scene, camera);
	}

	function onWindowResize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
	}
	</script>

	</body>

	</html>