Editor: Refactored Sidebar.Project

editor/js/Sidebar.Project.js

@@ -16,7 +16,6 @@ function SidebarProject( editor ) {
 	var strings = editor.strings;
 
 	var currentRenderer = null;
-	var currentPmremGenerator = null;
 
 	var container = new UISpan();
 
@@ -83,7 +82,7 @@ function SidebarProject( editor ) {
 	var antialiasBoolean = new UIBoolean( config.getKey( 'project/renderer/antialias' ) ).onChange( function () {
 
 		config.setKey( 'project/renderer/antialias', this.getValue() );
-		updateRenderer();
+		createRenderer();
 
 	} );
 
@@ -146,12 +145,15 @@ function SidebarProject( editor ) {
 		2: 'Reinhard',
 		3: 'Cineon',
 		4: 'ACESFilmic'
-	} ).setWidth( '120px' ).onChange( function () {
+	} ).setWidth( '120px' ).onChange( function ( value ) {
+
+		var value = this.getValue();
 
-		var toneMapping = parseFloat( this.getValue() );
-		config.setKey( 'project/renderer/toneMapping', toneMapping );
+		config.setKey( 'project/renderer/toneMapping', parseFloat( value ) );
 		updateRenderer();
 
+		toneMappingExposure.setDisplay( value === '0' ? 'none' : '' );
+
 	} );
 	toneMappingSelect.setValue( config.getKey( 'project/renderer/toneMapping' ) );
 
@@ -159,12 +161,13 @@ function SidebarProject( editor ) {
 	toneMappingRow.add( toneMappingSelect );
 
 	var toneMappingExposure = new UINumber( config.getKey( 'project/renderer/toneMappingExposure' ) );
+	toneMappingExposure.setDisplay( toneMappingSelect.getValue() === '0' ? 'none' : '' );
 	toneMappingExposure.setWidth( '30px' ).setMarginLeft( '10px' );
 	toneMappingExposure.setRange( 0, 10 );
 	toneMappingExposure.onChange( function () {
 
 		config.setKey( 'project/renderer/toneMappingExposure', this.getValue() );
-		updateTonemapping();
+		updateRenderer();
 
 	} );
 	toneMappingRow.add( toneMappingExposure );
@@ -175,64 +178,31 @@ function SidebarProject( editor ) {
 
 	function updateRenderer() {
 
-		createRenderer(
-			antialiasBoolean.getValue(),
-			shadowsBoolean.getValue(),
-			shadowTypeSelect.getValue(),
-			toneMappingSelect.getValue(),
-			toneMappingExposure.getValue(),
-			physicallyCorrectLightsBoolean.getValue()
-		);
-
-	}
-
-	function createRenderer( antialias, shadows, shadowType, toneMapping, toneMappingExposure, physicallyCorrectLights ) {
-
-		var parameters = { antialias: antialias };
-
-		if ( currentRenderer !== null ) {
-
-			currentRenderer.dispose();
-			currentPmremGenerator.dispose();
-
-		}
-
-		currentRenderer = new THREE.WebGLRenderer( parameters );
-		currentPmremGenerator = new THREE.PMREMGenerator( currentRenderer );
-		currentPmremGenerator.compileCubemapShader();
-		currentPmremGenerator.compileEquirectangularShader();
-
-		if ( shadows ) {
-
-			currentRenderer.shadowMap.enabled = true;
-			currentRenderer.shadowMap.type = parseFloat( shadowType );
-
-		}
-
-		currentRenderer.toneMapping = parseFloat( toneMapping );
-		currentRenderer.toneMappingExposure = toneMappingExposure;
-		currentRenderer.physicallyCorrectLights = physicallyCorrectLights;
+		currentRenderer.physicallyCorrectLights = physicallyCorrectLightsBoolean.getValue();
+		currentRenderer.shadowMap.enabled = shadowsBoolean.getValue();
+		currentRenderer.shadowMap.type = parseFloat( shadowTypeSelect.getValue() );
+		currentRenderer.toneMapping = parseFloat( toneMappingSelect.getValue() );
+		currentRenderer.toneMappingExposure = toneMappingExposure.getValue();
 
-		signals.rendererChanged.dispatch( currentRenderer, currentPmremGenerator );
+		signals.rendererUpdated.dispatch();
 
 	}
 
-	function updateTonemapping() {
+	function createRenderer() {
 
+		currentRenderer = new THREE.WebGLRenderer( { antialias: antialiasBoolean.getValue() } );
+		currentRenderer.outputEncoding = THREE.sRGBEncoding;
+		currentRenderer.physicallyCorrectLights = physicallyCorrectLightsBoolean.getValue();
+		currentRenderer.shadowMap.enabled = shadowsBoolean.getValue();
+		currentRenderer.shadowMap.type = parseFloat( shadowTypeSelect.getValue() );
+		currentRenderer.toneMapping = parseFloat( toneMappingSelect.getValue() );
 		currentRenderer.toneMappingExposure = toneMappingExposure.getValue();
 
-		signals.rendererUpdated.dispatch();
+		signals.rendererChanged.dispatch( currentRenderer );
 
 	}
 
-	createRenderer(
-		config.getKey( 'project/renderer/antialias' ),
-		config.getKey( 'project/renderer/shadows' ),
-		config.getKey( 'project/renderer/shadowType' ),
-		config.getKey( 'project/renderer/toneMapping' ),
-		config.getKey( 'project/renderer/toneMappingExposure' ),
-		config.getKey( 'project/renderer/physicallyCorrectLights' )
-	 );
+	createRenderer();
 
 	// Materials
 

editor/js/Viewport.js

@@ -324,27 +324,42 @@ function Viewport( editor ) {
 
 	signals.rendererUpdated.add( function () {
 
+		scene.traverse( function ( child ) {
+
+			if ( child.material !== undefined ) {
+
+				child.material.needsUpdate = true;
+
+			}
+
+		} );
+
 		render();
 
 	} );
 
-	signals.rendererChanged.add( function ( newRenderer, newPmremGenerator ) {
+	signals.rendererChanged.add( function ( newRenderer ) {
 
 		if ( renderer !== null ) {
 
+			renderer.dispose();
+			pmremGenerator.dispose();
+
 			container.dom.removeChild( renderer.domElement );
 
 		}
 
 		renderer = newRenderer;
-		pmremGenerator = newPmremGenerator;
 
 		renderer.autoClear = false;
 		renderer.autoUpdateScene = false;
-		renderer.outputEncoding = THREE.sRGBEncoding;
 		renderer.setPixelRatio( window.devicePixelRatio );
 		renderer.setSize( container.dom.offsetWidth, container.dom.offsetHeight );
 
+		pmremGenerator = new THREE.PMREMGenerator( renderer );
+		pmremGenerator.compileCubemapShader();
+		pmremGenerator.compileEquirectangularShader();
+
 		container.dom.appendChild( renderer.domElement );
 
 		render();