Editor: Added background color support.

editor/index.html

@@ -254,6 +254,7 @@
 				signals.objectChanged.add( saveState );
 				signals.objectRemoved.add( saveState );
 				signals.materialChanged.add( saveState );
+				signals.sceneBackgroundChanged.add( saveState );
 				signals.sceneFogChanged.add( saveState );
 				signals.sceneGraphChanged.add( saveState );
 				signals.scriptChanged.add( saveState );

editor/js/Editor.js

@@ -47,6 +47,7 @@ var Editor = function () {
 		spaceChanged: new Signal(),
 		rendererChanged: new Signal(),
 
+		sceneBackgroundChanged: new Signal(),
 		sceneFogChanged: new Signal(),
 		sceneGraphChanged: new Signal(),
 
@@ -88,6 +89,7 @@ var Editor = function () {
 
 	this.scene = new THREE.Scene();
 	this.scene.name = 'Scene';
+	this.scene.background = new THREE.Color( 0xaaaaaa );
 
 	this.sceneHelpers = new THREE.Scene();
 
@@ -119,6 +121,7 @@ Editor.prototype = {
 		this.scene.uuid = scene.uuid;
 		this.scene.name = scene.name;
 
+		if ( scene.background !== null ) this.scene.background = scene.background.clone();
 		if ( scene.fog !== null ) this.scene.fog = scene.fog.clone();
 
 		this.scene.userData = JSON.parse( JSON.stringify( scene.userData ) );

editor/js/Sidebar.Scene.js

@@ -76,24 +76,22 @@ Sidebar.Scene = function ( editor ) {
 	container.add( outliner );
 	container.add( new UI.Break() );
 
-	/*
 	// background
 
-	var backgroundRow = new UI.Row();
-	var background = new UI.Select().setOptions( {
+	function onBackgroundChanged() {
 
-		'None': 'None',
-		'Color': 'Color',
-		'Texture': 'Texture'
+		signals.sceneBackgroundChanged.dispatch( backgroundColor.getHexValue() );
 
-	} ).setWidth( '150px' );
-	background.onChange( function () {} );
+	}
+
+	var backgroundRow = new UI.Row();
+
+	var backgroundColor = new UI.Color().setValue( '#aaaaaa' ).onChange( onBackgroundChanged );
 
 	backgroundRow.add( new UI.Text( 'Background' ).setWidth( '90px' ) );
-	backgroundRow.add( background );
+	backgroundRow.add( backgroundColor );
 
 	container.add( backgroundRow );
-	*/
 
 	// fog
 
@@ -191,6 +189,14 @@ Sidebar.Scene = function ( editor ) {
 
 		}
 
+		console.log( scene.background );
+
+		if ( scene.background ) {
+
+			backgroundColor.setHexValue( scene.background.getHex() );
+
+		}
+
 		if ( scene.fog ) {
 
 			fogColor.setHexValue( scene.fog.color.getHex() );

editor/js/Viewport.js

@@ -289,8 +289,6 @@ var Viewport = function ( editor ) {
 
 	} );
 
-	var clearColor;
-
 	signals.themeChanged.add( function ( value ) {
 
 		switch ( value ) {
@@ -299,19 +297,15 @@ var Viewport = function ( editor ) {
 				sceneHelpers.remove( grid );
 				grid = new THREE.GridHelper( 30, 60, 0x444444, 0x888888 );
 				sceneHelpers.add( grid );
-				clearColor = 0xaaaaaa;
 				break;
 			case 'css/dark.css':
 				sceneHelpers.remove( grid );
 				grid = new THREE.GridHelper( 30, 60, 0xbbbbbb, 0x888888 );
 				sceneHelpers.add( grid );
-				clearColor = 0x333333;
 				break;
 
 		}
 
-		renderer.setClearColor( clearColor );
-
 		render();
 
 	} );
@@ -346,7 +340,6 @@ var Viewport = function ( editor ) {
 
 		renderer.autoClear = false;
 		renderer.autoUpdateScene = false;
-		renderer.setClearColor( clearColor );
 		renderer.setPixelRatio( window.devicePixelRatio );
 		renderer.setSize( container.dom.offsetWidth, container.dom.offsetHeight );
 
@@ -490,6 +483,14 @@ var Viewport = function ( editor ) {
 
 	// fog
 
+	signals.sceneBackgroundChanged.add( function ( backgroundColor ) {
+
+		scene.background.setHex( backgroundColor );
+
+		render();
+
+	} );
+
 	var currentFogType = null;
 
 	signals.sceneFogChanged.add( function ( fogType, fogColor, fogNear, fogFar, fogDensity ) {
@@ -603,14 +604,12 @@ var Viewport = function ( editor ) {
 			vrControls.update();
 
 			camera.updateMatrixWorld();
-			renderer.clear();
 
 			vrEffect.render( scene, vrCamera );
 			vrEffect.render( sceneHelpers, vrCamera );
 
 		} else {
 
-			renderer.clear();
 			renderer.render( scene, camera );
 
 			if ( renderer instanceof THREE.RaytracingRenderer === false ) {