From 2890d7e4672826ce5cbd288d515f334e0f85198d Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Tue, 27 Jul 2021 10:05:28 +0100 Subject: [PATCH] Editor: Added SidebarMaterialColorProperty. --- editor/js/Sidebar.Material.ColorProperty.js | 90 +++++++++++++++++++++ editor/js/Sidebar.Material.js | 77 ++---------------- editor/sw.js | 1 + 3 files changed, 98 insertions(+), 70 deletions(-) create mode 100644 editor/js/Sidebar.Material.ColorProperty.js diff --git a/editor/js/Sidebar.Material.ColorProperty.js b/editor/js/Sidebar.Material.ColorProperty.js new file mode 100644 index 0000000000..9873bc4b07 --- /dev/null +++ b/editor/js/Sidebar.Material.ColorProperty.js @@ -0,0 +1,90 @@ +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 }; diff --git a/editor/js/Sidebar.Material.js b/editor/js/Sidebar.Material.js index cceb7119bd..ed471779cb 100644 --- a/editor/js/Sidebar.Material.js +++ b/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 ); diff --git a/editor/sw.js b/editor/sw.js index e371f1ddb7..34c1e11cbb 100644 --- a/editor/sw.js +++ b/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', -- GitLab