Browse Source

GUI: Added support for dropping .js files
Remembered that @alteredq managed to get this working on a viewer for ro.me. So I just copied the code :)

Mr.doob 14 years ago
parent
commit
b66c1e5744
2 changed files with 63 additions and 27 deletions
  1. 46 15
      gui/index.html
  2. 17 12
      gui/js/Code.js

+ 46 - 15
gui/index.html

@@ -45,6 +45,9 @@
 
 
 		<script>
 		<script>
 
 
+			var BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
+			var URL = window.URL || window.webkitURL || window.mozURL;
+
 			var Signal = signals.Signal;
 			var Signal = signals.Signal;
 
 
 			var signals = {
 			var signals = {
@@ -121,33 +124,61 @@
 				event.preventDefault();
 				event.preventDefault();
 
 
 				var file = event.dataTransfer.files[ 0 ];
 				var file = event.dataTransfer.files[ 0 ];
+				var extension = file.fileName.split( '.' )[1].toLowerCase();
 				var reader = new FileReader();
 				var reader = new FileReader();
 
 
 				reader.onload = function ( event ) {
 				reader.onload = function ( event ) {
 
 
-					var parser = new DOMParser();
-					var xml = parser.parseFromString( event.target.result, 'text/xml' );
+					var contents = event.target.result;
+
+					switch ( extension ) {
+
+						case 'dae':
+
+							var parser = new DOMParser();
+							var xml = parser.parseFromString( contents, 'text/xml' );
+
+							var loader = new THREE.ColladaLoader();
+							loader.parse( xml, function ( collada ) {
+
+								// console.log( collada );
+
+								signals.added.dispatch( collada.scene );
+
+							} );
+
+							break;
+
+						case 'js':
+
+							var blob = new BlobBuilder();
+							blob.append( contents );
+
+							var url = window.URL.createObjectURL( blob.getBlob() );
+
+							var loader = new THREE.JSONLoader();
+							loader.load( { model: url, callback: function ( geometry ) {
 
 
-					var loader = new THREE.ColladaLoader();
-					loader.parse( xml, function ( collada ) {
+								geometry.gui = {
+									paremeters: {
+									},
+									getCode: function () {
 
 
-						console.log( collada );
+										return 'new THREE.JSONLoader( TODO )';
 
 
-						signals.added.dispatch( collada.scene );
+									}
+								};
 
 
-					} );
+								var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
+								var mesh = new THREE.Mesh( geometry, material );
 
 
-					/*
-					var loader = new THREE.JSONLoader();
-					loader.createModel( event.target.result, function ( geometry ) {
+								signals.added.dispatch( mesh );
 
 
-						var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
-						var mesh = new THREE.Mesh( geometry, material );
+							} } );
 
 
-						signals.added.dispatch( mesh );
+							break;
 
 
-					} );
-					*/
+					}
 
 
 				};
 				};
 
 

+ 17 - 12
gui/js/Code.js

@@ -14,16 +14,15 @@ var Code = function () {
 	_checkbox.style.margin = '20px 6px 0px 20px';
 	_checkbox.style.margin = '20px 6px 0px 20px';
 	_checkbox.addEventListener( 'click', function () { _html = !_html; _update(); }, false );
 	_checkbox.addEventListener( 'click', function () { _html = !_html; _update(); }, false );
 	_domElement.appendChild( _checkbox );
 	_domElement.appendChild( _checkbox );
-	
+
 	var _preview = document.createElement( 'a' );
 	var _preview = document.createElement( 'a' );
 	_preview.href = '#';
 	_preview.href = '#';
 	_preview.innerHTML = 'preview';
 	_preview.innerHTML = 'preview';
 	_preview.style.margin = '20px 6px 0px 20px';
 	_preview.style.margin = '20px 6px 0px 20px';
-	_preview.addEventListener( 'click', 
-		function () { 
-			
-			
+	_preview.addEventListener( 'click', function () { 
+
 			// Get unescaped code gen
 			// Get unescaped code gen
+
 			var temp=document.createElement("pre");
 			var temp=document.createElement("pre");
 			temp.innerHTML = _codegen( true );
 			temp.innerHTML = _codegen( true );
 			temp = temp.firstChild.nodeValue;
 			temp = temp.firstChild.nodeValue;
@@ -31,7 +30,7 @@ var Code = function () {
 			temp = temp.replace("js/RequestAnimationFrame.js", "../examples/js/RequestAnimationFrame.js");
 			temp = temp.replace("js/RequestAnimationFrame.js", "../examples/js/RequestAnimationFrame.js");
 			aaa = temp;
 			aaa = temp;
 			console.log('test', temp);
 			console.log('test', temp);
-			
+
 			var opener = window.open('','myconsole',
 			var opener = window.open('','myconsole',
 			  'width=800,height=400'
 			  'width=800,height=400'
 			   +',menubar=1'
 			   +',menubar=1'
@@ -39,15 +38,14 @@ var Code = function () {
 			   +',status=1'
 			   +',status=1'
 			   +',scrollbars=1'
 			   +',scrollbars=1'
 			   +',resizable=1');
 			   +',resizable=1');
-			
-			
+
 			opener.document.writeln( temp );
 			opener.document.writeln( temp );
 			opener.document.close();
 			opener.document.close();
-			
+
 		}, false 
 		}, false 
 	);
 	);
 	_domElement.appendChild( _preview );
 	_domElement.appendChild( _preview );
-	
+
 
 
 	/*
 	/*
 	var _checkboxText = document.createElement( 'span' );
 	var _checkboxText = document.createElement( 'span' );
@@ -68,7 +66,7 @@ var Code = function () {
 	//
 	//
 
 
 	var _list = [];
 	var _list = [];
-	
+
 	var _codegen = function (html) {
 	var _codegen = function (html) {
 		var string = '';
 		var string = '';
 
 
@@ -113,7 +111,7 @@ var Code = function () {
 			'function render() {',
 			'function render() {',
 			'',
 			'',
 			'\trenderer.render( scene, camera );',
 			'\trenderer.render( scene, camera );',
-			'\trenderer.setSize( window.innerWidth, window.innerHeight );',			
+			'\trenderer.setSize( window.innerWidth, window.innerHeight );',
 			'',
 			'',
 			'}'
 			'}'
 
 
@@ -144,6 +142,13 @@ var Code = function () {
 
 
 			var object = scene.objects[ i ];
 			var object = scene.objects[ i ];
 
 
+			if ( object.geometry == undefined || object.geometry.gui == undefined ) {
+
+				_list.push( 'TODO' );
+				continue;
+
+			}
+
 			if ( object instanceof THREE.Mesh ) {
 			if ( object instanceof THREE.Mesh ) {
 
 
 				var string = '';
 				var string = '';