Editor: Scripting working again.

7431f1a3 · Mr.doob · 037cccf0 · 7431f1a3 · 7431f1a3 · 7431f1a3
8 changed file
--- a/editor/index.html
+++ b/editor/index.html
@@ -123,10 +123,7 @@

 					if ( state !== undefined ) {

-						var loader = new THREE.ObjectLoader();
-						var scene = loader.parse( state );
-
-						editor.setScene( scene );
+						editor.fromJSON( state );

 					}

@@ -160,7 +157,7 @@

 						timeout = setTimeout( function () {

-							editor.storage.set( editor.scene.toJSON() );
+							editor.storage.set( editor.toJSON() );

 							editor.signals.savingFinished.dispatch();


--- a/editor/js/Editor.js
+++ b/editor/js/Editor.js
@@ -74,7 +74,7 @@ var Editor = function () {
 	this.geometries = {};
 	this.materials = {};
 	this.textures = {};
-	// this.scripts = {};
+	this.scripts = {};

 	this.selected = null;
 	this.helpers = {};
@@ -355,6 +355,51 @@ Editor.prototype = {

 		this.focus( this.scene.getObjectById( id, true ) );

+	},
+
+	//
+
+	fromJSON: function ( json ) {
+
+		var loader = new THREE.ObjectLoader();
+
+		// backwards
+
+		if ( json.scene === undefined ) {
+
+			var scene = loader.parse( json );
+
+			this.setScene( scene );
+
+			return;
+
+		}
+
+		// TODO: Clean this up somehow
+
+		var camera = loader.parse( json.camera );
+
+		this.camera.position.copy( camera.position );
+		this.camera.rotation.copy( camera.rotation );
+		this.camera.aspect = camera.aspect;
+		this.camera.near = camera.near;
+		this.camera.far = camera.far;
+		
+		this.setScene( loader.parse( json.scene ) );
+		this.scripts = json.scripts;
+
+	},
+
+	toJSON: function () {
+
+		return {
+
+			camera: this.camera.toJSON(),
+			scene: this.scene.toJSON(),
+			scripts: this.scripts
+
+		};
+
 	}

 }
--- a/editor/js/Menubar.File.js
+++ b/editor/js/Menubar.File.js
@@ -213,48 +213,21 @@ Menubar.File = function ( editor ) {
 			'	</head>',
 			'	<body ontouchstart="">',
 			'		<script src="js/three.min.js"></script>',
-			'		<script src="js/OrbitControls.js"></script>',
+			'		<script src="js/app.js"></script>',
 			'		<script>',
 			'',
-			'			var camera, controls, scene, renderer;',
+			'			var loader = new THREE.XHRLoader();',
+			'			loader.load( \'app.json\', function ( text ) {',
 			'',
-			'			var loader = new THREE.ObjectLoader();',
-			'			loader.load( \'scene.json\', function ( object ) {',
+			'				var player = new APP.Player();',
+			'				player.load( JSON.parse( text ) );',
+			'				player.setSize( window.innerWidth, window.innerHeight );',
+			'				player.play();',
 			'',
-			'				scene = object;',
-			'',
-			'				camera = new THREE.PerspectiveCamera( ' + camera.fov + ', 1, ' + camera.near + ', ' + camera.far + ' );',
-			'				camera.position.set( ' + camera.position.x + ', ' + camera.position.y + ', ' + camera.position.z + ' );',
-			'				camera.rotation.set( ' + camera.rotation.x + ', ' + camera.rotation.y + ', ' + camera.rotation.z + ' );',
-			'',
-			'				controls = new THREE.OrbitControls( camera );',
-			'				controls.addEventListener( \'change\', render );',
-			'',
-			'				renderer = new THREE.WebGLRenderer();',
-			'				renderer.setSize( window.innerWidth, window.innerHeight );',
-			'				document.body.appendChild( renderer.domElement );',
-			'',
-			'				camera.aspect = window.innerWidth / window.innerHeight;',
-			'				camera.updateProjectionMatrix();',
-			'',
-			'				animate();',
-			'				render();',
+			'				document.body.appendChild( player.dom );',
 			'',
 			'			} );',
 			'',
-			'			var render = function () {',
-			'',
-			'				renderer.render( scene, camera );',
-			'',
-			'			};',
-			'',
-			'			var animate = function () {',
-			'',
-			'				requestAnimationFrame( animate );',
-			'				controls.update();',
-			'',
-			'			};',
-			'',
 			'		</script>',
 			'	</body>',
 			'</html>'
@@ -263,11 +236,11 @@ Menubar.File = function ( editor ) {

 		//

-		var output = editor.scene.toJSON();
+		var output = editor.toJSON();
 		output = JSON.stringify( output, null, '\t' );
 		output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );

-		zip.file( 'scene.json', output );
+		zip.file( 'app.json', output );

 		//

@@ -278,14 +251,14 @@ Menubar.File = function ( editor ) {
 		} );

 		var loader = new THREE.XHRLoader( manager );
-		loader.load( '../build/three.min.js', function ( content ) {
+		loader.load( 'js/libs/app.js', function ( content ) {

-			zip.file( 'js/three.min.js', content );
+			zip.file( 'js/app.js', content );

 		} );
-		loader.load( '../examples/js/controls/OrbitControls.js', function ( content ) {
+		loader.load( '../build/three.min.js', function ( content ) {

-			zip.file( 'js/OrbitControls.js', content );
+			zip.file( 'js/three.min.js', content );

 		} );


--- a/editor/js/Menubar.Play.js
+++ b/editor/js/Menubar.Play.js
@@ -20,7 +20,7 @@ Menubar.Play = function ( editor ) {

 			isPlaying = true;
 			title.setTextContent( 'Stop' );
-			signals.startPlayer.dispatch( editor.scene.toJSON() );
+			signals.startPlayer.dispatch();

 		} else {


--- a/editor/js/Player.js
+++ b/editor/js/Player.js
@@ -15,12 +15,11 @@ var Player = function ( editor ) {

 	var player = new APP.Player();

-	signals.startPlayer.add( function ( json ) {
+	signals.startPlayer.add( function () {

 		container.setDisplay( '' );

-		player.load( json );
-		player.setCamera( editor.camera );
+		player.load( editor.toJSON() );
 		player.setSize( container.dom.offsetWidth, container.dom.offsetHeight );
 		player.play();


--- a/editor/js/Sidebar.Script.Editor.js
+++ b/editor/js/Sidebar.Script.Editor.js
@@ -4,6 +4,8 @@

 Sidebar.Script.Editor = function ( editor ) {

+	var signals = editor.signals;
+
 	var timeout;

 	var scriptSource = new UI.TextArea( 'javascript' ).setWidth( '240px' ).setHeight( '180px' ).setFontSize( '12px' );
@@ -33,7 +35,7 @@ Sidebar.Script.Editor = function ( editor ) {

 			}

-			editor.scripts[ object.uuid ] = [ source ];
+			editor.scripts[ object.uuid ] = source;

 			editor.signals.objectChanged.dispatch( object );

@@ -41,6 +43,26 @@ Sidebar.Script.Editor = function ( editor ) {

 	} );

+	signals.objectSelected.add( function ( object ) {
+
+		if ( object !== null ) {
+
+			var script = editor.scripts[ object.uuid ];
+
+			if ( script !== undefined ) {
+
+				scriptSource.setValue( script );
+
+			} else {
+
+				scriptSource.setValue( '' );
+
+			}
+
+		}
+
+	} );
+
 	return scriptSource;

 }
--- a/editor/js/Sidebar.Script.js
+++ b/editor/js/Sidebar.Script.js
@@ -27,20 +27,6 @@ Sidebar.Script = function ( editor ) {

 			container.setDisplay( 'block' );

-			/*
-			var scripts = editor.scripts[ object.uuid ];
-
-			if ( scripts !== undefined ) {
-
-				scriptSource.setValue( scripts[ 0 ] );
-
-			} else {
-
-				scriptSource.setValue( '' );
-
-			}
-			*/
-
 		} else {

 			container.setDisplay( 'none' );

--- a/editor/js/libs/app.js
+++ b/editor/js/libs/app.js
@@ -2,88 +2,86 @@
 * @author mrdoob / http://mrdoob.com/
 */

-var APP = {};
+var APP = {

-APP.Player = function () {
+	Player: function () {

-	var loader = new THREE.ObjectLoader();
-	var camera, scene, renderer;
-	var scripts;
-	
-	this.dom = undefined;
+		var loader = new THREE.ObjectLoader();
+		var camera, scene, renderer;

-	this.load = function ( json ) {
+		var scripts = {
+			update: []
+		};
+	
+		this.dom = undefined;

-		renderer = new THREE.WebGLRenderer( { antialias: true } );
+		this.load = function ( json ) {

-		scene = loader.parse( json );
+			renderer = new THREE.WebGLRenderer( { antialias: true } );
+			renderer.setPixelRatio( window.devicePixelRatio );

-		/*
-		scripts = [];
+			camera = loader.parse( json.camera );

-		scene.traverse( function ( child ) {
+			scene = loader.parse( json.scene );

-			if ( child.script !== undefined ) {
+			scripts.update = [];

-				var script = new Function( 'scene', 'time', child.script.source ).bind( child );
-				scripts.push( script );
+			for ( var uuid in json.scripts ) {

-			}
+				var source = json.scripts[ uuid ];
+				var object = scene.getObjectByProperty( 'uuid', uuid, true );

-		} );
-		*/
+				var script = ( new Function( 'scene', 'time', source ).bind( object ) )();

-		this.dom = renderer.domElement;
+				if ( script.update !== undefined ) {

-	};
+					scripts.update.push( script.update );

-	this.setCamera = function ( master ) {
+				}

-		camera = master.clone();
+			}

-	};
+			this.dom = renderer.domElement;

-	this.setSize = function ( width, height ) {
+		};

-		renderer.setSize( width, height );
+		this.setSize = function ( width, height ) {

-	};
+			camera.aspect = width / height;
+			camera.updateProjectionMatrix();

-	var request;
+			renderer.setSize( width, height );

-	var animate = function ( time ) {
+		};

-		request = requestAnimationFrame( animate );
+		var request;

-		/*
-		for ( var i = 0; i < scripts.length; i ++ ) {
+		var animate = function ( time ) {

-			scripts[ i ]( scene, time );
+			request = requestAnimationFrame( animate );

-		}
-		*/
+			for ( var i = 0, l = scripts.update.length; i < l; i ++ ) {

-		renderer.render( scene, camera );
+				scripts.update[ i ]( scene, time );

-	};
+			}

-	this.play = function () {
+			renderer.render( scene, camera );

-		request = requestAnimationFrame( animate );
+		};

-	};
+		this.play = function () {

-	this.stop = function () {
+			request = requestAnimationFrame( animate );

-		cancelAnimationFrame( request );
+		};

-	};
+		this.stop = function () {

-};
+			cancelAnimationFrame( request );

-APP.Script = function ( source ) {
+		};

-	this.uuid = THREE.Math.generateUUID();
-	this.source = source;
+	}

 };