javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
							<html>
	<head>
		<title>three.js gui</title>
		<style>
			@font-face {

				font-family: 'Inconsolata';
				src: url('files/inconsolata.woff') format('woff');
				font-weight: normal;
				font-style: normal;

			}

			body {

				margin: 0;
				overflow: hidden;

			}

			button {

				cursor: pointer;

			}

			pre {

				font-family: 'Inconsolata';

			}
		</style>
	</head>
	<body>

		<script type="text/javascript" src="../build/Three.js"></script>

		<script type="text/javascript" src="js/libs/signals.min.js"></script>

		<script type="text/javascript" src="js/UI.js"></script>
		<script type="text/javascript" src="js/UI.Viewport.js"></script>
		<script type="text/javascript" src="js/UI.Toolbar.js"></script>
		<script type="text/javascript" src="js/Code.js"></script>
		<script type="text/javascript" src="js/Code.Templates.js"></script>

		<script>

			window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
			window.URL = window.URL || window.webkitURL || window.mozURL;

			var Signal = signals.Signal;

			var signals = {

				added: new Signal(),
				updated: new Signal()

			};

			var ui = new UI();
			document.body.appendChild( ui.getDOMElement() );

			var code = new Code()
			document.body.appendChild( code.getDOMElement() );

			var xhalf = 0.7;

			var xr = document.createElement( 'div' );
			xr.style.position = 'absolute';
			xr.style.top = '0px';
			xr.style.width = '1px';
			xr.style.cursor = 'col-resize';
			xr.addEventListener( 'mousedown', function ( event ) {

				event.preventDefault();

				document.body.style.cursor = 'col-resize';
				document.addEventListener( 'mousemove', onMouseMove, false );
				document.addEventListener( 'mouseup', onMouseUp, false );

				function onMouseMove( event ) {

					event.preventDefault();

					xhalf = Math.max( 0, Math.min( 1, event.clientX / window.innerWidth ) );

					update();

				}

				function onMouseUp( event ) {

					document.body.style.cursor = 'auto';
					document.removeEventListener( 'mousemove', onMouseMove, false );
					document.removeEventListener( 'mouseup', onMouseUp, false );

				}

			}, false );
			xr.addEventListener( 'dblclick', function ( event ) {

				xhalf = 0.7;
				update();

			}, false );
			document.body.appendChild( xr );

			//

			document.addEventListener( 'dragover', function ( event ) {

				event.preventDefault();

			}, false );
			document.addEventListener( 'dragleave', function ( event ) {

				event.preventDefault();

			}, false );
			document.addEventListener( 'drop', function ( event ) {

				event.preventDefault();

				var file = event.dataTransfer.files[ 0 ];
				var extension = file.name.split( '.' )[1].toLowerCase();
				var reader = new FileReader();

				reader.onload = function ( event ) {

					var contents = event.target.result;

					switch ( extension ) {

						case 'js':

							var loader = new THREE.JSONLoader();
							loader.createModel( JSON.parse( contents ), function ( geometry ) {

								geometry.gui = {
									paremeters: {
									},
									getCode: function () {

										return 'new THREE.JSONLoader( TODO )';

									}
								};

								var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
								var mesh = new THREE.Mesh( geometry, material );

								signals.added.dispatch( mesh );

							} );

							break;

						case 'dae':

							var parser = new DOMParser();
							var xml = parser.parseFromString( contents, 'text/xml' );

							var loader = new THREE.ColladaLoader();
							loader.parse( xml, function ( collada ) {

								signals.added.dispatch( collada.scene );

							} );

							break;


					}

				};

				reader.readAsText( file );

			}, false );

			// Add Sphere

			var geometry = new THREE.SphereGeometry( 75, 20, 10 );
			var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
			var mesh = new THREE.Mesh( geometry, material );

			signals.added.dispatch( mesh );

			//

			update();
			window.addEventListener( 'resize', function ( event ) { update() }, false );

			function update() {

				ui.setSize( Math.floor( window.innerWidth * xhalf ), window.innerHeight );

				code.setPosition( Math.floor( window.innerWidth * xhalf ), 0 );
				code.setSize( window.innerWidth - Math.floor( window.innerWidth * xhalf ), window.innerHeight );

				xr.style.left = Math.floor( window.innerWidth * xhalf )  + 'px';
				xr.style.height = window.innerHeight + 'px';

			}

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