samsmo/three.html

## three.html
<!doctype html>
<html lang="en">
	<head>
		<title>three.js tech demo created by sam smo!</title>
		<meta charset="utf-8">
		<style>
			body {
				background:#000;
				padding:0;
				margin:0;
				overflow:hidden;
				font-family:georgia;
				text-align:center;
			}
			h1 { color:white;}
			a { color:skyblue }
			canvas { pointer-events:none; z-index:10; }

			#d { text-align:center; margin:1em 0 -9.2em 0; z-index:0; position:relative; display:block }
			.button { background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer }
			.inactive { background:#999; color:#eee }
		</style>
	</head>
	<body>
		<div id="d">
			<h1>MONSTA!</h1>
		</div>
		<script src="js/Three.js"></script>
		<script src="js/Detector.js"></script>
		<script src="js/Stats.js"></script>
		<script>

			var SCREEN_WIDTH = window.innerWidth;
			var SCREEN_HEIGHT = window.innerHeight;
			var FLOOR = -250;
			var rotation_matrix;
			var container,stats;

			var camera, scene;
			var webglRenderer;

			var zmesh, geometry;

			var mouseX = 0, mouseY = 0;

			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			var zmeshLoaded = 0;
			var has_gl = 0;

			document.addEventListener( 'mousemove', onDocumentMouseMove, false );

			init();
			animate();

			render_canvas = !has_gl;

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

				camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
				camera.position.z = 700;

				scene = new THREE.Scene();
				scene.add(camera);

				// LIGHTS

				var ambient = new THREE.AmbientLight( 0x221100 );
				scene.add( ambient );

				var directionalLight = new THREE.DirectionalLight( 0xffeedd );
				directionalLight.position.set( 0, -70, 100 ).normalize();
				scene.add( directionalLight );
				var pointLight = new THREE.PointLight( 0xFFFFFF );
				// set its position
				pointLight.position.x = 10;
				pointLight.position.y = 200;
				pointLight.position.z = 500;

				// add to the scene
				scene.add(pointLight);

				// RENDERER

				webglRenderer = new THREE.WebGLRenderer();
				webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
				webglRenderer.domElement.style.position = "relative";
				container.appendChild( webglRenderer.domElement );

				// STATS

				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				stats.domElement.style.zIndex = 100;
				container.appendChild( stats.domElement );

				//LOAD THE MODEL
				var loader = new THREE.JSONLoader(),
					callbackMale   = function( geometry ) { createScene( geometry,  90, FLOOR, 50, 105 ) };

				loader.load( "models/Character.js", callbackMale );
			}

			function createScene( geometry, x, y, z, b ) {

				zmesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );


				zmesh.position.set( x, y, z );
				zmesh.scale.set( 150, 150, 150 );
				zmesh.overdraw = true;
				zmesLoaded = 1;
				scene.add( zmesh );
			}

			function onDocumentMouseMove(event) {

				mouseX = ( event.clientX - windowHalfX );
				mouseY = ( event.clientY - windowHalfY );

			}
			//make the guy move!
			function animate() {
				requestAnimationFrame( animate );
				render();
				stats.update();
			}
			function render() {

				camera.position.x += ( mouseX - camera.position.x ) * .05;
				camera.position.y += ( - mouseY - camera.position.y ) * .05;
				if( zmeshLoaded = 1){
					zmesh.rotation.y -= ( mouseX - zmesh.rotation.y ) * .00005;
				}
				camera.lookAt( scene.position );

				webglRenderer.render( scene, camera );
			}
		</script>

	</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<title>three.js tech demo created by sam smo!</title>
	<meta charset="utf-8">
	<style>
	body {
	background:#000;
	padding:0;
	margin:0;
	overflow:hidden;
	font-family:georgia;
	text-align:center;
	}
	h1 { color:white;}
	a { color:skyblue }
	canvas { pointer-events:none; z-index:10; }

	#d { text-align:center; margin:1em 0 -9.2em 0; z-index:0; position:relative; display:block }
	.button { background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer }
	.inactive { background:#999; color:#eee }
	</style>
	</head>
	<body>
	<div id="d">
	<h1>MONSTA!</h1>
	</div>
	<script src="js/Three.js"></script>
	<script src="js/Detector.js"></script>
	<script src="js/Stats.js"></script>
	<script>

	var SCREEN_WIDTH = window.innerWidth;
	var SCREEN_HEIGHT = window.innerHeight;
	var FLOOR = -250;
	var rotation_matrix;
	var container,stats;

	var camera, scene;
	var webglRenderer;

	var zmesh, geometry;

	var mouseX = 0, mouseY = 0;

	var windowHalfX = window.innerWidth / 2;
	var windowHalfY = window.innerHeight / 2;

	var zmeshLoaded = 0;
	var has_gl = 0;

	document.addEventListener( 'mousemove', onDocumentMouseMove, false );

	init();
	animate();

	render_canvas = !has_gl;

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

	camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
	camera.position.z = 700;

	scene = new THREE.Scene();
	scene.add(camera);

	// LIGHTS

	var ambient = new THREE.AmbientLight( 0x221100 );
	scene.add( ambient );

	var directionalLight = new THREE.DirectionalLight( 0xffeedd );
	directionalLight.position.set( 0, -70, 100 ).normalize();
	scene.add( directionalLight );
	var pointLight = new THREE.PointLight( 0xFFFFFF );
	// set its position
	pointLight.position.x = 10;
	pointLight.position.y = 200;
	pointLight.position.z = 500;

	// add to the scene
	scene.add(pointLight);

	// RENDERER

	webglRenderer = new THREE.WebGLRenderer();
	webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
	webglRenderer.domElement.style.position = "relative";
	container.appendChild( webglRenderer.domElement );

	// STATS

	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.top = '0px';
	stats.domElement.style.zIndex = 100;
	container.appendChild( stats.domElement );

	//LOAD THE MODEL
	var loader = new THREE.JSONLoader(),
	callbackMale = function( geometry ) { createScene( geometry, 90, FLOOR, 50, 105 ) };

	loader.load( "models/Character.js", callbackMale );
	}

	function createScene( geometry, x, y, z, b ) {

	zmesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );



	zmesh.position.set( x, y, z );
	zmesh.scale.set( 150, 150, 150 );
	zmesh.overdraw = true;
	zmesLoaded = 1;
	scene.add( zmesh );
	}

	function onDocumentMouseMove(event) {

	mouseX = ( event.clientX - windowHalfX );
	mouseY = ( event.clientY - windowHalfY );

	}
	//make the guy move!
	function animate() {
	requestAnimationFrame( animate );
	render();
	stats.update();
	}
	function render() {

	camera.position.x += ( mouseX - camera.position.x ) * .05;
	camera.position.y += ( - mouseY - camera.position.y ) * .05;
	if( zmeshLoaded = 1){
	zmesh.rotation.y -= ( mouseX - zmesh.rotation.y ) * .00005;
	}
	camera.lookAt( scene.position );

	webglRenderer.render( scene, camera );
	}
	</script>

	</body>
	</html>