Editor: Added Renderer section.

editor/index.html

@@ -81,9 +81,11 @@
 		<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/SceneExporter2.js"></script>
 		<script src="../examples/js/exporters/OBJExporter.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>
@@ -94,6 +96,7 @@
 		<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>
@@ -251,6 +254,12 @@
 
 							}
 
+							if ( data.metadata.version === undefined ) {
+
+								data.metadata.version = data.metadata.formatVersion;
+
+							}
+
 							if ( data.metadata.type === 'geometry' ) {
 
 								var loader = new THREE.JSONLoader();
@@ -270,7 +279,19 @@
 
 							} else if ( data.metadata.type === 'scene' ) {
 
-								new THREE.SceneLoader().parse( data, function ( result ) {
+								var loader;
+
+								if ( data.metadata.version < 4 ) {
+
+									loader = new THREE.SceneLoader();
+
+								} else {
+
+									loader = new THREE.SceneLoader2();
+
+								}
+
+								loader.parse( data, function ( result ) {
 
 									result.scene.name = filename;
 
@@ -309,7 +330,7 @@
 
 								worker.onmessage = function ( event ) {
 
-									event.data.metadata = { format: 2 };
+									event.data.metadata = { version: 2 };
 									handleJSON( event.data );
 
 								};
@@ -320,7 +341,7 @@
 
 							}
 
-							// 3.0
+							// >= 3.0
 
 							var data;
 

editor/js/ui/Sidebar.Renderer.js

@@ -0,0 +1,36 @@
+Sidebar.Renderer = function ( signals ) {
+
+	var container = new UI.Panel();
+	container.setPadding( '10px' );
+	container.setBorderTop( '1px solid #ccc' );
+
+	container.add( new UI.Text().setValue( 'RENDERER' ).setColor( '#666' ) );
+	container.add( new UI.Break(), new UI.Break() );
+
+	// clear color
+
+	var clearColorRow = new UI.Panel();
+	var clearColor = new UI.Color( 'absolute' ).setLeft( '100px' ).setValue( '#aaaaaa' ).onChange( updateClearColor );
+
+	clearColorRow.add( new UI.Text().setValue( 'Clear color' ).setColor( '#666' ) );
+	clearColorRow.add( clearColor );
+
+	container.add( clearColorRow );
+
+	function updateClearColor() {
+
+		signals.clearColorChanged.dispatch( clearColor.getHexValue() );
+
+	}
+
+	// events
+
+	signals.clearColorChanged.add( function ( color ) {
+
+		clearColor.setHexValue( color );
+
+	} );
+
+	return container;
+
+}

editor/js/ui/Sidebar.Scene.js

@@ -26,16 +26,6 @@ Sidebar.Scene = function ( signals ) {
 	container.add( outliner );
 	container.add( new UI.Break() );
 
-	// clear color
-
-	var clearColorRow = new UI.Panel();
-	var clearColor = new UI.Color( 'absolute' ).setLeft( '100px' ).setValue( '#aaaaaa' ).onChange( updateClearColor );
-
-	clearColorRow.add( new UI.Text().setValue( 'Clear color' ).setColor( '#666' ) );
-	clearColorRow.add( clearColor );
-
-	container.add( clearColorRow );
-
 	// fog
 
 	var fogTypeRow = new UI.Panel();
@@ -64,18 +54,6 @@ Sidebar.Scene = function ( signals ) {
 
 	container.add( fogColorRow );
 
-	// clear color lock
-
-	var colorLockEnabled = true;
-
-	var colorLockRow = new UI.Panel();
-	colorLockRow.setDisplay( 'inline-block' ).setLeft( '100px' ).setMargin( '0px' );
-
-	var colorLock = new UI.Checkbox( 'relative' ).setLeft( '10px' ).setValue( colorLockEnabled ).onChange( updateColorLock );
-	colorLockRow.add( colorLock );
-
-	fogColorRow.add( colorLockRow );
-
 	// fog near
 
 	var fogNearRow = new UI.Panel();
@@ -143,12 +121,6 @@ Sidebar.Scene = function ( signals ) {
 
 	}
 
-	function updateClearColor() {
-
-		signals.clearColorChanged.dispatch( clearColor.getHexValue() );
-
-	}
-
 	function updateFogType() {
 
 		var type = fogType.getValue();
@@ -200,13 +172,6 @@ Sidebar.Scene = function ( signals ) {
 
 		signals.fogColorChanged.dispatch( fogColor.getHexValue() );
 
-		if ( colorLockEnabled )  {
-
-			clearColor.setValue( fogColor.getValue() );
-			updateClearColor();
-
-		}
-
 	}
 
 	function updateFogParameters() {
@@ -215,13 +180,6 @@ Sidebar.Scene = function ( signals ) {
 
 	}
 
-	function updateColorLock() {
-
-		colorLockEnabled = colorLock.getValue();
-		updateFogColor();
-
-	}
-
 	// events
 
 	signals.sceneChanged.add( function ( object ) {
@@ -279,12 +237,6 @@ Sidebar.Scene = function ( signals ) {
 
 	} );
 
-	signals.clearColorChanged.add( function ( color ) {
-
-		clearColor.setHexValue( color );
-
-	} );
-
 	return container;
 
 }

editor/js/ui/Sidebar.js

@@ -3,6 +3,7 @@ var Sidebar = function ( signals ) {
 	var container = new UI.Panel( 'absolute' );
 	container.setClass( 'sidebar' );
 
+	container.add( new Sidebar.Renderer( signals ) );
 	container.add( new Sidebar.Scene( signals ) );
 	container.add( new Sidebar.Object3D( signals ) );
 	container.add( new Sidebar.Geometry( signals ) );

examples/js/exporters/SceneExporter2.js

@@ -12,9 +12,9 @@ THREE.SceneExporter2.prototype = {
 
 		var output = {
 			metadata: {
-				formatVersion : 4.0,
-				type : "scene",
-				generatedBy : "SceneExporter"
+				version: 4.0,
+				type: 'scene',
+				generatedBy: 'SceneExporter'
 			}
 		};
 
@@ -118,4 +118,4 @@ THREE.SceneExporter2.prototype = {
 
 	}
 
-}
+}

examples/js/loaders/OBJLoader.js

@@ -19,11 +19,11 @@ THREE.OBJLoader.prototype = {
 
 		request.addEventListener( 'load', function ( event ) {
 
-			var hierarchy = scope.parse( event.target.responseText );
+			var response = scope.parse( event.target.responseText );
 
-			scope.dispatchEvent( { type: 'load', content: hierarchy } );
+			scope.dispatchEvent( { type: 'load', content: response } );
 
-			if ( callback ) callback( hierarchy );
+			if ( callback ) callback( response );
 
 		}, false );
 

examples/js/loaders/SceneLoader2.js

@@ -0,0 +1,159 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+THREE.SceneLoader2 = function () {
+
+	THREE.EventDispatcher.call( this );
+
+};
+
+THREE.SceneLoader2.prototype = {
+
+	constructor: THREE.SceneExporter2,
+
+	load: function ( url ) {
+
+		var scope = this;
+		var request = new XMLHttpRequest();
+
+		request.addEventListener( 'load', function ( event ) {
+
+			var response = scope.parse( JSON.parse( event.target.responseText ) );
+
+			scope.dispatchEvent( { type: 'load', content: response } );
+
+		}, false );
+
+		request.addEventListener( 'progress', function ( event ) {
+
+			scope.dispatchEvent( { type: 'progress', loaded: event.loaded, total: event.total } );
+
+		}, false );
+
+		request.addEventListener( 'error', function () {
+
+			scope.dispatchEvent( { type: 'error', message: 'Couldn\'t load URL [' + url + ']' } );
+
+		}, false );
+
+		request.open( 'GET', url, true );
+		request.send( null );
+
+	},
+
+	parse: function ( json ) {
+
+		console.log( json );
+
+		/*
+		var output = {
+			metadata: {
+				formatVersion : 4.0,
+				type : "scene",
+				generatedBy : "SceneExporter"
+			}
+		};
+
+		console.log( scene );
+
+		var parseObject = function ( object ) {
+
+			var data = { name: object.name };
+
+			if ( object instanceof THREE.PerspectiveCamera ) {
+
+				data.type = 'PerspectiveCamera';
+				data.fov = object.fov;
+				data.aspect = object.aspect;
+				data.near = object.near;
+				data.far = object.far;
+				data.position = object.position.toArray();
+				data.rotation = object.rotation.toArray();
+
+			} else if ( object instanceof THREE.OrthographicCamera ) {
+
+				data.type = 'OrthographicCamera';
+				data.left = object.left;
+				data.right = object.right;
+				data.top = object.top;
+				data.bottom = object.bottom;
+				data.near = object.near;
+				data.far = object.far;
+				data.position = object.position.toArray();
+				data.rotation = object.rotation.toArray();
+
+			} else if ( object instanceof THREE.AmbientLight ) {
+
+				data.type = 'AmbientLight';
+				data.color = object.color.getHex();
+				data.intensity = object.intensity;
+
+			} else if ( object instanceof THREE.DirectionalLight ) {
+
+				data.type = 'DirectionalLight';
+				data.color = object.color.getHex();
+				data.intensity = object.intensity;
+				data.position = object.position.toArray();
+
+			} else if ( object instanceof THREE.PointLight ) {
+
+				data.type = 'PointLight';
+				data.color = object.color.getHex();
+				data.intensity = object.intensity;
+				data.position = object.position.toArray();
+
+			} else if ( object instanceof THREE.SpotLight ) {
+
+				data.type = 'SpotLight';
+				data.color = object.color.getHex();	
+				data.intensity = object.intensity;
+				data.position = object.position.toArray();
+
+			} else if ( object instanceof THREE.HemisphereLight ) {
+
+				data.type = 'HemisphereLight';
+				data.color = object.color.getHex();
+
+			} else if ( object instanceof THREE.Mesh ) {
+
+				data.type = 'Mesh';
+				data.position = object.position.toArray();
+				data.rotation = object.rotation.toArray();
+				data.scale = object.scale.toArray();
+
+			} else {
+
+				data.type = 'Object3D';
+				data.position = object.position.toArray();
+				data.rotation = object.rotation.toArray();
+				data.scale = object.scale.toArray();
+
+			}
+
+			// parse children
+
+			if ( object.children.length > 0 ) {
+
+				data.children = [];
+
+				for ( var i = 0; i < object.children.length; i ++ ) {
+
+					data.children.push( parseObject( object.children[ i ] ) );
+
+				}
+
+			}
+
+			return data;
+
+		}
+
+		output.scene = parseObject( scene ).children;
+
+		return JSON.stringify( output, null, '\t' );
+		*/
+
+	}
+
+}