poshaughnessy/jsonmodelviewer.html

## jsonmodelviewer.html
<!doctype html>
<html lang="en">
	<head>
		<title>Three.js JSON model viewer</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #ccc;
				margin: 0px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<script src="js/Three.js"></script>
		<script src="js/jquery-1.7.1.min.js"></script>
		<script src="js/Detector.js"></script>

		<script>

			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			var container, stats;

			var camera, scene, renderer, objects;
			var particleLight, pointLight;
			var dae, skin;

			function init() {

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

				scene = new THREE.Scene();

				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
				camera.position.set( 0, 0, 1800 );
				scene.add( camera );

				var loader = new THREE.JSONLoader();

				loader.load( "monster-decimated.js", function ( geometry ) {

					geometry.materials[0].shading = THREE.FlatShading;

					var faceMaterial = new THREE.MeshFaceMaterial();

					var mesh = new THREE.Mesh(geometry, faceMaterial);

					mesh.scale.set(0.7, 0.7, 0.7);
					mesh.position.set(-500, -500, -500);

					scene.add( mesh );

				} );


				// Lights

				scene.add( new THREE.AmbientLight( 0xcccccc ) );

				pointLight = new THREE.PointLight( 0xff4400, 50, 1000 );
				pointLight.position.set( 1000, 0, 0 );
				scene.add( pointLight );

				// Renderer

				renderer = new THREE.WebGLRenderer();
				renderer.setSize( window.innerWidth, window.innerHeight );

				container.appendChild( renderer.domElement );

			}

			function animate() {

				requestAnimationFrame( animate );

				render();

			}

			function render() {

				renderer.render( scene, camera );

			}

			$(function() {
				init();
				animate();
			});

		</script>
	</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<title>Three.js JSON model viewer</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
	body {
	font-family: Monospace;
	background-color: #ccc;
	margin: 0px;
	overflow: hidden;
	}
	</style>
	</head>
	<body>
	<script src="js/Three.js"></script>
	<script src="js/jquery-1.7.1.min.js"></script>
	<script src="js/Detector.js"></script>

	<script>

	if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

	var container, stats;

	var camera, scene, renderer, objects;
	var particleLight, pointLight;
	var dae, skin;

	function init() {

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

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
	camera.position.set( 0, 0, 1800 );
	scene.add( camera );

	var loader = new THREE.JSONLoader();

	loader.load( "monster-decimated.js", function ( geometry ) {

	geometry.materials[0].shading = THREE.FlatShading;

	var faceMaterial = new THREE.MeshFaceMaterial();

	var mesh = new THREE.Mesh(geometry, faceMaterial);

	mesh.scale.set(0.7, 0.7, 0.7);
	mesh.position.set(-500, -500, -500);

	scene.add( mesh );

	} );


	// Lights

	scene.add( new THREE.AmbientLight( 0xcccccc ) );

	pointLight = new THREE.PointLight( 0xff4400, 50, 1000 );
	pointLight.position.set( 1000, 0, 0 );
	scene.add( pointLight );

	// Renderer

	renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );

	container.appendChild( renderer.domElement );

	}

	function animate() {

	requestAnimationFrame( animate );

	render();

	}

	function render() {

	renderer.render( scene, camera );

	}

	$(function() {
	init();
	animate();
	});

	</script>
	</body>
	</html>