Editor: Moved Renderer panel to its own file.

editor/js/Sidebar.Project.Renderer.js

@@ -0,0 +1,176 @@
+import * as THREE from '../../build/three.module.js';
+
+import { UINumber, UIPanel, UIRow, UISelect, UIText } from './libs/ui.js';
+import { UIBoolean } from './libs/ui.three.js';
+
+function SidebarProjectRenderer( editor ) {
+
+	var config = editor.config;
+	var signals = editor.signals;
+	var strings = editor.strings;
+
+	var currentRenderer = null;
+
+	var container = new UIPanel();
+
+	var headerRow = new UIRow();
+	headerRow.add( new UIText( strings.getKey( 'sidebar/project/renderer' ).toUpperCase() ) );
+	container.add( headerRow );
+
+	// Antialias
+
+	var antialiasRow = new UIRow();
+	var antialiasBoolean = new UIBoolean( config.getKey( 'project/renderer/antialias' ) ).onChange( function () {
+
+		createRenderer();
+
+	} );
+
+	antialiasRow.add( new UIText( strings.getKey( 'sidebar/project/antialias' ) ).setWidth( '90px' ) );
+	antialiasRow.add( antialiasBoolean );
+
+	container.add( antialiasRow );
+
+	// Shadows
+
+	var shadowsRow = new UIRow();
+	var shadowsBoolean = new UIBoolean( config.getKey( 'project/renderer/shadows' ) ).onChange( function () {
+
+		currentRenderer.shadowMap.enabled = this.getValue();
+		signals.rendererUpdated.dispatch();
+
+	} );
+
+	shadowsRow.add( new UIText( strings.getKey( 'sidebar/project/shadows' ) ).setWidth( '90px' ) );
+	shadowsRow.add( shadowsBoolean );
+
+	var shadowTypeSelect = new UISelect().setOptions( {
+		0: 'Basic',
+		1: 'PCF',
+		2: 'PCF (Soft)',
+		//	3: 'VSM'
+	} ).setWidth( '125px' ).onChange( function () {
+
+		currentRenderer.shadowMap.type = parseFloat( this.getValue() );
+		signals.rendererUpdated.dispatch();
+
+	} );
+	shadowTypeSelect.setValue( config.getKey( 'project/renderer/shadowType' ) );
+
+	shadowsRow.add( shadowTypeSelect );
+
+	container.add( shadowsRow );
+
+	// Physically Correct lights
+
+	var physicallyCorrectLightsRow = new UIRow();
+	var physicallyCorrectLightsBoolean = new UIBoolean( config.getKey( 'project/renderer/physicallyCorrectLights' ) ).onChange( function () {
+
+		currentRenderer.physicallyCorrectLights = this.getValue();
+		signals.rendererUpdated.dispatch();
+
+	} );
+
+	physicallyCorrectLightsRow.add( new UIText( strings.getKey( 'sidebar/project/physicallyCorrectLights' ) ).setWidth( '90px' ) );
+	physicallyCorrectLightsRow.add( physicallyCorrectLightsBoolean );
+
+	container.add( physicallyCorrectLightsRow );
+
+	// Tonemapping
+
+	var toneMappingRow = new UIRow();
+	var toneMappingSelect = new UISelect().setOptions( {
+		0: 'None',
+		1: 'Linear',
+		2: 'Reinhard',
+		3: 'Cineon',
+		4: 'ACESFilmic'
+	} ).setWidth( '120px' ).onChange( function () {
+
+		currentRenderer.toneMapping = parseFloat( this.getValue() );
+		toneMappingExposure.setDisplay( currentRenderer.toneMapping === 0 ? 'none' : '' );
+		signals.rendererUpdated.dispatch();
+
+	} );
+	toneMappingSelect.setValue( config.getKey( 'project/renderer/toneMapping' ) );
+
+	toneMappingRow.add( new UIText( strings.getKey( 'sidebar/project/toneMapping' ) ).setWidth( '90px' ) );
+	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 () {
+
+		currentRenderer.toneMappingExposure = this.getValue();
+		signals.rendererUpdated.dispatch();
+
+	} );
+	toneMappingRow.add( toneMappingExposure );
+
+	container.add( toneMappingRow );
+
+	//
+
+	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.rendererChanged.dispatch( currentRenderer );
+
+	}
+
+	createRenderer();
+
+	// signals
+
+	signals.editorCleared.add( function () {
+
+		currentRenderer.physicallyCorrectLights = false;
+		currentRenderer.shadowMap.enabled = true;
+		currentRenderer.shadowMap.type = 1;
+		currentRenderer.toneMapping = 0;
+		currentRenderer.toneMappingExposure = 1;
+
+		refreshRendererUI();
+
+		signals.rendererUpdated.dispatch();
+
+	} );
+
+	function refreshRendererUI() {
+
+		physicallyCorrectLightsBoolean.setValue( currentRenderer.physicallyCorrectLights );
+		shadowsBoolean.setValue( currentRenderer.shadowMap.enabled );
+		shadowTypeSelect.setValue( currentRenderer.shadowMap.type );
+		toneMappingSelect.setValue( currentRenderer.toneMapping );
+		toneMappingExposure.setValue( currentRenderer.toneMappingExposure );
+		toneMappingExposure.setDisplay( currentRenderer.toneMapping === 0 ? 'none' : '' );
+
+	}
+
+	signals.rendererUpdated.add( function () {
+
+		config.setKey(
+			'project/renderer/antialias', antialiasBoolean.getValue(),
+			'project/renderer/physicallyCorrectLights', physicallyCorrectLightsBoolean.getValue(),
+			'project/renderer/shadows', shadowsBoolean.getValue(),
+			'project/renderer/shadowType', parseFloat( shadowTypeSelect.getValue() ),
+			'project/renderer/toneMapping', parseFloat( toneMappingSelect.getValue() ),
+			'project/renderer/toneMappingExposure', toneMappingExposure.getValue()
+		);
+
+	} );
+
+	return container;
+
+}
+
+export { SidebarProjectRenderer };

editor/js/Sidebar.Project.js

@@ -1,7 +1,6 @@
-import * as THREE from '../../build/three.module.js';
+import { UIPanel, UIRow, UIInput, UICheckbox, UIText, UIListbox, UISpan, UIButton } from './libs/ui.js';
 
-import { UIPanel, UIRow, UIInput, UICheckbox, UIText, UIListbox, UISpan, UIButton, UISelect, UINumber } from './libs/ui.js';
-import { UIBoolean } from './libs/ui.three.js';
+import { SidebarProjectRenderer } from './Sidebar.Project.Renderer.js';
 
 import { SetMaterialCommand } from './commands/SetMaterialCommand.js';
 
@@ -11,8 +10,6 @@ function SidebarProject( editor ) {
 	var signals = editor.signals;
 	var strings = editor.strings;
 
-	var currentRenderer = null;
-
 	var container = new UISpan();
 
 	var projectsettings = new UIPanel();
@@ -65,124 +62,7 @@ function SidebarProject( editor ) {
 
 	// Renderer
 
-	var rendererPanel = new UIPanel();
-	container.add( rendererPanel );
-
-	var headerRow = new UIRow();
-	headerRow.add( new UIText( strings.getKey( 'sidebar/project/renderer' ).toUpperCase() ) );
-	rendererPanel.add( headerRow );
-
-	// Renderer / Antialias
-
-	var antialiasRow = new UIRow();
-	var antialiasBoolean = new UIBoolean( config.getKey( 'project/renderer/antialias' ) ).onChange( function () {
-
-		createRenderer();
-
-	} );
-
-	antialiasRow.add( new UIText( strings.getKey( 'sidebar/project/antialias' ) ).setWidth( '90px' ) );
-	antialiasRow.add( antialiasBoolean );
-
-	rendererPanel.add( antialiasRow );
-
-	// Renderer / Shadows
-
-	var shadowsRow = new UIRow();
-	var shadowsBoolean = new UIBoolean( config.getKey( 'project/renderer/shadows' ) ).onChange( function () {
-
-		currentRenderer.shadowMap.enabled = this.getValue();
-		signals.rendererUpdated.dispatch();
-
-	} );
-
-	shadowsRow.add( new UIText( strings.getKey( 'sidebar/project/shadows' ) ).setWidth( '90px' ) );
-	shadowsRow.add( shadowsBoolean );
-
-	var shadowTypeSelect = new UISelect().setOptions( {
-		0: 'Basic',
-		1: 'PCF',
-		2: 'PCF (Soft)',
-		//	3: 'VSM'
-	} ).setWidth( '125px' ).onChange( function () {
-
-		currentRenderer.shadowMap.type = parseFloat( this.getValue() );
-		signals.rendererUpdated.dispatch();
-
-	} );
-	shadowTypeSelect.setValue( config.getKey( 'project/renderer/shadowType' ) );
-
-	shadowsRow.add( shadowTypeSelect );
-
-	rendererPanel.add( shadowsRow );
-
-	// Renderer / Physically Correct lights
-
-	var physicallyCorrectLightsRow = new UIRow();
-	var physicallyCorrectLightsBoolean = new UIBoolean( config.getKey( 'project/renderer/physicallyCorrectLights' ) ).onChange( function () {
-
-		currentRenderer.physicallyCorrectLights = this.getValue();
-		signals.rendererUpdated.dispatch();
-
-	} );
-
-	physicallyCorrectLightsRow.add( new UIText( strings.getKey( 'sidebar/project/physicallyCorrectLights' ) ).setWidth( '90px' ) );
-	physicallyCorrectLightsRow.add( physicallyCorrectLightsBoolean );
-
-	rendererPanel.add( physicallyCorrectLightsRow );
-
-	// Renderer / Tonemapping
-
-	var toneMappingRow = new UIRow();
-	var toneMappingSelect = new UISelect().setOptions( {
-		0: 'None',
-		1: 'Linear',
-		2: 'Reinhard',
-		3: 'Cineon',
-		4: 'ACESFilmic'
-	} ).setWidth( '120px' ).onChange( function () {
-
-		currentRenderer.toneMapping = parseFloat( this.getValue() );
-		toneMappingExposure.setDisplay( currentRenderer.toneMapping === 0 ? 'none' : '' );
-		signals.rendererUpdated.dispatch();
-
-	} );
-	toneMappingSelect.setValue( config.getKey( 'project/renderer/toneMapping' ) );
-
-	toneMappingRow.add( new UIText( strings.getKey( 'sidebar/project/toneMapping' ) ).setWidth( '90px' ) );
-	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 () {
-
-		currentRenderer.toneMappingExposure = this.getValue();
-		signals.rendererUpdated.dispatch();
-
-	} );
-	toneMappingRow.add( toneMappingExposure );
-
-	rendererPanel.add( toneMappingRow );
-
-	//
-
-	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.rendererChanged.dispatch( currentRenderer );
-
-	}
-
-	createRenderer();
+	container.add( new SidebarProjectRenderer( editor ) );
 
 	// Materials
 
@@ -244,44 +124,6 @@ function SidebarProject( editor ) {
 
 	// signals
 
-	signals.editorCleared.add( function () {
-
-		currentRenderer.physicallyCorrectLights = false;
-		currentRenderer.shadowMap.enabled = true;
-		currentRenderer.shadowMap.type = 1;
-		currentRenderer.toneMapping = 0;
-		currentRenderer.toneMappingExposure = 1;
-
-		refreshRendererUI();
-
-		signals.rendererUpdated.dispatch();
-
-	} );
-
-	function refreshRendererUI() {
-
-		physicallyCorrectLightsBoolean.setValue( currentRenderer.physicallyCorrectLights );
-		shadowsBoolean.setValue( currentRenderer.shadowMap.enabled );
-		shadowTypeSelect.setValue( currentRenderer.shadowMap.type );
-		toneMappingSelect.setValue( currentRenderer.toneMapping );
-		toneMappingExposure.setValue( currentRenderer.toneMappingExposure );
-		toneMappingExposure.setDisplay( currentRenderer.toneMapping === 0 ? 'none' : '' );
-
-	}
-
-	signals.rendererUpdated.add( function () {
-
-		config.setKey(
-			'project/renderer/antialias', antialiasBoolean.getValue(),
-			'project/renderer/physicallyCorrectLights', physicallyCorrectLightsBoolean.getValue(),
-			'project/renderer/shadows', shadowsBoolean.getValue(),
-			'project/renderer/shadowType', parseFloat( shadowTypeSelect.getValue() ),
-			'project/renderer/toneMapping', parseFloat( toneMappingSelect.getValue() ),
-			'project/renderer/toneMappingExposure', toneMappingExposure.getValue()
-		);
-
-	} );
-
 	signals.objectSelected.add( function ( object ) {
 
 		if ( object !== null ) {

editor/sw.js

@@ -132,6 +132,7 @@ const assets = [
 	'./js/Sidebar.js',
 	'./js/Sidebar.Scene.js',
 	'./js/Sidebar.Project.js',
+	'./js/Sidebar.Project.Renderer.js',
 	'./js/Sidebar.Settings.js',
 	'./js/Sidebar.Settings.Shortcuts.js',
 	'./js/Sidebar.Settings.Viewport.js',