samien
/
three.js
cermin dari https://github.com/mrdoob/three.js.git


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

			.fancy_select {
				background: #fff;
				border: 1px solid #ccc;
				padding: 0;
				cursor: default;
				overflow: auto;
			}

			.option_item {
				padding: 0 0.25em;
			}

			.option_selected {
				background: #000;
				color: #fff;
			}

			.object_type { color: #aaa }
		</style>
	</head>
	<body>

		<script src="../build/three.min.js"></script>
		<script src="../examples/js/controls/TrackballControls.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="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/Viewport.js"></script>
		<script src="js/ui/Sidebar.js"></script>
		<script src="js/ui/Sidebar.Outliner.js"></script>
		<script src="js/ui/Sidebar.Properties.js"></script>
		<script src="js/ui/Sidebar.Properties.Object3D.js"></script>
		<script src="js/ui/Sidebar.Properties.Geometry.js"></script>
		<script src="js/ui/Sidebar.Properties.Material.js"></script>

		<script>

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

			var SIGNALS = signals;

			var signals = {

				sceneCreated: new SIGNALS.Signal(),
				sceneChanged: new SIGNALS.Signal(),
				objectAdded: new SIGNALS.Signal(),
				objectRemoved: new SIGNALS.Signal(),
				objectSelected: new SIGNALS.Signal(),
				objectChanged: new SIGNALS.Signal(),
				materialChanged: new SIGNALS.Signal(),
				windowResize: new SIGNALS.Signal()

			};

			//

			var canvas = document.createElement( 'canvas' );
			var context = canvas.getContext( '2d' );
			context.fillStyle = 'rgb(255,255,255)';
			context.fillRect( 0, 0, canvas.width, canvas.height );

			var dummyTexture = new THREE.Texture( canvas );
			dummyTexture.needsUpdate = true;

			//

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

			var sidebar = new Sidebar( signals );
			sidebar.setLeft( '-webkit-calc(100% - 300px)', '-moz-calc(100% - 300px)', 'calc(100% - 300px)' );
			sidebar.setTop( '32px' );
			sidebar.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' );
			document.body.appendChild( sidebar.dom );

			var viewport = new Viewport( signals );
			viewport.setTop( '32px' );
			viewport.setWidth( '-webkit-calc(100% - 300px)', '-moz-calc(100% - 300px)', 'calc(100% - 300px)' );
			viewport.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' );
			document.body.appendChild( viewport.dom );

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

				// delete

				if ( event.which === 46 ) {

					// here should come confirmation pop-up modal dialog

					signals.objectRemoved.dispatch();

				}

			} );

			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 ) {

								var mesh = new THREE.Mesh( geometry, createDummyMaterial( geometry ) );
								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;
								applyDummyTexture( collada.scene );

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

							} );

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

						break;

					case 'js':

						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

							var data = JSON.parse( contents );

							if ( data.metadata === undefined ) data.metadata = { type: 'geometry' }; // 2.0
							if ( data.metadata.type === undefined ) data.metadata.type = 'geometry'; // 3.0

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

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

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

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

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

									scene.name = filename;

									signals.objectAdded.dispatch( scene );
									signals.objectSelected.dispatch( 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;
							applyDummyTexture( object );

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

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

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

						break;

				}

			}

			var geometry = new THREE.SphereGeometry( 75, 25, 15 );

			var color = Math.random() * 0xffffff;
			var material = new THREE.MeshLambertMaterial( { color: color, ambient: color, map: dummyTexture } );

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

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

			var onWindowResize = function ( event ) {

				signals.windowResize.dispatch();

			};

			var createDummyMaterial = function ( geometry ) {

				var material = new THREE.MeshLambertMaterial();

				if ( geometry.faceVertexUvs[ 0 ].length > 0 )
					material.map = dummyTexture;

				return material;

			};

			var applyDummyTexture = function ( root ) {

				root.traverse( function ( node ) {

					if ( node.material && node.geometry.faceVertexUvs[ 0 ].length > 0 ) {

						node.material.map = dummyTexture;

					}

				} );

			};

			onWindowResize();

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

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