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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js editor</title>
		<style>
			body {
				font-family: Arial, sans-serif;
				font-size: 14px;
				margin: 0;
				overflow: hidden;
			}

			hr {
				border: 0px;
				border-top: 1px solid #ccc;
			}

			.menubar {
				background-color: #eee;
				padding: 0px;
				margin: 0px;
			}

				.menubar .menu {
					float: left;
					width: 50px;
					cursor: pointer;
				}

					.menubar .menu .options {
						display: none;
						padding: 5px 0px;
						background-color: #fff;
						width: 140px;
					}

					.menubar .menu:hover .options {
						display: block;
					}

						.menubar .menu .options hr {
							border-color: #ddd;
						}

						.menubar .menu .options .option {
							color: #666;
							background-color: transparent;
							padding: 5px 10px;
							margin: 0px !important;
						}

							.menubar .menu .options .option:hover {
								color: #fff;
								background-color: #08f;
							}

			.toolbar {
				background-color: #999;
			}

			.sidebar {
				width: 300px;
				background-color: #eee;
				overflow: auto;
			}

				.sidebar .Panel {
					margin-bottom: 10px;
				}

		</style>
	</head>
	<body>

		<script src="../build/three.js"></script>
		<script src="../examples/js/controls/TrackballControls.js"></script>
		<script src="../examples/js/loaders/BinaryLoader.js"></script>
		<script src="../examples/js/loaders/ColladaLoader.js"></script>
		<script src="../examples/js/loaders/OBJLoader.js"></script>
		<script src="../examples/js/loaders/PLYLoader.js"></script>
		<script src="../examples/js/loaders/STLLoader.js"></script>
		<script src="../examples/js/loaders/UTF8Loader.js"></script>
		<script src="../examples/js/loaders/VTKLoader.js"></script>
		<script src="../examples/js/loaders/ctm/lzma.js"></script>
		<script src="../examples/js/loaders/ctm/ctm.js"></script>
		<script src="../examples/js/loaders/ctm/CTMLoader.js"></script>
		<script src="../examples/js/exporters/GeometryExporter.js"></script>
		<script src="../examples/js/exporters/MaterialExporter.js"></script>
		<script src="../examples/js/exporters/SceneExporter.js"></script>
		<script src="../examples/js/exporters/OBJExporter.js"></script>
		<script src="../examples/js/renderers/SoftwareRenderer.js"></script>
		<script src="../examples/js/renderers/SVGRenderer.js"></script>

		<script src="../examples/js/loaders/SceneLoader2.js"></script>
		<script src="../examples/js/exporters/SceneExporter2.js"></script>

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

		<script src="js/UI.js"></script>
		<script src="js/UI.three.js"></script>
		<script src="js/ui/Menubar.js"></script>
		<script src="js/ui/Menubar.File.js"></script>
		<script src="js/ui/Menubar.Edit.js"></script>
		<script src="js/ui/Menubar.Add.js"></script>
		<script src="js/ui/Menubar.Help.js"></script>
		<script src="js/ui/Sidebar.js"></script>
		<script src="js/ui/Sidebar.Renderer.js"></script>
		<script src="js/ui/Sidebar.Scene.js"></script>
		<script src="js/ui/Sidebar.Object3D.js"></script>
		<script src="js/ui/Sidebar.Geometry.js"></script>
		<script src="js/ui/Sidebar.Geometry.PlaneGeometry.js"></script>
		<script src="js/ui/Sidebar.Geometry.CubeGeometry.js"></script>
		<script src="js/ui/Sidebar.Geometry.CylinderGeometry.js"></script>
		<script src="js/ui/Sidebar.Geometry.SphereGeometry.js"></script>
		<script src="js/ui/Sidebar.Geometry.IcosahedronGeometry.js"></script>
		<script src="js/ui/Sidebar.Geometry.TorusGeometry.js"></script>
		<script src="js/ui/Sidebar.Geometry.TorusKnotGeometry.js"></script>
		<script src="js/ui/Sidebar.Material.js"></script>
		<script src="js/ui/Toolbar.js"></script>
		<script src="js/ui/Viewport.js"></script>

		<script>

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

			var SIGNALS = signals;

			var signals = {

				// actions

				cloneSelectedObject: new SIGNALS.Signal(),
				removeSelectedObject: new SIGNALS.Signal(),
				exportGeometry: new SIGNALS.Signal(),
				exportScene: new SIGNALS.Signal(),

				// notifications

				modifierAxisChanged: new SIGNALS.Signal(),
				rendererChanged: new SIGNALS.Signal(),
				sceneChanged: new SIGNALS.Signal(),
				objectAdded: new SIGNALS.Signal(),
				objectSelected: new SIGNALS.Signal(),
				objectChanged: new SIGNALS.Signal(),
				materialChanged: new SIGNALS.Signal(),
				clearColorChanged: new SIGNALS.Signal(),
				cameraChanged: new SIGNALS.Signal(),
				fogTypeChanged: new SIGNALS.Signal(),
				fogColorChanged: new SIGNALS.Signal(),
				fogParametersChanged: new SIGNALS.Signal(),
				windowResize: new SIGNALS.Signal()

			};

			//

			var viewport = new Viewport( signals );
			viewport.setTop( '32px' );
			viewport.setLeft( '0px' );
			viewport.setRight( '300px' );
			viewport.setBottom( '32px' );
			document.body.appendChild( viewport.dom );

			var toolbar = new Toolbar( signals );
			toolbar.setBottom( '0px' );
			toolbar.setLeft( '0px' );
			toolbar.setRight( '300px' );
			toolbar.setHeight( '32px' );
			document.body.appendChild( toolbar.dom );

			var menubar = new Menubar( signals );
			menubar.setWidth( '100%' );
			menubar.setHeight( '32px' );
			document.body.appendChild( menubar.dom );

			var sidebar = new Sidebar( signals );
			sidebar.setRight( '0px' );
			sidebar.setTop( '32px' );
			sidebar.setBottom( '0px' );
			document.body.appendChild( sidebar.dom );

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

				event.preventDefault();
				event.dataTransfer.dropEffect = 'copy';

			}, false );

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

				event.preventDefault();

				var file = event.dataTransfer.files[ 0 ];

				var chunks = file.name.split( '.' );
				var extension = chunks.pop().toLowerCase();
				var filename = chunks.join( '.' );

				parseFile( file, filename, extension );

			}, false );

			var parseFile = function ( file, filename, extension ) {

				switch ( extension ) {

					case 'ctm':

						var reader = new FileReader();
						reader.addEventListener( 'load', function ( event ) {

							var contents = event.target.result;

							var stream = new CTM.Stream( contents );
							stream.offset = 0;

							var loader = new THREE.CTMLoader();
							loader.createModelClassic( new CTM.File( stream ), function( geometry ) {

								geometry.sourceType = "ctm";
								geometry.sourceFile = file.name;

								var material = new THREE.MeshPhongMaterial();

								var mesh = new THREE.Mesh( geometry, material );
								mesh.name = filename;

								signals.objectAdded.dispatch( mesh );
								signals.objectSelected.dispatch( mesh );

							} );

						}, false );
						reader.readAsBinaryString( file );

						break;

					case 'dae':

						var reader = new FileReader();
						reader.addEventListener( 'load', function ( event ) {

							var contents = event.target.result;

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

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

								collada.scene.name = filename;

								signals.objectAdded.dispatch( collada.scene );
								signals.objectSelected.dispatch( collada.scene );

							} );

						}, false );
						reader.readAsText( file );

						break;

					case 'js':
					case 'json':

						var handleJSON = function ( data ) {

							if ( data.metadata === undefined ) { // 2.0

								data.metadata = { type: 'geometry' };

							}

							if ( data.metadata.type === undefined ) { // 3.0

								data.metadata.type = 'geometry';

							}

							if ( data.metadata.version === undefined ) {

								data.metadata.version = data.metadata.formatVersion;

							}

							if ( data.metadata.type === 'geometry' ) {

								var loader = new THREE.JSONLoader();
								var result = loader.parse( data );

								var geometry = result.geometry;
								var material = result.materials !== undefined
											? new THREE.MeshFaceMaterial( result.materials )
											: new THREE.MeshPhongMaterial();

								geometry.sourceType = "ascii";
								geometry.sourceFile = file.name;

								var mesh = new THREE.Mesh( geometry, material );
								mesh.name = filename;

								signals.objectAdded.dispatch( mesh );
								signals.objectSelected.dispatch( mesh );

							} else if ( data.metadata.type === 'scene' ) {

								var loader;

								if ( data.metadata.version < 4 ) {

									loader = new THREE.SceneLoader();
									loader.parse( data, function ( result ) {

										var scene = result.scene;

										while ( scene.children.length > 0 ) {

											signals.objectAdded.dispatch( scene.children[ 0 ] );

										}

									}, '' );

								} else {

									loader = new THREE.SceneLoader2();

									var scene = loader.parse( data );

									while ( scene.children.length > 0 ) {

										signals.objectAdded.dispatch( scene.children[ 0 ] );

									}

								}

							}

						};

						var reader = new FileReader();
						reader.addEventListener( 'load', function ( event ) {

							var contents = event.target.result;

							// 2.0

							if ( contents.indexOf( 'postMessage' ) !== -1 ) {

								var blob = new Blob( [ contents ], { type: 'text/javascript' } );
								var url = URL.createObjectURL( blob );

								var worker = new Worker( url );

								worker.onmessage = function ( event ) {

									event.data.metadata = { version: 2 };
									handleJSON( event.data );

								};

								worker.postMessage( Date.now() );

								return;

							}

							// >= 3.0

							var data;

							try {

								data = JSON.parse( contents );

							} catch ( error ) {

								alert( error );
								return;

							}

							handleJSON( data );

						}, false );
						reader.readAsText( file );

						break;

					case 'obj':

						var reader = new FileReader();
						reader.addEventListener( 'load', function ( event ) {

							var contents = event.target.result;

							var object = new THREE.OBJLoader().parse( contents );
							object.name = filename;

							signals.objectAdded.dispatch( object );
							signals.objectSelected.dispatch( object );

						}, false );
						reader.readAsText( file );

						break;

					case 'ply':

						var reader = new FileReader();
						reader.addEventListener( 'load', function ( event ) {

							var contents = event.target.result;

							console.log( contents );

							var geometry = new THREE.PLYLoader().parse( contents );
							geometry.sourceType = "ply";
							geometry.sourceFile = file.name;

							var material = new THREE.MeshPhongMaterial();

							var mesh = new THREE.Mesh( geometry, material );
							mesh.name = filename;

							signals.objectAdded.dispatch( mesh );
							signals.objectSelected.dispatch( mesh );

						}, false );
						reader.readAsText( file );

						break;

					case 'stl':

						var reader = new FileReader();
						reader.addEventListener( 'load', function ( event ) {

							var contents = event.target.result;

							var geometry = new THREE.STLLoader().parse( contents );
							geometry.sourceType = "stl";
							geometry.sourceFile = file.name;

							var material = new THREE.MeshPhongMaterial();

							var mesh = new THREE.Mesh( geometry, material );
							mesh.name = filename;

							signals.objectAdded.dispatch( mesh );
							signals.objectSelected.dispatch( mesh );

						}, false );
						reader.readAsText( file );

						break;

					/*
					case 'utf8':

						var reader = new FileReader();
						reader.addEventListener( 'load', function ( event ) {

							var contents = event.target.result;

							var geometry = new THREE.UTF8Loader().parse( contents );
							var material = new THREE.MeshLambertMaterial();

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

							signals.objectAdded.dispatch( mesh );
							signals.objectSelected.dispatch( mesh );

						}, false );
						reader.readAsBinaryString( file );

						break;
					*/

					case 'vtk':

						var reader = new FileReader();
						reader.addEventListener( 'load', function ( event ) {

							var contents = event.target.result;

							var geometry = new THREE.VTKLoader().parse( contents );
							geometry.sourceType = "vtk";
							geometry.sourceFile = file.name;

							var material = new THREE.MeshPhongMaterial();

							var mesh = new THREE.Mesh( geometry, material );
							mesh.name = filename;

							signals.objectAdded.dispatch( mesh );
							signals.objectSelected.dispatch( mesh );

						}, false );
						reader.readAsText( file );

						break;

				}

			}

			// localStorage

			if ( localStorage.threejsEditor !== undefined ) {

				var loader = new THREE.SceneLoader2();

				var scene = loader.parse( JSON.parse( localStorage.threejsEditor ) );

				while ( scene.children.length > 0 ) {

					signals.objectAdded.dispatch( scene.children[ 0 ] );

				}

			}

			var timeout;
			var sceneExporter = new THREE.SceneExporter2();

			signals.sceneChanged.add( function ( scene ) {

				clearTimeout( timeout );

				timeout = setTimeout( function () {

					localStorage.threejsEditor = JSON.stringify( sceneExporter.parse( scene ) );

				}, 3000 );

			} );

			//

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

				switch ( event.keyCode ) {

					case 46: // delete

						signals.removeSelectedObject.dispatch();

						break;

				}

			}, false );

			var onWindowResize = function ( event ) {

				signals.windowResize.dispatch();

			};

			window.addEventListener( 'resize', onWindowResize, false );

			onWindowResize();

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