Editor: Added SidebarMaterialColorProperty.

editor/js/Sidebar.Material.ColorProperty.js

+import { UIColor, UINumber, UIRow, UIText } from './libs/ui.js';
+import { SetMaterialColorCommand } from './commands/SetMaterialColorCommand.js';
+import { SetMaterialValueCommand } from './commands/SetMaterialValueCommand.js';
+
+function SidebarMaterialColorProperty( editor, property, name ) {
+
+	const signals = editor.signals;
+
+	const container = new UIRow();
+	container.add( new UIText( name ).setWidth( '90px' ) );
+
+	const color = new UIColor().onInput( onChange );
+	container.add( color );
+
+	let emissiveIntensity;
+
+	if ( property === 'emissive' ) {
+
+		emissiveIntensity = new UINumber( 1 ).setWidth( '30px' ).onChange( onChange );
+		container.add( emissiveIntensity );
+
+	}
+
+	let object = null;
+	let material = null;
+
+	function onChange() {
+
+		if ( material[ property ].getHex() !== color.getHexValue() ) {
+
+			editor.execute( new SetMaterialColorCommand( editor, object, property, color.getHexValue(), /* TODO: currentMaterialSlot*/ 0 ) );
+
+		}
+
+		if ( emissiveIntensity !== undefined ) {
+
+			if ( material.emissiveIntensity !== emissiveIntensity.getValue() ) {
+
+				editor.execute( new SetMaterialValueCommand( editor, object, 'emissiveIntensity', emissiveIntensity.getValue(), /* TODO: currentMaterialSlot*/ 0 ) );
+
+			}
+
+		}
+
+	}
+
+	function update() {
+
+		if ( object === null ) return;
+		if ( object.material === undefined ) return;
+
+		material = object.material;
+
+		if ( property in material ) {
+
+			color.setHexValue( material[ property ].getHexString() );
+
+			if ( emissiveIntensity !== undefined ) {
+
+				emissiveIntensity.setValue( material.emissiveIntensity );
+
+			}
+
+			container.setDisplay( '' );
+
+		} else {
+
+			container.setDisplay( 'none' );
+
+		}
+
+	}
+
+	//
+
+	signals.objectSelected.add( function ( selected ) {
+
+		object = selected;
+
+		update();
+
+	} );
+
+	signals.materialChanged.add( update );
+
+	return container;
+
+}
+
+export { SidebarMaterialColorProperty };

editor/js/Sidebar.Material.js

@@ -9,6 +9,7 @@ import { SetMaterialMapCommand } from './commands/SetMaterialMapCommand.js';
 import { SetMaterialValueCommand } from './commands/SetMaterialValueCommand.js';
 import { SetMaterialVectorCommand } from './commands/SetMaterialVectorCommand.js';
 
+import { SidebarMaterialColorProperty } from './Sidebar.Material.ColorProperty.js';
 var materialClasses = {
 	'LineBasicMaterial': THREE.LineBasicMaterial,
 	'LineDashedMaterial': THREE.LineDashedMaterial,
@@ -134,13 +135,8 @@ function SidebarMaterial( editor ) {
 
 	// color
 
-	var materialColorRow = new UIRow();
-	var materialColor = new UIColor().onInput( update );
-
-	materialColorRow.add( new UIText( strings.getKey( 'sidebar/material/color' ) ).setWidth( '90px' ) );
-	materialColorRow.add( materialColor );
-
-	container.add( materialColorRow );
+	const materialColor = new SidebarMaterialColorProperty( editor, 'color', strings.getKey( 'sidebar/material/color' ) );
+	container.add( materialColor );
 
 	// roughness
 
@@ -188,25 +184,13 @@ function SidebarMaterial( editor ) {
 
 	// emissive
 
-	var materialEmissiveRow = new UIRow();
-	var materialEmissive = new UIColor().setHexValue( 0x000000 ).onInput( update );
-	var materialEmissiveIntensity = new UINumber( 1 ).setWidth( '30px' ).onChange( update );
-
-	materialEmissiveRow.add( new UIText( strings.getKey( 'sidebar/material/emissive' ) ).setWidth( '90px' ) );
-	materialEmissiveRow.add( materialEmissive );
-	materialEmissiveRow.add( materialEmissiveIntensity );
-
-	container.add( materialEmissiveRow );
+	const materialEmissive = new SidebarMaterialColorProperty( editor, 'emissive', strings.getKey( 'sidebar/material/emissive' ) );
+	container.add( materialEmissive );
 
 	// specular
 
-	var materialSpecularRow = new UIRow();
-	var materialSpecular = new UIColor().setHexValue( 0x111111 ).onInput( update );
-
-	materialSpecularRow.add( new UIText( strings.getKey( 'sidebar/material/specular' ) ).setWidth( '90px' ) );
-	materialSpecularRow.add( materialSpecular );
-
-	container.add( materialSpecularRow );
+	const materialSpecular = new SidebarMaterialColorProperty( editor, 'specular', strings.getKey( 'sidebar/material/specular' ) );
+	container.add( materialSpecular );
 
 	// shininess
 
@@ -646,12 +630,6 @@ function SidebarMaterial( editor ) {
 
 			}
 
-			if ( material.color !== undefined && material.color.getHex() !== materialColor.getHexValue() ) {
-
-				editor.execute( new SetMaterialColorCommand( editor, currentObject, 'color', materialColor.getHexValue(), currentMaterialSlot ) );
-
-			}
-
 			if ( material.roughness !== undefined && Math.abs( material.roughness - materialRoughness.getValue() ) >= epsilon ) {
 
 				editor.execute( new SetMaterialValueCommand( editor, currentObject, 'roughness', materialRoughness.getValue(), currentMaterialSlot ) );
@@ -688,24 +666,6 @@ function SidebarMaterial( editor ) {
 
 			}
 
-			if ( material.emissive !== undefined && material.emissive.getHex() !== materialEmissive.getHexValue() ) {
-
-				editor.execute( new SetMaterialColorCommand( editor, currentObject, 'emissive', materialEmissive.getHexValue(), currentMaterialSlot ) );
-
-			}
-
-			if ( material.emissiveIntensity !== undefined && material.emissiveIntensity !== materialEmissiveIntensity.getValue() ) {
-
-				editor.execute( new SetMaterialValueCommand( editor, currentObject, 'emissiveIntensity', materialEmissiveIntensity.getValue(), currentMaterialSlot ) );
-
-			}
-
-			if ( material.specular !== undefined && material.specular.getHex() !== materialSpecular.getHexValue() ) {
-
-				editor.execute( new SetMaterialColorCommand( editor, currentObject, 'specular', materialSpecular.getHexValue(), currentMaterialSlot ) );
-
-			}
-
 			if ( material.shininess !== undefined && Math.abs( material.shininess - materialShininess.getValue() ) >= epsilon ) {
 
 				editor.execute( new SetMaterialValueCommand( editor, currentObject, 'shininess', materialShininess.getValue(), currentMaterialSlot ) );
@@ -1233,13 +1193,10 @@ function SidebarMaterial( editor ) {
 
 		var properties = {
 			'name': materialNameRow,
-			'color': materialColorRow,
 			'roughness': materialRoughnessRow,
 			'metalness': materialMetalnessRow,
-			'emissive': materialEmissiveRow,
 			// 'sheen': materialSheenRow,
 			'transmission': materialTransmissionRow,
-			'specular': materialSpecularRow,
 			'shininess': materialShininessRow,
 			'clearcoat': materialClearcoatRow,
 			'clearcoatRoughness': materialClearcoatRoughnessRow,
@@ -1356,12 +1313,6 @@ function SidebarMaterial( editor ) {
 		materialClass.setValue( material.type );
 
 
-		if ( material.color !== undefined ) {
-
-			materialColor.setHexValue( material.color.getHexString() );
-
-		}
-
 		if ( material.roughness !== undefined ) {
 
 			materialRoughness.setValue( material.roughness );
@@ -1389,20 +1340,6 @@ function SidebarMaterial( editor ) {
 
 		}
 
-		if ( material.emissive !== undefined ) {
-
-			materialEmissive.setHexValue( material.emissive.getHexString() );
-
-			materialEmissiveIntensity.setValue( material.emissiveIntensity );
-
-		}
-
-		if ( material.specular !== undefined ) {
-
-			materialSpecular.setHexValue( material.specular.getHexString() );
-
-		}
-
 		if ( material.shininess !== undefined ) {
 
 			materialShininess.setValue( material.shininess );

editor/sw.js

@@ -175,6 +175,7 @@ const assets = [
 	'./js/Sidebar.Geometry.TubeGeometry.js',
 	'./js/Sidebar.Geometry.TeapotGeometry.js',
 	'./js/Sidebar.Material.js',
+	'./js/Sidebar.Material.ColorProperty.js',
 	'./js/Sidebar.Animation.js',
 	'./js/Sidebar.Script.js',
 	'./js/Strings.js',