javascript
/
three.js
cermin dari https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442
							<!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;
							}

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

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

		</style>
	</head>
	<body>

		<script src="../build/three.min.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/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/SceneExporter.js"></script>
		<script src="../examples/js/exporters/OBJExporter.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.Scene.js"></script>
		<script src="js/ui/Sidebar.Object3D.js"></script>
		<script src="js/ui/Sidebar.Geometry.js"></script>
		<script src="js/ui/Sidebar.Material.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(),
				toggleHelpers: new SIGNALS.Signal(),
				resetScene: new SIGNALS.Signal(),

				// notifications

				sceneAdded: 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( '0px' );
			document.body.appendChild( viewport.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( '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 mesh = new THREE.Mesh( geometry, createDummyMaterial() );
								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 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 = { 'format': 2 };
									parseFile( JSON.stringify( event.data ), extension );

								};

								worker.postMessage( new Date().getTime() );

								return;

							}

							// 3.0

							try {

								var data = JSON.parse( contents );

							} catch ( error ) {

								return alert( error );

							}

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

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

							}

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

								data.metadata.type = 'geometry';

							}

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

								var loader = new THREE.JSONLoader();

								loader.createModel( data, function ( geometry ) {

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

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

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

								} );

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

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

									result.scene.name = filename;

									var resetScene = true;

									if ( resetScene ) {

										signals.sceneAdded.dispatch( result.scene, result.currentCamera );

									} else {

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

									}

								}, '' );

							}

						}, 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 '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 mesh = new THREE.Mesh( geometry, createDummyMaterial() );
							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 mesh = new THREE.Mesh( geometry, createDummyMaterial() );
							mesh.name = filename;

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

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

						break;

				}

			}

			// create default scene

			signals.resetScene.dispatch();

			//

			var onWindowResize = function ( event ) {

				signals.windowResize.dispatch();

			};

			var createDummyMaterial = function () {

				return new THREE.MeshPhongMaterial();

			};

			//

			onWindowResize();

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

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