Editor: added "World" section.

For the moment just clear color is plugged in.

editor/index.html

@@ -44,6 +44,7 @@
 		<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.World.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>
@@ -65,6 +66,7 @@
 				objectSelected: new SIGNALS.Signal(),
 				objectChanged: new SIGNALS.Signal(),
 				materialChanged: new SIGNALS.Signal(),
+				clearColorChanged: new SIGNALS.Signal(),
 				windowResize: new SIGNALS.Signal()
 
 			};

editor/js/UI.js

@@ -646,6 +646,12 @@ UI.Color.prototype.getValue = function () {
 
 };
 
+UI.Color.prototype.getHexValue = function () {
+
+	return parseInt( this.dom.value.substr( 1 ), 16 );
+
+};
+
 UI.Color.prototype.setValue = function ( value ) {
 
 	this.dom.value = value;

editor/js/ui/Sidebar.Outliner.js

@@ -25,6 +25,9 @@ Sidebar.Outliner = function ( signals ) {
 
 	var scene = null;
 
+	var clearColor = new THREE.Color( 0xaaaaaa );
+	var clearAlpha = 1;
+
 	function update() {
 
 		var id = parseInt( sceneGraph.getValue() );
@@ -90,9 +93,15 @@ Sidebar.Outliner = function ( signals ) {
 
 	} );
 
+	signals.clearColorChanged.add( function ( color ) {
+
+		clearColor.setHex( color );
+
+	} );
+
 	function exportScene() {
 
-		var output = new THREE.SceneExporter().parse( scene );
+		var output = new THREE.SceneExporter().parse( scene, clearColor, clearAlpha );
 
 		var blob = new Blob( [ output ], { type: 'text/plain' } );
 		var objectURL = URL.createObjectURL( blob );

editor/js/ui/Sidebar.Properties.Material.js

@@ -238,25 +238,25 @@ Sidebar.Properties.Material = function ( signals ) {
 
 			if ( material.color !== undefined ) {
 
-				material.color.setHex( parseInt( materialColor.getValue().substr( 1 ), 16 ) );
+				material.color.setHex( materialColor.getHexValue() );
 
 			}
 
 			if ( material.ambient !== undefined ) {
 
-				material.ambient.setHex( parseInt( materialAmbient.getValue().substr( 1 ), 16 ) );
+				material.ambient.setHex( materialAmbient.getHexValue() );
 
 			}
 
 			if ( material.emissive !== undefined ) {
 
-				material.emissive.setHex( parseInt( materialEmissive.getValue().substr( 1 ), 16 ) );
+				material.emissive.setHex( materialEmissive.getHexValue() );
 
 			}
 
 			if ( material.specular !== undefined ) {
 
-				material.specular.setHex( parseInt( materialSpecular.getValue().substr( 1 ), 16 ) );
+				material.specular.setHex( materialSpecular.getHexValue() );
 
 			}
 

editor/js/ui/Sidebar.Properties.World.js

@@ -0,0 +1,55 @@
+Sidebar.Properties.World = function ( signals ) {
+
+	var container = new UI.Panel();
+	container.setBorderTop( '1px solid #ccc' );
+	container.setPadding( '10px' );
+
+	var objectType = new UI.Text().setColor( '#666' ).setValue( 'WORLD' );
+	container.add( objectType );
+	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 );
+
+	// fog
+
+	var fogRow = new UI.Panel();
+	var fog = new UI.Select( 'absolute' ).setOptions( {
+
+		'None': 'None',
+		'Fog': 'Fog',
+		'FogExp2': 'FogExp2'
+
+	} ).setLeft( '100px' ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( updateFog );
+
+	fogRow.add( new UI.Text().setValue( 'Fog' ).setColor( '#666' ) );
+	fogRow.add( fog );
+
+	container.add( fogRow );
+
+	//
+
+	function updateClearColor() {
+
+		signals.clearColorChanged.dispatch( clearColor.getHexValue() );
+
+	}
+
+	function updateFog() {
+
+		console.log( "fog", fog.getValue() );
+
+	}
+
+	// events
+
+	return container;
+
+}

editor/js/ui/Sidebar.Properties.js

@@ -2,6 +2,7 @@ Sidebar.Properties = function ( signals ) {
 
 	var container = new UI.Panel();
 
+	container.add( new Sidebar.Properties.World( signals ) );
 	container.add( new Sidebar.Properties.Object3D( signals ) );
 	container.add( new Sidebar.Properties.Geometry( signals ) );
 	container.add( new Sidebar.Properties.Material( signals ) );

editor/js/ui/Viewport.js

@@ -393,6 +393,14 @@ var Viewport = function ( signals ) {
 
 	} );
 
+	signals.clearColorChanged.add( function ( color ) {
+
+		renderer.setClearColorHex( color, 1 );
+
+		render();
+
+	} );
+
 	signals.windowResize.add( function () {
 
 		camera.aspect = container.dom.offsetWidth / container.dom.offsetHeight;

examples/js/exporters/SceneExporter.js

@@ -8,7 +8,7 @@ THREE.SceneExporter.prototype = {
 
 	constructor: THREE.SceneExporter,
 
-	parse: function ( scene ) {
+	parse: function ( scene, clearColor, clearAlpha ) {
 
 		var position = Vector3String( scene.position );
 		var rotation = Vector3String( scene.rotation );
@@ -125,8 +125,8 @@ THREE.SceneExporter.prototype = {
 
 		// todo: get somehow these from Viewport's renderer
 
-		var bgcolor = ColorString( new THREE.Color( 0xaaaaaa ) );
-		var bgalpha = 1.0;
+		var bgcolor = ColorString( clearColor );
+		var bgalpha = clearAlpha;
 		var defcamera = LabelString( "default_camera" );
 
 		//