index.html


<!doctype html>
<html lang="en">
	<head>
		<title>BodyVisualiser</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link rel="stylesheet" type="text/css" href="css/style.css">
	</head>

	<body>
		
		<div id="info">BodyVisualiser for Valentina Project</div>
        <div id="info"><a href="female.html">Switch to female body.</a></div>
		<div id="info"><a href="kid.html">Switch to kid's body.</a></div>
		<div id="container"></div>
		
		<script src="js/three.js"></script>
		
		<script src="js/UCSCharacter.js"></script>

		<script src='js/data.gui.js'></script>
				
		<script src="js/orbit.js"></script>
		
		<script>
			
		
			var SCREEN_WIDTH = window.innerWidth;
			var SCREEN_HEIGHT = window.innerHeight;

			var container;

			var camera, scene;
			var renderer;
			
			var mesh;

			var mouseX = 0, mouseY = 0;

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

			var clock = new THREE.Clock();
			
			var gui, skinConfig, morphConfig;
				
			
			init();
		
			animate();
			

			function init() {

				container = document.getElementById( 'container' );
				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 100000 );
				camera.position.set(-9.50,3028.228,3324.432);

				scene = new THREE.Scene();

				// LIGHTS


				var light = new THREE.DirectionalLight( 0xffffff, 1 );
				light.position.set( 0, -1, 0 );
				light.position.set( 13, 5, 0 );
				scene.add( light );

				// RENDERER

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
				renderer.setClearColor( 0xffffff );
				container.appendChild( renderer.domElement );

				// CHARACTER
	
				character = new THREE.prototype();
				character.onLoadComplete = function() {
					console.log( "Load Complete" );
					console.log( character.numSkins + " skins and " + character.numMorphs + " morphtargets loaded." );
					gui = new dat.GUI();
					setupMorphsGUI();
					gui.width = 300;
					gui.open();
			
				}
				
				var loader = new THREE.XHRLoader();
				loader.load("models/skinned/testconfig.json", function ( text ) {

					var config = JSON.parse( text );
					character.loadParts( config );
					scene.add( character.root );
				} );

				window.addEventListener( 'resize', onWindowResize, false );
				
				controls = new THREE.OrbitControls( camera, renderer.domElement );
				controls.center.set( 0, 3000, 0);

				controls.addEventListener( 'change', render );

			}
			
		
			function setupMorphsGUI() {
				
				var morphGui = gui.addFolder( "Morphs" );
				
				morphConfig = {};
				
				var morphCallback = function( index ) {
					return function () {

						character.updateMorphs( morphConfig );
					}
				}
				
				for ( var i = 0; i < character.numMorphs; i ++ ) {
					var morphName = character.morphs[ i ];
					
					morphConfig[ morphName ] = character.morphslimit[ i ];
					
				}
				
				for ( var i = 0; i < character.numMorphs; i ++ ) {
				    
					morphGui.add( morphConfig, character.morphs[ i ] ).min( character.morphslowlimit[ i ] ).max(character.morphshighlimit[ i ]).onChange( morphCallback( i ) );
				}
				
				morphGui.open();
			
			}

			function onWindowResize() {

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

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			
			//

			function animate() {
          
				requestAnimationFrame( animate );
			
				controls.update();

				render();
	

			}

			function render() {

				
				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>