Editor: Fixed Fog. Closes #9227.

editor/index.html

@@ -129,6 +129,7 @@
 		<script src="js/Toolbar.js"></script>
 		<script src="js/Viewport.js"></script>
 		<script src="js/Viewport.Info.js"></script>
+
 		<script src="js/Command.js"></script>
 		<script src="js/commands/AddObjectCommand.js"></script>
 		<script src="js/commands/RemoveObjectCommand.js"></script>
@@ -254,6 +255,7 @@
 				signals.objectRemoved.add( saveState );
 				signals.materialChanged.add( saveState );
 				signals.sceneGraphChanged.add( saveState );
+				signals.fogChanged.add( saveState );
 				signals.scriptChanged.add( saveState );
 				signals.historyChanged.add( saveState );
 

editor/js/Editor.js

@@ -69,9 +69,8 @@ var Editor = function () {
 		scriptChanged: new Signal(),
 		scriptRemoved: new Signal(),
 
-		fogTypeChanged: new Signal(),
-		fogColorChanged: new Signal(),
-		fogParametersChanged: new Signal(),
+		fogChanged: new Signal(),
+
 		windowResize: new Signal(),
 
 		showGridChanged: new Signal(),
@@ -120,6 +119,9 @@ Editor.prototype = {
 
 		this.scene.uuid = scene.uuid;
 		this.scene.name = scene.name;
+
+		if ( scene.fog !== null ) this.scene.fog = scene.fog.clone();
+
 		this.scene.userData = JSON.parse( JSON.stringify( scene.userData ) );
 
 		// avoid render per object

editor/js/Sidebar.Scene.js

@@ -97,13 +97,15 @@ Sidebar.Scene = function ( editor ) {
 
 	// fog
 
-	function updateFogParameters() {
+	function onFogChanged() {
 
-		var near = fogNear.getValue();
-		var far = fogFar.getValue();
-		var density = fogDensity.getValue();
-
-		signals.fogParametersChanged.dispatch( near, far, density );
+		signals.fogChanged.dispatch(
+			fogType.getValue(),
+			fogColor.getHexValue(),
+			fogNear.getValue(),
+			fogFar.getValue(),
+			fogDensity.getValue()
+		);
 
 	}
 
@@ -117,10 +119,7 @@ Sidebar.Scene = function ( editor ) {
 	} ).setWidth( '150px' );
 	fogType.onChange( function () {
 
-		var type = fogType.getValue();
-
-		signals.fogTypeChanged.dispatch( type );
-
+		onFogChanged();
 		refreshFogUI();
 
 	} );
@@ -138,31 +137,27 @@ Sidebar.Scene = function ( editor ) {
 	container.add( fogPropertiesRow );
 
 	var fogColor = new UI.Color().setValue( '#aaaaaa' );
-	fogColor.onChange( function () {
-
-		signals.fogColorChanged.dispatch( fogColor.getHexValue() );
-
-	} );
+	fogColor.onChange( onFogChanged );
 	fogPropertiesRow.add( fogColor );
 
 	// fog near
 
-	var fogNear = new UI.Number( 0.1 ).setWidth( '40px' ).setRange( 0, Infinity ).onChange( updateFogParameters );
+	var fogNear = new UI.Number( 0.1 ).setWidth( '40px' ).setRange( 0, Infinity ).onChange( onFogChanged );
 	fogPropertiesRow.add( fogNear );
 
 	// fog far
 
-	var fogFar = new UI.Number( 100 ).setWidth( '40px' ).setRange( 0, Infinity ).onChange( updateFogParameters );
+	var fogFar = new UI.Number( 50 ).setWidth( '40px' ).setRange( 0, Infinity ).onChange( onFogChanged );
 	fogPropertiesRow.add( fogFar );
 
 	// fog density
 
-	var fogDensity = new UI.Number( 0.00025 ).setWidth( '40px' ).setRange( 0, 0.1 ).setPrecision( 5 ).onChange( updateFogParameters );
+	var fogDensity = new UI.Number( 0.05 ).setWidth( '40px' ).setRange( 0, 0.1 ).setPrecision( 3 ).onChange( onFogChanged );
 	fogPropertiesRow.add( fogDensity );
 
 	//
 
-	var refreshUI = function () {
+	function refreshUI() {
 
 		var camera = editor.camera;
 		var scene = editor.scene;
@@ -221,7 +216,7 @@ Sidebar.Scene = function ( editor ) {
 
 		refreshFogUI();
 
-	};
+	}
 
 	function refreshFogUI() {
 

editor/js/Viewport.js

@@ -134,14 +134,6 @@ var Viewport = function ( editor ) {
 
 	sceneHelpers.add( transformControls );
 
-	// fog
-
-	var oldFogType = "None";
-	var oldFogColor = 0xaaaaaa;
-	var oldFogNear = 1;
-	var oldFogFar = 5000;
-	var oldFogDensity = 0.00025;
-
 	// object picking
 
 	var raycaster = new THREE.Raycaster();
@@ -496,53 +488,50 @@ var Viewport = function ( editor ) {
 
 	} );
 
-	signals.fogTypeChanged.add( function ( fogType ) {
-
-		if ( fogType !== oldFogType ) {
-
-			if ( fogType === "None" ) {
+	// fog
 
-				scene.fog = null;
+	var currentFogType = null;
 
-			} else if ( fogType === "Fog" ) {
+	signals.fogChanged.add( function ( fogType, fogColor, fogNear, fogFar, fogDensity ) {
 
-				scene.fog = new THREE.Fog( oldFogColor, oldFogNear, oldFogFar );
+		if ( currentFogType !== fogType ) {
 
-			} else if ( fogType === "FogExp2" ) {
+			switch ( fogType ) {
 
-				scene.fog = new THREE.FogExp2( oldFogColor, oldFogDensity );
+				case 'None':
+					scene.fog = null;
+					break;
+				case 'Fog':
+					scene.fog = new THREE.Fog();
+					break;
+				case 'FogExp2':
+					scene.fog = new THREE.FogExp2();
+					break;
 
 			}
 
-			oldFogType = fogType;
+			currentFogType = fogType;
 
 		}
 
-		render();
+		if ( scene.fog instanceof THREE.Fog ) {
 
-	} );
+			scene.fog.color.setHex( fogColor );
+			scene.fog.near = fogNear;
+			scene.fog.far = fogFar;
 
-	signals.fogColorChanged.add( function ( fogColor ) {
+		} else if ( scene.fog instanceof THREE.FogExp2 ) {
 
-		oldFogColor = fogColor;
+			scene.fog.color.setHex( fogColor );
+			scene.fog.density = fogDensity;
 
-		updateFog( scene );
+		}
 
 		render();
 
 	} );
 
-	signals.fogParametersChanged.add( function ( near, far, density ) {
-
-		oldFogNear = near;
-		oldFogFar = far;
-		oldFogDensity = density;
-
-		updateFog( scene );
-
-		render();
-
-	} );
+	//
 
 	signals.windowResize.add( function () {
 
@@ -569,20 +558,6 @@ var Viewport = function ( editor ) {
 
 	//
 
-	function updateFog( root ) {
-
-		if ( root.fog ) {
-
-			root.fog.color.setHex( oldFogColor );
-
-			if ( root.fog.near !== undefined ) root.fog.near = oldFogNear;
-			if ( root.fog.far !== undefined ) root.fog.far = oldFogFar;
-			if ( root.fog.density !== undefined ) root.fog.density = oldFogDensity;
-
-		}
-
-	}
-
 	function animate() {
 
 		requestAnimationFrame( animate );